jQuery Mobile lista vy

jQuery Mobile lista vy

Listvyer i jQuery Mobile är standard HTML-listor: ordnat listor (<ol>) och oordnade listor (<ul>).

För att skapa en lista, lägg till egenskapen data-role="listview" till <ol> eller <ul>-elementen. För att göra dessa objekt klickbara, specificera en länk i varje listobjekt (<li>):

Exempel

<ol data-role="listview">
  <li><a href="#">Listobjekt</a></li>
</ol>
<ul data-role="listview">
  <li><a href="#">Listobjekt</a></li>
</ul>

Prova själv

Om du vill lägga till rundade hörn och marginaler till listan, använd egenskapen data-inset="true":

Exempel

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

Prova själv

Tips:Som standard konverteras listobjekten automatiskt till knappar (utan behov av data-role="button").

Listavdelare

Listavdelare (List Dividers) används för att organisera och kombinera poster i kategorier/avsnitt.

Om du vill definiera listavdelare, lägg till egenskapen data-role="list-divider" till <li>-elementen:

Exempel

<ul data-role="listview">
 <li data-role="list-divider">Europa</li>
  <li><a href="#">Frankrike</a></li>
  <li><a href="#">Tyskland</a></li>
</ul>

Prova själv

Om din lista är i alfabetisk ordning (t.ex. adressbok), lägger jQuery Mobile automatiskt till lämpliga avdelare genom att sätta egenskapen data-autodividers="true" på <ol> eller <ul>-elementen:

Exempel

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

Prova själv

Tips:Egenskapen data-autodividers="true" skapar avdelare genom att göra första bokstaven i listobjekten till versal.

Sökfilter

Om du vill lägga till en sökfält i listan, använd egenskapen data-filter="true":

Exempel

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

Prova själv

Som standard är texten i sökfältet "Filter items...".

För att ändra standardtexten, använd data-filter-placeholder-attributet:

Exempel

<ul data-role="listview" data-filter="true" data-filter-placeholder="Sök namn">

Prova själv

Mer exempel

Läsbar lista
Hur man skapar en lista utan länkar (inte knappar, inte klickbar).