jQuery Mobile -listatiedot

jQuery Mobile -listakuva

Lisää suuremmat kuin 16x16px:nen kuvat <img> -elementtiin linkissä.

jQuery Mobile säätää automaattisesti kuvat 80x80px:een:

Esimerkki

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

Kokeile itse

Käytä standardia HTML:ää täyttääksesi tietojen sisältävän listan:

Esimerkki

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome on ilmainen avoimen lähdekoodin web-selain. Julkaistu vuonna 2008.</p>
    </a>
  </li>
</ul>

Kokeile itse

jQuery Mobile -listakuvakkeet

Jos haluat lisätä 16x16px:isen kuvakkeen listaasi, lisää class="ui-li-icon" -ominaisuus <img> -elementtiin:

Esimerkki

<li><a href="#"><img src="us.png" alt="Yhdysvallat" class="ui-li-icon">Yhdysvallat</a></li>

Kokeile itse

Erotteluvalitsin

Jos haluat luoda erottuvan listan, jossa on pystysuuntainen erottelija, aseta kaksi linkkiä <li> -elementtiin.

jQuery Mobile lisää automaattisesti toiseen linkkiin sinisen nuolen kuvakkeen tyylin, ja linkin teksti (jos on) näkyy käyttäjän liikahtaessa kuvakkeen yli:

Esimerkki

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">Jotakin tekstiä</a>
  </li>
</ul>

Kokeile itse

Lisäämällä sivut ja dialogit voit tehdä linkkeistä tehokkaampia:

Esimerkki

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">Lataa selain</a>
  </li>
</ul>

Kokeile itse

Laskuvesipisara

Laskuvesipisara näyttää listakohtaan liittyvän määrän, esimerkiksi sähköpostissa olevat viestit:

Jos haluat lisätä laskuvesipisaraa, käytä sisäistä elementtiä, kuten <span>，aseta class "ui-li-count" -ominaisuus ja lisää numero:

Esimerkki

<ul data-role="listview">
  <li><a href="#">Sähköposti<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Lähetetty<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Roskaposti<span class="ui-li-count">7</span></a></li>
</ul>

Kokeile itse

Huomautus:Jos haluat näyttää oikean numeron laskupallossa, on suoritettava ohjelmallinen päivitys. Tämä käsitellään seuraavassa luvussa.

Lisää esimerkkejä

Muuta listakohteen oletusarvoista linkkikuvaketta
Miten asetetaan eri linkkikuvakkeet listakohteille (oletusarvoinen on oikeaohjaimen nuoli).
Kääntyvä lista
Miten piilotetut ja näkyvät sisältölistat luodaan.
Lisää sisältömuotoja
Miten kalenteri tehdään.