مسج موبايل قائمة الأيقونات
الرمز الافتراضي لكل عنصر قائمة تحتوي على وصلة هو "carat-r" (السهم الأيمن). لتغيير هذا إلى رمز آخر، استخدم data-icon السمة على عنصر القائمة التي تريد تعديلها:
مثال
<ul data-role="listview">
<li><a href="#">Default is right
arrow</a></li>
<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
<li
data-icon="delete"><a href="#">data-icon="delete"</a></li>
<li
data-icon="location"><a href="#">data-icon="location"</a></li>
<li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>
انها محاولة لنفسك » data-icon="false" سوف إزالة رمز.
للإشارة كاملة لجميع الأيقونات مسج جوال، يرجى زيارة موقعنا مسج الأيقونات موبايل المرجعي .
16X16 أيقونات
لإضافة رمز 16x16px القياسي لقائمتك، إضافة <img> العنصر داخل رابط مع فئة من "واجهة المستخدم ليثيوم-رمز":
مثال
<ul data-role="listview">
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon" >USA</a></li>
</ul>
انها محاولة لنفسك » مسج موبايل قائمة الصور المصغرة
للصور أكبر من 16x16px، إضافة <img> عنصر داخل عنصر قائمة باعتبارها العنصر الطفل الأول (بدون اسم الفئة).
سوف مسج موبايل حجم الصورة تلقائيا ل 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 is a free,
open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>
انها محاولة لنفسك » أزرار تقسيم
لإنشاء قائمة انقسام مع شريط مقسم الرأسي، وضع اثنين من وصلات داخل <li> العنصر.
سوف مسج الجوال تلقائيا مكان الوصلة الثانية على الجانب الأيمن من قائمة مع الحق arrow-icon . وسيتم عرض النص داخل وصلة (إن وجدت) عندما تحوم المستخدم فوق رمز:
مثال
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some
Text</a>
</li>
</ul>
انها محاولة لنفسك » يتيح إضافة بعض الصفحات والحوارات لجعل الروابط أكثر وظيفية:
مثال
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download"
data-transition="pop" data-icon="gear">Download Browser</a>
</li>
</ul>
<div data-role="page" id="download" data-dialog="true">
انها محاولة لنفسك » عدد الفقاعات
تستخدم فقاعات العد لعرض الأرقام المرتبطة عناصر القائمة، مثل الرسائل في صندوق البريد:
لإضافة فقاعات العد، استخدم عنصر المضمنة، مثل <span> ، مع الطبقة "ui-li-count" وإضافة رقم:
مثال
<ul data-role="listview">
<li><a href="#">Inbox<span class="ui-li-count" >25</span></a></li>
<li><a href="#">Sent<span class="ui-li-count" >432</span></a></li>
<li><a href="#">Trash<span class="ui-li-count" >7</span></a></li>
</ul>
انها محاولة لنفسك » ملاحظة: لتظهر، يجب أن يتم تحديث الرقم الصحيح في فقاعة عدد برمجيا. وسيتم شرح ذلك في فصل لاحق.
المزيد من الأمثلة
القوائم المنبثقة
كيفية إنشاء القائمة المنبثقة.
قوائم قابلة للطي
كيفية إنشاء القوائم التي إخفاء وإظهار المحتوى.
القوائم المنبثقة قابلة للطي
كيفية إنشاء قائمة منبثقة للطي.
قوائم قابلة للطي العرض الكامل
باستخدام data-inset="false" السمة على "collapsibles/collapsible set" لتمكين listview العرض الكامل.
المزيد من التنسيق المحتوى
كيفية جعل التقويم.