jQuery Mobile접이식

❮ 이전 다음 장 ❯

접을 수있는 콘텐츠 블록

Collapsibles는 숨기거나 정보의 일부를 저장하기위한 유용한 콘텐츠를 표시 할 수 있습니다.

콘텐츠의 축소 블록을 만들려면 지정 data-role="collapsible" 컨테이너에 속성을. 컨테이너 내부 (div) , 헤더 추가 (H1-H6) 는 확장하려는 HTML 마크 업 다음 또는 범례 요소를 :

예

<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>

»그것을 자신을 시도

기본적으로 내용이 닫힙니다. 페이지가로드를 사용하면 콘텐츠를 확장 data-collapsed="false" :

예

<div data-role="collapsible" data-collapsed="false" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm now expanded by default.</p>
</div>

»그것을 자신을 시도

중첩 축소 블록

접을 수있는 콘텐츠 블록 (축소 내부 축소) 중첩 될 수 있습니다 :

예

<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
<div data-role="collapsible" >
<h1>Click me - I'm a nested collapsible block!</h1>
<p>I'm the expanded content in the nested collapsible block.</p>
</div>
</div>

»그것을 자신을 시도

당신이 원하는대로 축소 콘텐츠 블록은 여러 번 중첩 될 수 있습니다.

축소 설정

축소 세트 (종종 아코디언이라 함) 그룹화 축소 블록입니다. 새로운 블록이 열릴 때, 모든 다른 블록 가까이.

여러 접을 수있는 콘텐츠 블록을 만들고 접을 수있는 블록 주변의 데이터 역할 = "collapsibleset"로 새 컨테이너를 포장 :

예

<div data-role="collapsibleset" >
<div data-role="collapsible">
    <h1>Click me - I'm collapsible!</h1>
    <p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
    <h1>Click me - I'm collapsible!</h1>
    <p>I'm the expanded content.</p>
</div>
</div>

»그것을 자신을 시도