최신 웹 개발 튜토리얼
 

jQuery Mobile목록보기



jQuery를 모바일 목록보기

jQuery를 모바일에서 목록보기는 표준 HTML의 목록입니다; 주문 (<ol>) 및 정렬되지 않은 (<ul>) .

목록을 만들려면 적용 data-role="listview" 받는 <ol> 또는 <ul> 요소를. 각 목록 항목 내부 링크 지정 항목이 tappable 만들려면 (<li>) :

<ol data-role="listview" >
  <li><a href="#">List Item</a></li>
</ol>

<ul data-role="listview" >
  <li><a href="#">List Item</a></li>
</ul>
»그것을 자신을 시도

둥근 모서리와 약간의 여유와 목록 스타일을 위해 사용하는 data-inset="true" 속성을 :

<ul data-role="listview" data-inset="true" >
»그것을 자신을 시도

기본적으로 목록 항목 내부 링크는 자동으로 버튼 (대한 필요로 바뀝니다 ui-class="btn" 또는 data-role="button" )


목록 분배기

목록 분배기 카테고리 / 섹션으로 항목을 구성하고 그룹하는 데 사용됩니다.

목록 디바이더를 지정하려면 추가 data-role="list-divider" 에 속성을 <li> 요소 :

<ul data-role="listview">
  <li data-role="list-divider" >Europe</li>
  <li><a href="#">Norway</a></li>
  <li><a href="#">Germany</a></li>
</ul>
»그것을 자신을 시도

당신이 알파벳 순으로 목록이있는 경우 (예 : 전화 번호부에 대한) jQuery를 모바일 자동으로의 데이터 autodividers = "true"로 속성을 설정하여 적절한 분할을 추가 <ol> 또는 <ul> 요소를 :

<ul data-role="listview" data-autodividers="true" >
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>
»그것을 자신을 시도

데이터-autodividers = "true"로 속성은 항목의 텍스트를 대문자로 첫 글자와 디바이더를 작성합니다.


예

더 예

읽기 전용 목록을
링크없이 목록을 만드는 방법 (버튼 수 없습니다 및 tappable되지 않습니다).

패널
어떻게 목록 항목에 패널을 삽입합니다.