نمای لیستی jQuery Mobile

نمای لیستی jQuery Mobile

نمای لیست jQuery Mobile یک لیست استاندارد HTML است: لیست‌های مرتب (<ol>) و لیست‌های نامرتب (<ul>).

برای ایجاد لیست، ویژگی data-role="listview" را به عناصر <ol> یا <ul> اضافه کنید. برای اینکه این آیتم‌ها قابل کلیک باشند، لینک را در هر آیتم لیست (<li>) تعیین کنید:

مثال

<ol data-role="listview">
  <li><a href="#">آیتم لیست</a></li>
</ol>
<ul data-role="listview">
  <li><a href="#">آیتم لیست</a></li>
</ul>

با دست خود امتحان کنید

برای افزودن گوشه‌های گرد و حاشیه به لیست، از ویژگی data-inset="true" استفاده کنید:

مثال

<ul data-role="listview" data-inset="true">

با دست خود امتحان کنید

توجه:به طور پیش‌فرض، آیتم‌های لیست به صورت خودکار به عنوان دکمه‌ها تبدیل می‌شوند (بدون نیاز به data-role="button").

نشانه‌گذارهای جداکننده لیست

نشانه‌گذارهای جداکننده لیست (List Dividers) برای سازماندهی و ترکیب آیتم‌ها به عنوان دسته‌بندی‌ها/قسمت‌ها استفاده می‌شوند.

برای تعیین نشانه‌گذارهای جداکننده لیست، ویژگی data-role="list-divider" را به عنصر <li> اضافه کنید:

مثال

<ul data-role="listview">
 <li data-role="list-divider">اروپا</li>
  <li><a href="#">فرانسه</a></li>
  <li><a href="#">آلمان</a></li>
</ul>

با دست خود امتحان کنید

اگر لیست شما به ترتیب الفبایی است (مثلاً کتابخانه)، jQuery Mobile به طور خودکار نشانه‌گذارهای جداکننده مناسب را اضافه می‌کند، با تنظیم ویژگی data-autodividers="true" در عناصر <ol> یا <ul>:

مثال

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Adam</a></li>
  <li><a href="#">Angela</a></li>
  <li><a href="#">Bill</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>

با دست خود امتحان کنید

توجه:ویژگی data-autodividers="true" با بزرگ‌نویسی اولین حرف هر آیتم لیست، نشانه‌گذارهای جداکننده ایجاد می‌کند.

پالایه جستجو

برای افزودن جعبه جستجو به لیست، از ویژگی data-filter="true" استفاده کنید:

مثال

<ul data-role="listview" data-filter="true"</ul>

با دست خود امتحان کنید

به طور پیش‌فرض، متن جعبه جستجو "Filter items..." است.

برای تغییر متن پیش‌فرض، از ویژگی data-filter-placeholder استفاده کنید:

مثال

<ul data-role="listview" data-filter="true" data-filter-placeholder="جستجوی نام">

با دست خود امتحان کنید

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

لیست خوانا
چگونه لیستی بدون لینک ایجاد کنیم (نه دکمه، قابل کلیک نیست).