jQuery Mobile ListView

jQuery Mobile ListView

De lijstweergave in jQuery Mobile is een standaard HTML-lijst: genummerde lijsten (<ol>) en ongenummerde lijsten (<ul>).

Om een lijst te maken, voeg de eigenschap data-role="listview" toe aan de <ol> of <ul> elementen. Om deze items klikbaar te maken, stel een link in voor elke lijstitem (<li>):

Example

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

Try It Yourself

Als u een lijst wilt toevoegen met ronde hoeken en marges, gebruik dan de eigenschap data-inset="true":

Example

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

Try It Yourself

Tip:Standaard worden lijstitems in de lijst automatisch omgezet in knoppen (zonder data-role="button" nodig).

Lijstafbreekstrepen

Lijstafbreekstrepen (List Dividers) worden gebruikt om items te organiseren en te combineren in categoriën/secties.

Als u lijstafbreekstrepen wilt instellen, voeg dan de eigenschap data-role="list-divider" toe aan het <li> element:

Example

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

Try It Yourself

Als uw lijst in alfabetische volgorde is (bijvoorbeeld een telefoonboek), voegt jQuery Mobile automatisch de juiste afbreekstrepen toe door de eigenschap data-autodividers="true" op te zetten op de <ol> of <ul> elementen:

Example

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

Try It Yourself

Tip:De eigenschap data-autodividers="true" maakt afbreekstrepen door de eerste letters van de lijstitemtekst te kapitaliseren.

Zoekfilter

Als u een zoekbalk wilt toevoegen aan de lijst, gebruik dan de eigenschap data-filter="true":

Example

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

Try It Yourself

Standaard is de tekst in het zoekvak "Filter items...".

Om de standaardtekst te wijzigen, gebruik dan de data-filter-placeholder-eigenschap:

Example

<ul data-role="listview" data-filter="true" data-filter-placeholder="Zoek naam">

Try It Yourself

More Examples

Read-only List
How to create a list without links (not buttons, not clickable).