jQuery Mobile - Theming Lists(리스트에 테마적용하기)

기본 스타일의 리스트의 디폴트 테마는 구분자는 b 테마로, 리스트 항목은 c 테마 입니다.

<ul data-role="listview" data-inset="true">

             <li data-role="list-divider">Divider</li>

             <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>

             <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>

             <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>

</ul>

리스트의 테마를 셋팅하기 위해서는 리스트에 data-theme 속성을 사용합니다.

<ul data-role="listview" data-inset="true" data-theme="d">

             <li data-role="list-divider">Divider</li>

             <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>

             <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>

             <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>

</ul>

 

리스트의 특정 항목에 테마를 적용하기 위해서는 항목 태그에 data-theme 속성을 사용하면 됩니다.

<ul data-role="listview" data-inset="true" data-theme="d">

             <li data-role="list-divider">Divider</li>

             <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>

             <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>

             <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>

             <li data-theme="a">Trash <span class="ui-li-count">34</span></a></li>

</ul>

 

Theming dividers

리스트 구분자에만 테마를 변경하고자 할 경우에는 data-divider-theme 속성을 사용합니다.

<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e">

             <li data-role="list-divider">Divider</li>

             <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>

             <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>

             <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>

</ul>

 

리스트의 카운트 수에 테마를 변경하고자 할 경우에는 data-count-theme 속성을 사용합니다.

<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">

             <li data-role="list-divider">Divider</li>

             <li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>

             <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>

             <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>

</ul>

 

Theming icons

리스트의 아이콘은 기본적으로 arrow-r로 셋팅 됩니다. 다른 아이콘을 사용하기 위해서는 data-icon속성을 사용합니다. 만약, 아이콘을 사용하지 않을 경우에는 data-icon 속성의 값을 false로 주면 아이콘이 나타나지 않습니다.

<ul data-role="listview" data-inset="true">

             <li data-role="list-divider">Divider</li>

             <li data-icon="info"><a href="#">Notices</a></li>

             <li data-icon="alert"><a href="#">Alerts</a></li>

             <li data-icon="false"><a href="#">No icon</a></li>

</ul>

 

Theming split buttons

Split list(분할 리스트)에서 두번째 버튼은 디폴트로 b테마를 사용하게 됩니다. 이를 변경하기 위해서는 data-split-theme 속성을 사용합니다. 개별 항목별로 변경하고 싶은 경우에는 개별 split(예:버튼으로 변형되는 a태그)에 data-theme 속성을 추가하여 사용합니다.

<ul data-role="listview" data-inset="true" data-split-theme="a">

             <li><a href="index.html">

                           <img src="images/album-bb.jpg" />

                           <h3>Broken Bells</h3>

                           <p>Broken Bells</p>

                           </a>

                           <a href="index.html">Purchase album</a>

             </li>

             <li><a href="index.html">

                           <img src="images/album-hc.jpg" />

                           <h3>Warning</h3>

                           <p>Hot Chip</p>

                           </a>

                           <a href="index.html" data-theme="e">Purchase album</a>

             </li>

</ul>

 

split list에 data-icon속성을 사용하여 아이콘을 변경하는 것도 가능합니다.

<ul data-role="listview" data-inset="true" data-split-theme="d" data-split-icon="delete" >

             <li><a href="index.html">

                           <img src="images/album-bb.jpg" />

                           <h3>Broken Bells</h3>

                           <p>Broken Bells</p>

                           </a>

                           <a href="index.html">Purchase album</a>

             </li>

             <li><a href="index.html">

                           <img src="images/album-hc.jpg" />

                           <h3>Warning</h3>

                           <p>Hot Chip</p>

                           </a>

                           <a href="index.html">Purchase album</a>

             </li>

</ul>