jQuery Mobile Liste Simgeler
Bir bağlantı içeren her liste öğesi için varsayılan simgedir "carat-r" (sağ ok). Kullanmak, başka simgeye Bunu değiştirmek için data-icon değiştirmek istediğiniz liste öğesinin üzerine niteliğini:
Örnek
<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>
Kendin dene " data-icon="false" simgesi kaldıracaktır.
Tüm jQuery Mobile düğme simgeleri tam bir referans için lütfen gidin lütfen jQuery Mobile Simgeler Referans .
16x16 Simgeler
Listenize bir standart 16x16px simgesi eklemek için, bir ekleme <img> bir sınıf ile bağlantı içindeki elemanı "ui-li-icon" :
Örnek
<ul data-role="listview">
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon" >USA</a></li>
</ul>
Kendin dene " jQuery Mobile Liste Minyatür
16x16px daha büyük görüntüler için, bir ekleme <img> ilk alt öğesi olarak bir liste öğesinin içine elemanı (with no class name) .
jQuery Mobile otomatik şekilde ölçeklendirilir 80x80px :
bilgilerle listesini doldurmak için standart HTML kullanın:
Örnek
<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>
Kendin dene " bölünmüş Düğmeler
Dikey bölücü bar ile bölünmüş listesi oluşturmak için, içinde iki bağlantıları yerleştirmek <li> elemanı.
jQuery Mobile otomatik bir hak ile listenin sağ tarafındaki ikinci bağlantıyı yerleştirir arrow-icon . Ve bağlantı içindeki metin (if any) gösterilir zaman simgenin üzerine bir kullanıcı vurgulu:
Örnek
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some
Text</a>
</li>
</ul>
Kendin dene " Bazı sayfaları ve bağlantıları daha işlevsel hale getirmek için diyaloglar ekleyelim:
Örnek
<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">
Kendin dene " Bubbles Kont
Sayım kabarcıklar, örneğin bir posta kutusu iletiler olarak liste öğeleri ile ilişkili numaralarını görüntülemek için kullanılır:
, Sayım kabarcıkları eklemek gibi bir satır içi elemanı, kullanmak için <span> class ile, "ui-li-count" ve bir sayı ekleyin:
Örnek
<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>
Kendin dene " Not: Bir sayma balonunda doğru numarayı, programlı güncellenmelidir göstermek için. Bu daha sonraki bir bölümde açıklanacaktır.
Diğer Örnekler
Popup listeleri
Nasıl bir pop-up listesi oluşturmak için.
Katlanır listeleri
gizlemek ve içeriğini göstermek listeleri oluşturmak için nasıl.
Katlanır açılan listeleri
Nasıl daraltılabilir bir pop-up listesi oluşturmak için.
Tam genişlikte katlanabilir listeleri
Kullanarak data-inset="false" özniteliği "collapsibles/collapsible set" tam genişlik liste görünümü sağlamak için.
Daha içerik biçimlendirme
Takvim nasıl yapmak.