jQuery Mobile Lijstinhoud

jQuery Mobile lijstminiatuur

Voor afbeeldingen groter dan 16x16px, voeg een <img>-element toe aan de link.

jQuery Mobile past automatisch afbeeldingen aan tot 80x80px:

Voorbeeld

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

Probeer het zelf uit

Gebruik standaard HTML om informatie-rijen te vullen:

Voorbeeld

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome, een gratis open-source webbrowser. Uitgegeven in 2008.</p>
    </a>
  </li>
</ul>

Probeer het zelf uit

jQuery Mobile lijstpictogram

Om een 16x16px pictogram toe te voegen aan uw lijst, voeg de class "ui-li-icon" toe aan het <img>-element:

Voorbeeld

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

Probeer het zelf uit

Splitsknop

Om een gesplitst lijst met een verticale scheidingsbalk te maken, plaats twee links in het <li>-element.

jQuery Mobile voegt automatisch een blauwe pijlpijlstijl toe aan de tweede link, de tekst in de link (indien aanwezig) wordt weergegeven wanneer de gebruiker de pijlpijl raakt:

Voorbeeld

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

Probeer het zelf uit

Door pagina's en dialogen toe te voegen, wordt de functie van links sterker:

Voorbeeld

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

Probeer het zelf uit

Tellerballon

Tellerballons worden gebruikt om het aantal gerelateerd aan een lijstitem weer te geven, bijvoorbeeld berichten in een e-mail:

Om een tellerballon toe te voegen, gebruik een inline-element, zoals <span>, en stel de class "ui-li-count" in en voeg het getal toe:

Voorbeeld

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Verzonden<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Afval<span class="ui-li-count">7</span></a></li>
</ul>

Probeer het zelf uit

Opmerking:Om de juiste cijfers in de tellerstand te tonen, moet er programmatig worden bijgewerkt. We zullen dit in het volgende hoofdstuk uitleggen.

Meer voorbeelden

Wijzig het standaard link pictogram van lijstitems
Hoe verschillende link pictogrammen voor lijstitems in te stellen (de rechter pijl is standaard).
Klapbare lijst
Hoe een lijst van verborgen en zichtbare inhoud te maken.
Meer inhoudsformaten
Hoe een kalender te maken.