jQuery Mobile luettelo

jQuery Mobile luettelo

jQuery Mobile -listanäkymä on standardeja HTML-listoja: järjestetyt listat (<ol>) ja epäjärjestetyt listat (<ul>).

Jos haluat luoda listan, lisää data-role="listview" ominaisuus <ol> tai <ul>-elementtiin. Jos haluat tehdä näistä kohteista klikattavia, määritä linkki jokaiselle listakohdalle (<li>):

Esimerkki

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

Kokeile itse

Jos haluat lisätä listaan pyöristettyjä reunia ja marginaaleja, käytä data-inset="true" ominaisuutta:

Esimerkki

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

Kokeile itse

Vinkki:Oletuksena, listan kohteet muunnetaan automaattisesti painikkeiksi (ei tarvita data-role="button").

Listan erottimet

Listan erottimet (List Dividers) järjestävät ja yhdistävät kohteita luokkoihin/kohtiin.

Jos haluat määrittää listan erottimet, lisää data-role="list-divider" ominaisuus <li>-elementtiin:

Esimerkki

<ul data-role="listview">
 <li data-role="list-divider">Eurooppa</li>
  <li><a href="#">Ranska</a></li>
  <li><a href="#">Saksa</a></li>
</ul>

Kokeile itse

Jos lista on aakkosjärjestyksessä (esim. yhteystiedot), jQuery Mobile lisää sopivat erottimet automaattisesti asettamalla data-autodividers="true" ominaisuuden <ol> tai <ul>-elementtiin:

Esimerkki

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

Kokeile itse

Vinkki:data-autodividers="true" ominaisuus luo erottimet listan kohtien ensimmäisten kirjainten isolla kirjaimella.

Hakufilteri

Jos haluat lisätä hakukentän listaan, käytä data-filter="true"-ominaisuutta:

Esimerkki

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

Kokeile itse

Oletuksena, hakukenttään kirjoitettu teksti on "Filter items..."。

Jos haluat muuttaa oletusarvoista tekstiä, käytä data-filter-placeholder-ominaisuutta:

Esimerkki

<ul data-role="listview" data-filter="true" data-filter-placeholder="etsi nimeä">

Kokeile itse

Lisää esimerkkejä

Lukusalainen luettelo
Miten luoda luettelo ilman linkkejä (ei painiketta, ei klikattavaa).