Ultimele tutoriale de dezvoltare web
 

jQuery Mobile Vizualizați listele



jQuery Listă Mobile Vizualizări

vizualizări listă în jQuery Mobile sunt liste HTML standard; ordonat (<ol>) și unordered (<ul>) .

Pentru a crea o listă, aplicați data-role="listview" de <ol> <ul> data-role="listview" la <ol> sau <ul> element. Pentru a face elementele tappable, specificați un link în interiorul fiecărui element din listă (<li>) :

Exemplu

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

<ul data-role="listview" >
  <li><a href="#">List Item</a></li>
</ul>
Încearcă - l singur »

Pentru stilul listele cu colțuri rotunjite și o marjă, folosiți data-inset="true" atribut:

Exemplu

<ul data-role="listview" data-inset="true" >
Încearcă - l singur »

În mod implicit, link - uri în interiorul unui element de listă se va transforma automat într - un buton (no need for ui-class="btn" or data-role="button" ) este (no need for ui-class="btn" or data-role="button" )


Divizoare Listă

separatoare Lista sunt utilizate pentru a organiza și grupa obiecte în categorii / sectiuni.

Pentru a specifica o listă divizor, adăugați data-role="list-divider" de <li> data-role="list-divider" atributul unui <li> Element:

Exemplu

<ul data-role="listview">
  <li data-role="list-divider" >Europe</li>
  <li><a href="#">Norway</a></li>
  <li><a href="#">Germany</a></li>
</ul>
Încearcă - l singur »

Dacă aveți o listă în ordine alfabetică, (for example a phone book) , data-autodividers="true" <ol> <ul> (for example a phone book) de (for example a phone book) jQuery Mobile adaugă automat separatoare adecvate prin setarea de data-autodividers="true" , atributul pe <ol> sau <ul> elementului:

Exemplu

<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>
Încearcă - l singur »

data-autodividers="true" atributul creează separatoare cu primele litere uppercased textului articolului.


Exemple

Mai multe exemple

Read-only liste
Cum de a crea liste fără link - uri (will not be buttons and not tappable) .

panouri
Cum se introduce panouri pentru elementele de listă.