عرض قائمة 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").

فواصل القائمة

يستخدم فواصل القائمة لتنظيم وتجميع العناصر في فئات/أقسام.

إذا كنت ترغب في تحديد فواصل القائمة، أضف خاصية 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="البحث عن الاسم">

تجربة بنفسك

مزيد من الأمثلة

قائمة فقط للقراءة
كيفية إنشاء قائمة بدون روابط (ليست زرًا، لا يمكن النقر عليها).