محتوای لیست 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="ایالات متحده" class="ui-li-icon">ایالات متحده</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="#">پست ورودی<span class="ui-li-count">335</span></a></li>
  <li><a href="#">فرستاده شده<span class="ui-li-count">123</span></a></li>
  <li><a href="#">کپه زباله<span class="ui-li-count">7</span></a></li>
</ul>

آزمایش کنید

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

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

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