jQuery Mobile List İçeriği

jQuery Mobile listesi özet resimleri

16x16px'den büyük resimler için bağlantıya <img> ögesi ekleyin.

jQuery Mobile, resimleri otomatik olarak 80x80px'ye ayarlar:

Örnek

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

Kişisel olarak deneyin

Bilgi içeren listeleri 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, ücretsiz açık kaynaklı web tarayıcısı. 2008 yılında yayınlandı.</p>
    </a>
  </li>
</ul>

Kişisel olarak deneyin

jQuery Mobile listesi simgeleri

Listeye 16x16px'lik bir simge eklemek için <img> ögesine class="ui-li-icon" özelliğini ekleyin:

Örnek

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

Kişisel olarak deneyin

Bölünmüş düğme

Dikey ayraçlı bölünmüş listeler oluşturmak için <li> ögesi içinde iki bağlantı yerleştirin.

jQuery Mobile, ikinci bağlantıya mavi ok ikonunu eklemek için otomatik olarak tarz ekler, kullanıcı ikonun üzerine dokunduğunda bağlantıdaki metin (varsa) görüntülenir:

Örnek

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

Kişisel olarak deneyin

Sayfa ve diyalog ekleyerek bağlantı işlevselliğini artırabilirsiniz:

Örnek

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">Tarayıcıyı İndir</a>
  </li>
</ul>

Kişisel olarak deneyin

Sayısal köpük

Sayısal köpük, örneğin e-posta kutusundaki mesajlarla ilgili sayıları göstermek için kullanılır:

Sayısal köpük eklemek için satır içi element kullanın, örneğin <span> ve class "ui-li-count" özelliğini ayarlayın, numarayı ekleyin:

Örnek

<ul data-role="listview">
  <li><a href="#">Gelen Kutusu<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Gönderilmiş<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Çöp<span class="ui-li-count">7</span></a></li>
</ul>

Kişisel olarak deneyin

Not:Hesap balonlarında doğru sayıları göstermek için programlı güncelleme yapılmalıdır. Bu konuyu bir sonraki bölümde açıklayacağız.

Daha fazla örnek

Liste öğelerinin varsayılan bağlantı ikonunu değiştirme
Liste öğelerine farklı bağlantı ikonları nasıl ayarlanır (sağ ok menkul olan varsayılandır).
Katlanabilir Liste
Gizli ve gösterilen içerik listelerini nasıl oluşturulur.
Daha fazla içerik biçimi.
Takvim nasıl yapılır.