نوار ابزار هدایت‌کننده 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" اضافه کرد.
نوار ابزار هدایت‌کننده در پاکت
چگونه می‌توان نوار ابزار هدایت‌کننده را به پاکت اضافه کرد.
محل‌گذاری آیکون‌ها در نوار ابزار
چگونه می‌توان آیکون‌ها را در نوار ابزار پایش‌کننده در پاکت قرار داد.
پنج دکمه یا بیشتر
ده دکمه در نوار ابزار هدایت‌کننده نمایش داده می‌شوند.