محتوای لیست jQuery Mobile

تصاویر کوچک jQuery Mobile

برای تصاویر بزرگتر از 16x16px، عنصر <img> را در لینک اضافه کنید.

jQuery Mobile به طور خودکار تصاویر را به اندازه 80x80px تنظیم می‌کند:

مثال

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

آزمایش کنید

برای پر کردن لیست‌های اطلاعات‌دار با HTML استاندارد استفاده کنید:

مثال

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome مرورگر رایگان و منبع باز وب. در سال 2008 منتشر شد.</p>
    </a>
  </li>
</ul>

آزمایش کنید

آیکون‌های لیست jQuery Mobile

برای اضافه کردن آیکون 16x16px به لیست خود، به عنصر <img>属性 class="ui-li-icon" اضافه کنید:

مثال

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

آزمایش کنید

دکمه تقسیم

برای ایجاد لیست‌های تقسیم شده با جدولک عمودی، دو لینک را در داخل عنصر <li> قرار دهید.

jQuery Mobile به طور خودکار به دومین لینک استایل آیکون آبی رنگ اضافه می‌کند، و متن لینک (در صورت وجود) در هنگام حرکت کاربر به سمت آیکون نمایش داده می‌شود:

مثال

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">متن بعضی</a>
  </li>
</ul>

آزمایش کنید

با اضافه کردن صفحات و دیالوگ‌ها، عملکرد لینک‌ها قوی‌تر می‌شود:

مثال

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">دانلود مرورگر</a>
  </li>
</ul>

آزمایش کنید

کفش شمار

کفش شمار برای نمایش تعداد مرتبط با عناصر لیست استفاده می‌شود، مانند پیام‌های ایمیل:

برای افزودن کفش شمار، از عناصر درون خطی استفاده کنید، مانند <span>، و تنظیم کنید class "ui-li-count" و شمار را اضافه کنید:

مثال

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Sent<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

آزمایش کنید

توضیح:برای نمایش عدد صحیح در حباب شمارش، باید به صورت برنامه‌ریزی شده به‌روزرسانی شود. ما این موضوع را در فصل بعد توضیح خواهیم داد.

مثال‌های بیشتر

تغییر آیکون لینک پیش‌فرض عناصر لیست
چگونه آیکون‌های لینک متفاوت برای عناصر لیست تنظیم کنیم (آیکون پیکان به سمت راست پیش‌فرض است).
لیست‌های قابل فشرده‌سازی
چگونه یک لیست مخفی و نمایش محتوا ایجاد کنیم.
فرمت‌های بیشتر محتوا
چگونه یک تقویم بسازیم.