jQuery Mobile‎ > ‎레이아웃‎ > ‎

접었다 폈다 하기


원하는 요소에 data-role="collapsible"을 지정하면 접고 펼칠 수 있는 버튼이 만들어진다. 처음에 내용은 숨겨져 있는 상태이며 버튼을 누르면 내용이 펼쳐진다. 컨텐트의 헤딩(<h1> ...<h6>)이 버튼의 텍스트로 표시되고 버튼의 아이콘은 왼쪽에 +모양으로 표시된다. 헤딩 요소 뒤에는 펼쳤을 때 보여줄 컨텐트를 입력해둔다.

<div data-role="collapsible" data-content-theme="d">
<h3>19
세 미만 클릭 금지</h3>
<p>
~ 속았지~</p>
</div>

처음부터 미리 펼쳐져 있도록 하려면 data-collapsed="false"를 지정한다.

헤딩에 테마를 적용하려면 data-theme를 사용하고, 컨텐트에 테마를 적용하려면 data-content-theme를 사용한다. data-content-theme는 해당 테마의 보더, 배경색 등만 설정된다. 당연히 테마 값은 a, b, c, d, e 값을 갖는다.

물론, 접었다 펴는 구조를 여러 번 중첩해서 사용할 수도 있다. 마트료시카 인형 마냥...


하위 페이지 (1): 폴딩 관련 속성
Comments