[ jQuery Mobile ] jQuery Mobile의 Collapsible 블록 사용하기. ( 소스 코드 )

jQuery Mobile 의 Collapsible를 이용하면 콘텐츠 영역을 접었다 펼 칠 수 있는 UI를 제공받을 수 있다. 콘텐츠를 감싸고 있는 태그에 data-role="collapsible" 속성을 지정함으로 사용할 수 있으며, 태그 안에 처음 정의된 태그가 Collapsible 블록의 타이틀로 지정된다.

해당 블록은 기본적으로 접혀진 상태로 나타내지지만, data-collapsed="false" 속성을 추가한다면, 펼쳐진 상태로 나타낼 수 있다. 여러 개의 Collapsible 블록을 하나의 그룹으로 구성하고, 그룹화된 블록들은 상호작용을 하여 그룹의 하나의 블록만 펼쳐지게 된다.

그룹화하기 위해서는 data-role="collapsible-set" 속성을 준 로 블록들을 감싸주면 된다. < 예제 소스 코드 > 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ...