jQuery Mobile 축소 가능 블록
접이식 콘텐츠 블록
접이식 블록을 사용하면 콘텐츠를 숨기거나 표시할 수 있습니다. 부분 정보를 저장하는 데 유용합니다.
접이식 콘텐츠 블록을 생성하려면 컨테이너에 data-role="collapsible" 속성을 추가해야 합니다. 컨테이너(div) 내부에 제목 요소(H1-H6)를 추가하고 확장하려는 HTML 태그를 추가합니다.
Example
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>可折叠块</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible"> <h1>点击我 - 我可以折叠！</h1> <p>我是可折叠的内容。</p> </div> </div> <div data-role="footer"> <h1>页脚文本</h1> </div> </div> </body> </html>
예제 실행»
"예제 실행" 버튼을 클릭하여 온라인으로 보기 예
기본적으로 콘텐츠는 접혀 있습니다. 페이지가 로드될 때 콘텐츠를 확장하려면 data-collapsed="false"를 사용하세요.
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>可折叠块</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible" data-collapsed="false"> <h1>点击我 - 我可以折叠！</h1> <p>我是可折叠的内容。</p> </div> </div> <div data-role="footer"> <h1>页脚文本</h1> </div> </div> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
중첩 가능 접을 수 있는 블록
접을 수 있는 콘텐츠 블록은 서로 중첩될 수 있습니다.
Instances
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>嵌套的可折叠块</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible"> <h1>点击我 - 我可以折叠！</h1> <p>我是可折叠的内容。</p> <div data-role="collapsible"> <h1>点击我 - 我是嵌套的可折叠块！</h1> <p>我是嵌套的可折叠块中被展开的内容。</p> </div> </div> </div> <div data-role="footer"> <h1>页脚文本</h1> </div> </div> </body> </html>
Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
| 축소 가능한 콘텐츠 블록은 필요한 만큼 여러 번 중첩될 수 있습니다. |
접이식 컬렉션
접이식 컬렉션은 아코디언처럼 그룹화되어 있는 접을 수 있는 블록입니다. 새 블록이 확장되면 다른 모든 블록은 축소됩니다.
여러 개의 축소 가능한 콘텐츠 블록을 생성한 다음 data-role="collapsible-set"을 사용하여 축소 가능한 콘텐츠 블록을 새 컨테이너로 둘러쌉니다.
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>可折叠集</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsibleset"> <div data-role="collapsible"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> <div data-role="collapsible"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> <div data-role="collapsible"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> <div data-role="collapsible"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> </div> </div> <div data-role="footer"> <h1>页脚内容</h1> </div> </div> </body> </html>
인스턴스 실행»
"예제 실행"을 클릭하세요. 온라인 예제를 보려면 버튼
더 많은 예제
데이터 삽입 속성을 통해 둥근 모서리와 여백을 취소하세요
Example
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>可折叠的 data-inset</h1> </div> <div data-role="main" class="ui-content"> <h2>带有圆角的可折叠内容块:</h2> <div data-role="collapsible"> <h1>这是有圆角的可折叠内容块。</h1> <p>默认地，可折叠块带有包含外边距的圆角，使用 data-inset="false" 可去掉外边距与圆角。</p> </div> <h2>没有圆角的可折叠内容块：</h2> <div data-role="collapsible" data-inset="false"> <h1>这是没有圆角的可折叠内容块。</h1> <p>默认地，可折叠块带有包含外边距的圆角，使用 data-inset="false" 可去掉外边距与圆角。</p> </div> <br> <h2>没有圆角的可折叠集合:</h2> <div data-role="collapsibleset"> <div data-role="collapsible" data-inset="false"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> <div data-role="collapsible" data-inset="false"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> <div data-role="collapsible" data-inset="false"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> <div data-role="collapsible" data-inset="false"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
예제 실행»
"예제 실행" 버튼을 클릭하세요 온라인 예시 보기
접이식 블록의 둥근 모서리와 여백을 취소하는 방법.
데이터-미니 속성을 통한 미니 축소형 블록
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>可折叠块</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible" data-mini="true"> <h1>点击我 - 我是可折叠的！</h1> <p>我是可折叠的内容。</p> </div> </div> <div data-role="footer"> <h1>页脚</h1> </div> </div> </body> </html>
인스턴스 실행 »
온라인 예시를 보려면 "인스턴스 실행" 버튼을 클릭하세요
접이식 블록을 더 작게 만드는 방법.
데이터 축소 아이콘 및 데이터 확장 아이콘을 통해 아이콘 변경
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>可折叠块</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"> <h1>data-collapsed-icon 规定按钮的图标。</h1> <p>data-expanded-icon 规定内容被展开时按钮的图标。</p> </div> </div> <div data-role="footer"> <h1>页脚</h1> </div> </div> </body> </html>
인스턴스 실행»
"인스턴스 실행" 버튼을 클릭하여 온라인 예시를 확인하세요
변경 방법 축소 가능한 블록의 아이콘(기본값은 + 및 -)
팝업 창에서 접기 사용
팝업 창에서 접기 항목을 만듭니다.
아이콘 위치 수정
접힌 항목에서 아이콘 위치를 수정하는 방법(기본값은 왼쪽)
