jQuery Listă mobile Icoane
Pictograma implicită pentru fiecare element din listă care conține un link este "carat-r" (săgeata dreapta). Pentru a schimba acest lucru la o altă pictogramă, utilizați data-icon atributului de pe elementul din listă pe care doriți să modificați:
Exemplu
<ul data-role="listview">
<li><a href="#">Default is right
arrow</a></li>
<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
<li
data-icon="delete"><a href="#">data-icon="delete"</a></li>
<li
data-icon="location"><a href="#">data-icon="location"</a></li>
<li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>
Încearcă - l singur » data-icon="false" va elimina pictograma.
Pentru o referință completă a tuturor butoanelor pictogramele jQuery Mobile, vă rugăm să mergeți la noastre jQuery Icoane mobile de referință .
16x16 Icoane
Pentru a adăuga o pictogramă standard 16x16px la listă, adaugă un <img> elementul din interiorul legăturii cu o clasă de "ui-li-icon" :
Exemplu
<ul data-role="listview">
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon" >USA</a></li>
</ul>
Încearcă - l singur » jQuery Listă Mobile Miniaturi
Pentru imagini mai mari decât 16x16px, adăugați un <img> elementul în interiorul unui element de listă ca primul element de copil (with no class name) un (with no class name) de (with no class name) .
jQuery Mobile va scala automat imaginea la 80x80px :
Exemplu
<ul data-role="listview">
<li><a href="#"><img src="chrome.png"></a></li>
</ul>
Încearcă - l singur » Utilizați HTML standard pentru a umple lista cu informații:
Exemplu
<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free,
open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>
Încearcă - l singur » Butoane split,
Pentru a crea o listă împărțită cu un bar divizor vertical, plasați două legături în interiorul <li> element.
jQuery Mobile va plasa automat al doilea link de pe partea dreaptă a listei cu drept arrow-icon . Iar textul din interiorul link - ul (if any) este (if any) va fi afișat atunci când un utilizator Hover peste pictograma:
Exemplu
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some
Text</a>
</li>
</ul>
Încearcă - l singur » Permite adăuga unele pagini și dialoguri pentru a face link-urile de mai funcționale:
Exemplu
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download"
data-transition="pop" data-icon="gear">Download Browser</a>
</li>
</ul>
<div data-role="page" id="download" data-dialog="true">
Încearcă - l singur » Count Bubbles
bule Count sunt utilizate pentru a afișa numere asociate cu elemente de listă, cum ar fi mesajele dintr-o cutie poștală:
Pentru a adăuga bule conta, utilizați un element de linie, cum ar fi <span> , cu clasa "ui-li-count" și se adaugă un număr:
Exemplu
<ul data-role="listview">
<li><a href="#">Inbox<span class="ui-li-count" >25</span></a></li>
<li><a href="#">Sent<span class="ui-li-count" >432</span></a></li>
<li><a href="#">Trash<span class="ui-li-count" >7</span></a></li>
</ul>
Încearcă - l singur » Notă: Pentru a afișa numărul corect într - un balon numărului, acesta trebuie să fie actualizate în mod programatic. Acest lucru va fi explicat într-un capitol ulterior.
Mai multe exemple
liste Popup
Cum de a crea o listă pop-up.
listele pliabili
Cum de a crea liste care ascund și a afișa conținutul.
Liste pop - up pliabili
Cum de a crea o listă pop-up pliabil.
Lățime completă liste pliabile
Utilizarea data-inset="false" atribut "collapsibles/collapsible set" , pentru a permite o lățime ListView completă.
Mai multe formatare conținut
Cum sa faci un calendar.