jQuery Mobile Listenansichten
Listenansichten in jQuery Mobile sind Standard-HTML-Listen; bestellt (<ol>) und ungeordnete (<ul>) .
Um eine Liste zu erstellen, gelten die data-role="listview" auf das <ol> oder <ul> Element. Um die Elemente abgreifbar machen, einen Link in jedem Listeneintrag angeben (<li>) :
Beispiel
<ol data-role="listview" >
<li><a href="#">List Item</a></li>
</ol>
<ul data-role="listview" >
<li><a href="#">List Item</a></li>
</ul>
Versuch es selber " Um Ihre Listen mit abgerundeten Ecken und einer gewissen Marge, verwenden Sie die Style - data-inset="true" Attribut:
Standardmäßig Links in ein Listenelement schaltet automatisch in einen Knopf (keine Notwendigkeit für ui-class="btn" oder data-role="button" )
Liste Divider
Liste Teiler verwendet werden, zu organisieren und zu Gruppenelemente in Kategorien / Sektionen.
Um eine Liste Teiler angeben, fügen Sie die data-role="list-divider" Attribut auf ein <li> Element:
Beispiel
<ul data-role="listview">
<li data-role="list-divider" >Europe</li>
<li><a href="#">Norway</a></li>
<li><a href="#">Germany</a></li>
</ul>
Versuch es selber " Wenn Sie eine alphabetisch Liste, (zum Beispiel ein Telefonbuch) jQuery Mobile fügt automatisch die entsprechenden Teiler durch die Daten-autodividers = "true" -Attribut Einstellung auf der <ol> oder <ul> Element:
Beispiel
<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>
Versuch es selber " Die Daten-autodividers = "true" Attribut erzeugt Teiler mit groß geschrieben ersten Buchstaben des Textes der Artikel.
Mehr Beispiele
Read-only - Listen
Wie Listen ohne Links zu erstellen (wird nicht Schaltflächen und nicht abgreifbar sein).
Panels
Wie Panels Listenelemente einzufügen.