jQuery Mobile listeindhold

jQuery Mobile listeminiaturer

For billeder større end 16x16px, skal du tilføje <img>-element i linket.

jQuery Mobile justerer automatisk billeder til 80x80px:

Eksempel

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

Prøv det selv

Brug standard HTML til at fylde informationer i listen:

Eksempel

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome er en gratis open source webbrowser. Udgivet i 2008.</p>
    </a>
  </li>
</ul>

Prøv det selv

jQuery Mobile listeikoner

Hvis du vil tilføje en 16x16px ikon til din liste, skal du tilføje class="ui-li-icon" egenskab til <img>-elementet:

Eksempel

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

Prøv det selv

Opdelt knap

Hvis du vil oprette en opdelt liste med en lodret skillelinje, skal du placere to links i <li>-elementet.

jQuery Mobile tilføjer automatisk en blå pileikonstil til den anden link, og teksten (hvis nogen) vises, når brugeren skifter til ikonet:

Eksempel

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

Prøv det selv

Ved at tilføje sider og dialoger kan du gøre links mere funktionelle:

Eksempel

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

Prøv det selv

Tællerboble

Tællerbobler bruges til at vise antallet relateret til en listeemne, f.eks. beskeder i en e-mail:

Hvis du vil tilføje en tællerboble, skal du bruge en inline-element, såsom <span> og sæt class "ui-li-count" egenskab og tilføj et nummer:

Eksempel

<ul data-role="listview">
  <li><a href="#">Indbakke<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Sendt<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Søgeaffald<span class="ui-li-count">7</span></a></li>
</ul>

Prøv det selv

Bemærk:For at vise det korrekte nummer i antal bobler, skal der foretages en programmeret opdatering. Vi vil forklare dette i det næste kapitel.

Flere eksempler

Ændring af standard link ikon for listeemner
Sådan sættes forskellige link ikoner til listeemner (højre pil er standard).
Fleksibel liste
Sådan opretter du en liste over skjulte og synlige indhold.
Flere indhold former
Sådan laver du en kalender.