jQuery Mobile listinnehåll

jQuery Mobile-listminiatyrer

För bilder större än 16x16px, lägg till <img>-element i länken.

jQuery Mobile justerar automatiskt bilderna till 80x80px:

Exempel

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

Prova själv

Använd standard HTML för att fylla i listor med information:

Exempel

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome är en gratis öppen källkods webbläsare. Publicerad 2008.</p>
    </a>
  </li>
</ul>

Prova själv

jQuery Mobile-listikoner

Om du vill lägga till en ikon på 16x16px till din lista, lägg till class="ui-li-icon"-egenskapen till <img>-elementet:

Exempel

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

Prova själv

Dela knappar

Om du vill skapa en delad lista med vertikala skiljelinjer, placera två länkar inom <li>-elementet.

jQuery Mobile lägger automatiskt till en blå pilarikong till den andra länken, och texten i länken (om det finns) visas när användaren rör vid ikonen:

Exempel

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

Prova själv

Genom att lägga till sidor och dialoger kan du göra länkar mer kraftfulla:

Exempel

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">Ladda ner webbläsare</a>
  </li>
</ul>

Prova själv

Antalsskum

Antalsskum används för att visa antalet relaterade till listobjekt, till exempel meddelanden i en e-postlåda:

Om du vill lägga till ett antalsskum, använd en inline-element, till exempel <span> och sätt class "ui-li-count"-egenskapen och lägg till ett nummer:

Exempel

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Sänd<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Skräp<span class="ui-li-count">7</span></a></li>
</ul>

Prova själv

Kommentar:För att visa korrekt nummer i räknebubblan måste det göras programmatisk uppdatering. Vi kommer att förklara detta i nästa kapitel.

Mer exempel

Ändra standardlänkarikonen för listobjekt
Hur man ställer in olika länkarikoner för listobjekt (högerpil är standard).
Fällbar lista
Hur man skapar en lista för att dölja och visa innehåll.
Mer innehållsformat
Hur man gör en kalender.