jQuery Mobile 목록 뷰

jQuery Mobile 목록 뷰

jQuery Mobile의 목록 뷰는 표준 HTML 목록입니다: 정렬 목록 (<ol>)과 불리스트 (<ul>).

리스트를 생성하려면, <ol> 또는 <ul> 요소에 data-role="listview"를 추가하십시오. 이 항목을 클릭할 수 있도록 하려면, 각 목록 항목(<li>)에 링크를 지정하십시오:

예제

<ol data-role="listview">
  <li><a href="#">목록 항목</a></li>
</ol>
<ul data-role="listview">
  <li><a href="#">목록 항목</a></li>
</ul>

직접 테스트해 보세요

리스트에 둥근 모서리와 마argins를 추가하려면, data-inset="true" 속성을 사용하십시오:

예제

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

직접 테스트해 보세요

푸시:기본적으로, 목록의 항목은 자동으로 버튼으로 변환됩니다(data-role="button" 필요 없음).

리스트 구분자

리스트 구분자(리스트 구분자)는 항목을 조직하고 분류/섹션으로 조합하는 데 사용됩니다.

리스트 구분자를 지정하려면, <li> 요소에 data-role="list-divider" 속성을 추가하십시오:

예제

<ul data-role="listview">
 <li data-role="list-divider">유럽</li>
  <li><a href="#">프랑스</a></li>
  <li><a href="#">독일</a></li>
</ul>

직접 테스트해 보세요

리스트가 알파벳 순으로 정렬되어 있다면(예: 전화簿), jQuery Mobile가 적절한 구분자를 자동으로 추가합니다. <ol> 또는 <ul> 요소에 data-autodividers="true" 속성을 설정하여:

예제

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Adam</a></li>
  <li><a href="#">Angela</a></li>
  <li><a href="#">Bill</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>

직접 테스트해 보세요

푸시:data-autodividers="true" 속성은 목록 항목 텍스트의 첫 글자를 대문자로 변환하여 구분자를 생성합니다.

검색 필터

리스트에 검색 상자를 추가하려면, data-filter="true" 속성을 사용하십시오:

예제

<ul data-role="listview" data-filter="true"</ul>

직접 테스트해 보세요

기본적으로, 검색 상자의 텍스트는 "Filter items..."입니다.

기본 텍스트를 변경하려면 data-filter-placeholder 속성을 사용하십시오:

예제

<ul data-role="listview" data-filter="true" data-filter-placeholder="검색 이름">

직접 테스트해 보세요

更多 예제

읽기 전용 목록
링크가 없는 목록을 만드는 방법(버튼이 아님, 클릭할 수 없음).