شريط التوجيه jQuery Mobile

شريط التوجيه jQuery Mobile

تتكون قائمة التوجيه من مجموعة من الروابط المترابطة بشكل أفقي، وتوجد غالبًا داخل رأس الصفحة أو قدم الصفحة.

بالافتراض، يتم تحويل الروابط في قائمة التوجيه تلقائيًا إلى أزرار (لا تحتاج إلى data-role="button").

استخدم خاصية data-role="navbar" لتعريف قائمة التوجيه:

مثال

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">الصفحة الرئيسية</a></li>
      <li><a href="#anylink">الصفحة الثانية</a></li>
      <li><a href="#anylink">البحث</a></li>
    </ul>
  </div>
</div>

تجربة بنفسك

نصيحة:عرض الزر، بشكل افتراضي، متساوي مع محتواه. استخدم قائمة غير مرتبة لتقسيم الزر بشكل متساوٍ: يأخذ زر واحد 100% من العرض، زرين يشاركون 50% من العرض، ثلاثة أزرار 33.3%، وهكذا. ولكن، إذا كنت قد أضفت خمس زر أو أكثر في قائمة التوجيه، فإنه سينحني إلى صفوف متعددة (انظر إلى "مزيد من الأمثلة" في أسفل الصفحة).

زر نشط

عند ضرب الرابط في قائمة التوجيه، يتم تحقيق مظهر التحديد (الضغط).

إذا كنت تريد تحقيق هذا المظهر دون ضرب الرابط، استخدم class="ui-btn-active":

مثال

<li><a href="#anylink" class="ui-btn-active"> الصفحة الرئيسية</a></li>

تجربة بنفسك

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

مثال

<li><a href="#anylink" class="ui-btn-active ui-state-persist"> الصفحة الرئيسية</a></li>

تجربة بنفسك

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

شريط التوجيه في المحتوى
كيفية إضافة شريط التوجيه في data-role="content".
شريط التوجيه في الصفحة السفلية
كيفية إضافة شريط التوجيه في الصفحة السفلية.
تحديد أيقونة في شريط التوجيه
كيفية وضع أيقونة داخل شريط التوجيه في الصفحة السفلية.
خمس أزرار أو أكثر
عرض عشرة أزرار في شريط التوجيه.