محتويات القائمة 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 إلى قائمتك، أضف خاصية class="ui-li-icon" إلى عنصر <img>.

مثال

<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>

جرب بنفسك

ملاحظة:لإظهار الرقم الصحيح في الفقاعة العددي، يجب إجراء تحديث برمجي. سنوضح ذلك في الفصل التالي.

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

تغيير أيقونة الرابط الافتراضية للعناصر في القائمة
كيفية تعيين أيقونة رابط مختلفة للعناصر في القائمة (الإشارة إلى اليمين هي افتراضية).
قائمة قابلة للطي
كيفية إنشاء قائمة لتمثيل العرض والإخفاء للمحتوى.
تنسيقات المزيد من المحتويات
كيفية إعداد التقويم.