JQuery Mobile - collapsible 과 테마롤러

모바일 환경은 아무래도 화면의 표시에 제약이 많이 따르므로, 이를 고려한 아이템들이 많은 것 같다. collapsible widget 의 경우도 이를 위한 아이템인 것 같다. data-role="collapsible" 을 주게 되면, 하위에 있는 아이템들을 펴서 보이게 하거나, 접어서 감추거나 하는 동작을 구현할 수 있다. 또한 data-role="collapsible-set" 을 주게 되면, 하위에 여러 개로 정의된 data-role="collapsible" 를 가지는 아이템 중에 하나만 펼치는 동작을 구현할 수 있게 된다.

작성한 예제는 링크해 둔다.

http://moonyl.rf.gd/collapsible_test.html

테마롤러라는 사이트를 접속해서 테마를 좀 더 쉽게 디자인할 수 있다. 사이트 링크를 연결해둔다.

http://themeroller.jquerymobile.com/

상단에 color palette 가 있어서 이것을 드래그앤드랍을 해주면 각 테마의 아이템 배경을 설정할 수 있다. 좌측에는 아이템별로 세분화해서 palette 에서 불가능한 부분까지도 설정을 할 수 있다. 설정 작업이 마무리되었으면 상단의 download 버튼을 누르게 되면 zip 파일 형태로 다운로드 받을 수 있다.

압축을 풀어서 작업디렉토리에 복사해주고, link 작업을 해줘야 한다.

<link rel="stylesheet" href="themes/myfirst.css" />

<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

상단의 세 줄이 기존의 JQuery Mobile 사용시에 link 작업을 해줘야 했던 부분에서 변경되는 부분이다.

앞에서 만들어놓은 예제에서 테마를 적용해서 링크해 둔다.

http://moonyl.rf.gd/theme_test.html