jQuery를 모바일 목록 아이콘
링크를 포함하는 각리스트 아이템 기본 아이콘은 "carat-r" (우측 화살표). 사용, 다른 아이콘으로 변경하려면 data-icon 수정하려는 목록 항목에 속성을 :
예
<ul data-role="listview">
<li><a href="#">Default is right
arrow</a></li>
<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
<li
data-icon="delete"><a href="#">data-icon="delete"</a></li>
<li
data-icon="location"><a href="#">data-icon="location"</a></li>
<li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>
»그것을 자신을 시도 data-icon="false" 아이콘을 제거합니다.
모든 jQuery를 모바일 단추 아이콘의 완전한 참고로, 우리로 이동하시기 바랍니다 jQuery를 모바일 아이콘 참조 .
16 × 16 아이콘
목록에 표준 16x16px 아이콘을 추가하려면 추가 <img> "UI-리튬 아이콘"의 클래스와 링크 내부 요소 :
예
<ul data-role="listview">
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon" >USA</a></li>
</ul>
»그것을 자신을 시도 jQuery를 모바일 목록 썸네일
16x16px보다 큰 이미지를 들어, 추가 <img> (더 클래스 이름) 첫 번째 자식 요소로 목록 항목 내부 요소를.
jQuery를 모바일 자동으로 이미지를 확장 할 수 80x80px :
정보 목록을 채우기 위해 표준 HTML을 사용하여
예
<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free,
open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>
»그것을 자신을 시도 분할 버튼
수직 분할 막대 분할 목록을 만들려면 내부에 두 개의 링크 배치 <li> 요소를.
jQuery를 모바일 자동 권리 목록의 오른쪽에 제 2 링크를 두어 arrow-icon . 그리고 링크 (있는 경우) 내부의 텍스트가 표시됩니다 때 아이콘을 통해 사용자 가져가 :
예
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some
Text</a>
</li>
</ul>
»그것을 자신을 시도 어떤 페이지와 링크가 더 많은 기능 수 있도록 대화 상자를 추가 할 수 있습니다 :
예
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download"
data-transition="pop" data-icon="gear">Download Browser</a>
</li>
</ul>
<div data-role="page" id="download" data-dialog="true">
»그것을 자신을 시도 거품 카운트
카운트 거품이 같은 사서함에 메시지와 같은 목록 항목과 관련된 숫자를 표시하는 데 사용됩니다
, 카운트 거품을 추가와 같은 인라인 요소를 사용하려면 <span> 클래스와, "ui-li-count" 와 번호를 추가 :
예
<ul data-role="listview">
<li><a href="#">Inbox<span class="ui-li-count" >25</span></a></li>
<li><a href="#">Sent<span class="ui-li-count" >432</span></a></li>
<li><a href="#">Trash<span class="ui-li-count" >7</span></a></li>
</ul>
»그것을 자신을 시도 참고 : 카운트 거품의 정확한 숫자는,이 프로그램을 업데이트해야 표시하려면. 이것은 나중에 장에서 설명한다.
더 예
팝업 목록
어떻게 팝업 목록을 만들 수 있습니다.
축소 목록
숨기고 콘텐츠를 표시 목록을 만드는 방법.
접을 수있는 팝업 목록
어떻게 접을 수있는 팝업 목록을 만들 수 있습니다.
전체 폭 축소 목록
사용하여 data-inset="false" 에 속성을 "collapsibles/collapsible set" 전체 폭리스트 뷰를 활성화합니다.
더 많은 콘텐츠 서식
어떻게 일정을 확인합니다.