En son web geliştirme öğreticiler
 

jQuery Mobile Liste Görünümleri



jQuery Mobile Liste Görüntüleme

jQuery Mobile Liste görünümleri standart HTML listeleri; sipariş (<ol>) ve sırasız (<ul>) .

Bir liste oluşturmak için, geçerli data-role="listview" için <ol> veya <ul> elemanı. Her liste öğesi içinde bir bağlantı tanımlamak, ürün tappable yapmak için (<li>) :

Örnek

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

<ul data-role="listview" >
  <li><a href="#">List Item</a></li>
</ul>
Kendin dene "

Yuvarlatılmış köşeler ve bazı farkla listelerinizi şekillendirmek için, kullanmak data-inset="true" niteliği:

Örnek

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

Varsayılan olarak, bir liste öğesinin içindeki bağlantıları otomatik bir düğme dönüşecek (no need for ui-class="btn" or data-role="button" )


Liste Bölücüler

Liste bölücüler kategoriler / bölüme öğeleri düzenlemek ve grup için kullanılır.

Bir liste ayırıcı belirtmek için, eklemek data-role="list-divider" bir varlığyla <li> elemanı:

Örnek

<ul data-role="listview">
  <li data-role="list-divider" >Europe</li>
  <li><a href="#">Norway</a></li>
  <li><a href="#">Germany</a></li>
</ul>
Kendin dene "

Bir alfabetik listesi varsa, (for example a phone book) jQuery Mobile otomatik ayarlayarak uygun bölücüler ekleyen data-autodividers="true" özniteliği <ol> veya <ul> elemanı:

Örnek

<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>
Kendin dene "

data-autodividers="true" öznitelik öğesinin metninin Büyük harfli ilk harflerle bölücüler oluşturur.


Örnekler

Diğer Örnekler

Salt okunur listeleri
Linkleri olmadan listeleri oluşturmak için nasıl (will not be buttons and not tappable) .

Paneller
Nasıl liste öğelerine panelleri eklemek için.