نوار ناوبری 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% و به همین ترتیب. اما اگر بیش از پنج دکمه در نوار ناوبری تنظیم کنید، آن‌ها به چند ردیف خم می‌شوند (به "مثال‌های بیشتر" در پایین صفحه مراجعه کنید).

دکمه فعال

وقتی که پیوند در نوار ناوبری کلیک شود، ظاهر انتخاب شده (فشرده شده) را می‌گیرد.

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