jQuery Mobile listevisning

jQuery Mobile listevisning

Listevisninger i jQuery Mobile er standard HTML-lister: ordnet liste (<ol>) og uordnet liste (<ul>).

For at oprette en liste, tilføj egenskaben data-role="listview" til <ol> eller <ul>-elementet. For at gøre disse elementer klikbare, angiv et link i hver listeemne (<li>):

Eksempel

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

Prøv selv

Hvis du vil tilføje runde kanter og marginer til listen, brug egenskaben data-inset="true":

Eksempel

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

Prøv selv

Tip:Standardmæssigt konverteres listenemner automatisk til knapper (uden at kræve data-role="button").

Listeskilletegn

Listeskilletegn (List Dividers) bruges til at organisere og gruppere elementer i kategorier/afsnit.

Hvis du vil definere liste-skilletegn, tilføj egenskaben data-role="list-divider" til <li>-elementet:

Eksempel

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

Prøv selv

Hvis din liste er alfabetisk sorteret (f.eks. adressebog), tilføjer jQuery Mobile automatisk passende skilletegn ved at sætte egenskaben data-autodividers="true" på <ol> eller <ul>-elementet:

Eksempel

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

Prøv selv

Tip:data-autodividers="true"-egenskaben opretter skilletegn ved at konvertere den første bogstav i listen til store bogstaver.

Søgefilter

Hvis du vil tilføje en søgefelt i listen, brug egenskaben data-filter="true":

Eksempel

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

Prøv selv

Standardmæssigt er teksten i søgefeltet "Filter items...".

Hvis du vil ændre standardteksten, skal du bruge data-filter-placeholder-egenskaben:

Eksempel

<ul data-role="listview" data-filter="true" data-filter-placeholder="Søg efter navn">

Prøv selv

Flere eksempler

Læsevis liste
Hvordan man opretter en liste uden links (ikke knapper, kan ikke klikkes).