jQuery Mobile List View

jQuery Mobile List View

jQuery Mobile'daki liste görünümü standart HTML listesidir: sıralı liste (<ol>) ve sırasız liste (<ul>).

Liste oluşturmak için <ol> veya <ul> öğelerine data-role="listview" ekleyin. Bu öğeleri tıklanabilir hale getirmek için her listeleme öğesine (li) bir bağlantı tanımlayın:

Örnek

<ol data-role="listview">
  <li><a href="#">Listeleme Öğesi</a></li>
</ol>
<ul data-role="listview">
  <li><a href="#">Listeleme Öğesi</a></li>
</ul>

Kişisel Olarak Deneyin

Listeye yuvarlak köşe ve kenar boşluğu eklemek için data-inset="true" özelliğini kullanın:

Örnek

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

Kişisel Olarak Deneyin

İpucu:Varsayılan olarak, listedeki listeleme öğeleri otomatik olarak düğmelere dönüştürülür (data-role="button" gerekmez).

Listeleme Ayraçları

Listeleme ayraçları (List Dividers), projeleri kategorilere/ölçülere organize etmek ve birleştirmek için kullanılır.

Listeleme ayraçlarını belirlemek için <li> öğesine data-role="list-divider" özelliği ekleyin:

Örnek

<ul data-role="listview">
 <li data-role="list-divider">Avrupa</li>
  <li><a href="#">Fransa</a></li>
  <li><a href="#">Almanya</a></li>
</ul>

Kişisel Olarak Deneyin

Listeniz harf sırasına göre ise (örneğin, telefon rehberi), jQuery Mobile otomatik olarak uygun ayraç ekler, <ol> veya <ul> öğelerine data-autodividers="true" özelliği ekleyerek:

Örnek

<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>

Kişisel Olarak Deneyin

İpucu:data-autodividers="true" özelliği, listeleme öğesi metninin ilk harflerini büyük harfe çevirerek ayraç oluşturur.

Arama Filtresi

Listede arama çubuğu eklemek istiyorsanız, data-filter="true" özelliğini kullanın:

Örnek

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

Kişisel Olarak Deneyin

Varsayılan olarak, arama çubuğundaki metin "Filter items..."tir.

Öntanımlı metni değiştirmek için data-filter-placeholder özelliğini kullanın:

Örnek

<ul data-role="listview" data-filter="true"> data-filter-placeholder="Arama Adı">

Kişisel Olarak Deneyin

Daha Fazla Örnek

Salt Okunabilir Liste
Bağlantılı olmayan bir liste nasıl oluşturulur (düğme değil, tıklanamaz).