البارات مسج موبايل الإنتقال
يتكون شريط التنقل من مجموعة من الروابط التي تتماشى أفقيا، وعادة داخل رأس أو تذييل الصفحة:
يتم ترميز الشريط كما قائمة غير مرتبة من الروابط ملفوفة داخل <div> العنصر الذي لديه data-role="navbar" السمة:
مثال
<div data-role="header">
<div data-role="navbar" >
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>
انها محاولة لنفسك » افتراضيا، والروابط داخل شريط التنقل تتحول تلقائيا إلى زر (لا حاجة لل class="ui-btn" أو data-role="button" ).
الأزرار، افتراضيا، واسعة كما محتواه. استخدام قائمة غير مرتبة لتقسيم أزرار على حد سواء: 1 زر يأخذ 100٪ من العرض، 2 أزرار حصة 50٪ لكل منهما، 3 أزرار 33.3٪، وما إلى ذلك، إذا قمت بتحديد أكثر من 5 أزرار في الناف بار، وسوف التفاف ل خطوط متعددة (انظر "مزيد من أمثلة" أدناه).
الرموز في أزرار التنقل
لإضافة رمز إلى زر التنقل، استخدم السمة رمز البيانات:
تنسب-رمز البيانات استخدام نفس القيم كما الطبقات CSS المحددة في الفصل "الأيقونات". والفرق الوحيد هو أنه بدلا من تحديد class="ui-icon- value " ، يمكنك تحديد سمة من data-icon=" value " .
| السمة القيمة | وصف | أيقونة |
|---|---|---|
| data-icon="home" | الصفحة الرئيسية | |
| data-icon="arrow-r" | السهم الأيمن | |
| data-icon="search" | بحث |
للإشارة كاملة لجميع الأيقونات مسج جوال، يرجى زيارة موقعنا مسج الأيقونات موبايل المرجعي .
وضع الأيقونات
تماما مثل مع "ui-btn-icon- position " فئة (المحددة في الفصل "الأيقونات")، يمكنك اختيار المكان ورمز وينبغي وضع في زر التنقل: top, right, bottom أو left .
ضبط موضع رمز على الحاوية نافبار - أنه ليس من الممكن وضع كل وصلة زر الفردية. استخدام data-iconpos السمة لتحديد الموقف:
| السمة القيمة | وصف | مثال |
|---|---|---|
| data-iconpos="top" | أعلى محاذاة رمز | جربها |
| data-iconpos="right" | محاذاة رمز الصحيحة | جربها |
| data-iconpos="bottom" | محاذاة رمز القاع | جربها |
| data-iconpos="left" | غادر محاذاة رمز | جربها |
افتراضيا، يتم وضع الرموز في أزرار التنقل فوق النص (data-iconpos="top") .
أزرار النشطة
عندما يتم استغلالها وصلة في الناف بار / النقر عليها، فإنه يحصل على اختيار (ضغط لأسفل) تنظر.
لتحقيق هذه النظرة دون الحاجة إلى النقر على رابط، استخدم class="ui-btn-active" :
لصفحات متعددة، قد ترغب في "المختارة" للبحث عن كل الزر الذي يمثل الصفحة المستخدم في وضع التشغيل. للقيام بذلك، قم بإضافة "ui-state-persist" الفئة لصلاتك، وكذلك "ui-btn-active" الطبقة:
مثال
<li><a href="#anylink"
class="ui-btn-active ui-state-persist" >Home</a></li>
انها محاولة لنفسك » المزيد من الأمثلة
Navbars في المحتوى
كيفية إضافة شريط التنقل داخل data-role="content" .
Navbars في تذييل
كيفية إضافة شريط التنقل داخل تذييل الصفحة.
أكثر من 5 أزرار
مظاهرة من 10 أزرار في شريط التنقل