شريط الأدوات jQuery Mobile

شريط الأدوات jQuery Mobile

يتم وضع عناصر الأدوات غالبًا في الجدول العلوى والقدم - لتحقيق توجيه "الزيارات السابقة":

شريط العنوان

عادةً يحتوي الجدول العلوى على عنوان الجدول العلوى/شعار أو مفتاح واحد أو اثنين (عادةً الصفحة الرئيسية أو الخيارات أو مفتاح البحث).

يمكنك إضافة مفتاح إلى اليسار أو اليمين من الجدول العلوى.

كود التالي، سيضيف مفتاحًا إلى اليسار من نص عنوان الجدول العلوى، وسيضيف مفتاحًا إلى اليمين:

مثال

<div data-role="header">
  <a href="#" data-role="button">الصفحة الرئيسية</a>
  <h1>مرحبًا بك في صفحتي الرئيسية</h1>
  <a href="#" data-role="button">البحث</a>
</div>

جربها بنفسك

كود التالي سيضيف مفتاحًا إلى اليسار من عنوان الجدول العلوى:

<div data-role="header">
  <a href="#" data-role="button">الصفحة الرئيسية</a>
  <h1>مرحبًا بك في صفحتي الرئيسية</h1>
</div>

على الرغم من ذلك، إذا وضعت رابط المفتاح بعد علامة <h1>، فإنه لن يظهر في اليمين. إذا كنت ترغب في إضافة مفتاح إلى اليمين من عنوان الجدول العلوى، يرجى تحديد اسم الكائن "ui-btn-right":

مثال

<div data-role="header">
  <h1>مرحبًا بك في صفحتي الرئيسية</h1>
  <a href="#" data-role="button" class="ui-btn-right">البحث</a>
</div>

جربها بنفسك

إشارة:يمكن أن يحتوي الجدول العلوى على مفتاح أو اثنين، ولكن القدم ليس له حدود.

شريط القدم

مقارنة بالجدول العلوى، القدم أكثر مرونة - إنها أكثر عملية وتنوعًا، لذا يمكن أن تحتوي على عدد المفاتيح المطلوب:

مثال

<div data-role="footer">
  <a href="#" data-role="button">نقل البث إلى تويتر الصيني</a>
  <a href="#" data-role="button">نقل البث إلى تويتر التايتشوان</a>
  <a href="#" data-role="button">نقل البث إلى مساحة QQ</a>
</div>

جربها بنفسك

ملاحظة:نمط الرجلية مختلف عن نمط الرأس (سيتم إزالة بعض الهوامش والبيضاض، وسيكون الأزرار غير مركزة). إذا كنت بحاجة إلى تصحيح هذا، قم بتعيين اسم الصنف "ui-btn" في إعدادات الرجلية:

مثال

<div data-role="footer" class="ui-btn">

جربها بنفسك

يمكنك أيضًا اختيار تجميع الأزرار بشكل أفقي أو عمودي في الرجلية:

مثال

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">نقل البث إلى تويتر الصيني</a>
    <a href="#" data-role="button" data-icon="plus">نقل البث إلى تويتر التايتشوان</a>
    <a href="#" data-role="button" data-icon="plus">نقل البث إلى مساحة QQ</a>
  </div>
</div>

جربها بنفسك

تحديد موقع الرأس والرجلية

هناك ثلاث طرق لوضع الرأس والرجلية:

  • Inline - افتراضي. سيكون الرأس والرجلية في نفس الخط مع محتوى الصفحة.
  • Fixed - سيبقى الرأس والرجلية في أعلى وأسفل الصفحة.
  • Fullscreen - مشابه لـ fixed; سيبقى الرأس والرجلية في أعلى وأسفل الصفحة، ولكن أيضًا فوق محتوى الصفحة. وهو أيضًا شبه شفاف

استخدم خاصية data-position لتحديد موقع الرأس والرجلية:

تحديد الموقع على الخط (الافتراضي)

<div data-role="header" data-position="inline"</div>
<div data-role="footer" data-position="inline"</div>

جربها بنفسك

تحديد الموقع الثابت

<div data-role="header" data-position="fixed"</div>
<div data-role="footer" data-position="fixed"</div>

جربها بنفسك

إذا كنت بحاجة إلى تفعيل تحديد الموقع الكامل، استخدم data-position="fixed"، وأضف خاصية data-fullscreen إلى العنصر:

Fullscreen تحديد الموقع

<div data-role="header" data-position="fixed" data-fullscreen="true"</div>
<div data-role="footer" data-position="fixed"> data-fullscreen="true"</div>

جربها بنفسك

إشارة:fullscreen مثالي للصور والصور والفيديوهات.

إشارة:للمواقع المحددة بـ fixed و fullscreen، سيتم إخفاء وعرض رأس الصفحة وذيل الصفحة بتouchscreen.