17. jQuery Mobile Collapsible 블록

Index

15. jQuery Mobile 리스트

16. jQuery Mobile 그리드 레이아웃

17. jQuery Mobile Collapsible 블록

18. 터치 이벤트

19. jQuery Mobile 폼 양식

 

 

jQuery Mobile Collapsible 블록은 해당 블록으로 감싼 컨텐츠 영역을 접었다 펼수 있다.

Collapsible 블록은 컨텐츠를 감싸는 <div data-role="collapsible"> 태그 안에 제목을 표시하는 <h> 태그와 나머지 부분이 내용이 된다. <h>태그가 여러개인 경우 가장 먼저 나오는 <h>태그가 제목이 되고 나머지는 내용에 포함된다. 제목이 되는 <h>태그는 <div> 내의 어디에든 올 수 있다. 즉, 나타나는 순서에 관계없이 첫번째 <h>태그가 제목이 되고 나머지 요소는 표시된 순서대로 내용영역에 표시된다. 내용 영역에는 문자열, jQuery Mobile 컴포넌트 등 표현 가능한 모든 것이 올 수 있다.

 

<div data-role="collapsible">

    <h3>Collapsible Title</h3>
    <p>   
        Collapsible Block's Contents
    </p>
</div>

 

블록이 접힌 상태   블록이 열린 상태

 

Collapsible 블록은 기본적으로 접힌 상태에서 표시된다. 펼처진 상태에서 표시되기를 원하면 <div>태그에 속성값 data-collapsed="false" 를 추가한다.

 

 

여러개의 Collapsible 블록을 하나의 그룹 안에서 상호작용하도록 하고 싶으면 동일한 그룹안에 포함시키고자 하는 Collapsible 블록들을 <div data-role="collapsible-set">태그로 감싸주면 된다. 동일한 그룹안의 Collapsible 블록들은 하나의 블록만 펼처질수 있다. 즉, 하나의 블록을 펼치면 다른 블록은 접힌상태로 표시된다.

 

<div data-role="collapsible-set">

    <div data-role="collapsible">

        <h3>Collapsible Title 1</h3>
        <p>   
            Collapsible Block 1's Contents
        </p>
    </div>

    <div data-role="collapsible">

        <h3>Collapsible Title 2</h3>
        <p>   
            Collapsible Block 2's Contents
        </p>
    </div>

</div>

 

두개의 Collapsible 블록이 하나의 그룹으로 묶인 화면

 

처음 표시될 때 특정 블록이 펼처진 상태로 표시되기를 원하면 해당 블록에 data-collapsed="false" 속성을 추가하면 된다.

 

다음 이미지는 동일한 그룹내의 Collapsible 블록 중 하나를 선택한 모습이다.

 

첫번째 Collapsible 블록 선택   두번째 Collapsible 블록 선택

 

 

<div data-role="collapsible">에 사용 가능한 속성

data-* 속성	설명	값
data-collapsed	접힘/펼침 여부	true (default) | false
data-content-theme	컨텐츠 테마	swatch letter (a-z)
data-theme	Collapsible 블록 테마	swatch letter (a-z)

 

<div data-role="collapsible-set">에 사용 가능한 속성

data-* 속성	설명	값
data-content-theme	컨텐츠 테마 일괄 적용	swatch letter (a-z)
data-theme	Collapsible 블록 테마 일괄 적용	swatch letter (a-z)