جی کوئری موبایل-نوار هدایتی

چاپ

نوارهای هدایتی در جی کوئری موبایل

یک نوار هدایتی شامل یک گروه از لینک ها است که معمولا به طور افقی در داخل یک header یا footer ترازبندی شده اند: 

 

نوار مورد نظر از لیست های نامنظم لینک ها ساخته شده است که درون یک عنصر <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>
خودتان امتحان کنید »
Note

به طور پیش فرض لینک های درون نوار هدایتی، به طور اتوماتیک به یک دکمه تبدیل می شوند( پس نیازی به "calss="ui-btn یا "data-role="button نیست).
عرض دکمه ها به طور پیش فرض به اندازه ی محتوای خودشان خواهد شد. برای اینکه دکمه ها را به طور مساوی تقسیم کنید می توانید از لیست های نامنظم استفاده نمایید: 1 دکمه، 100% عرض را اشغال می کند، 2 دکمه هرکدام 50% را اشغال می کنند، 3 دکمه هرکدام 33.3% را اشغال می کنند و ... . اما اگر شما بیش از 5 دکمه را در نوار هدایتی مشخص کنید، نوار هدایتی به صورت چند خطی در خواهد آمد(مثال های بیشتر را در زیر مشاهده کنید).


آیکن ها در دکمه های هدایتی

برای اضافه کردن آیکن به دکمه ی هدایتی خود، از خصوصیت data-icon استفاده نمایید:

مثال

<a href="#anylink" data-icon="search">Search</a>
خودتان امتحان کنید »

خصوصیت data-icon از همان مقادیری استفاده می کند که کلاس های css در فصل "آیکن ها" استفاده می کردند. تنها تفاوت در این است که به جای استفاده از "class="ui-icon-value شما از "data-icon="value در اینجا استفاده کنید.

مقدار خصوصیتتوضیحاتآیکن
"data-icon="home Home  
"data-icon="arrow-r Right Arrow  
"data-icon="search Search  

برای دیدن یک مرجع کامل از تمام آیکن های دکمه ی جی کوئری موبایل، لطفا مرجع آیکن های جی کوئری موبایل را مطالعه نمایید. 


آیکن های مکان گذاری

درست مانند فصل "آیکن ها" که در آنجا از کلاس "ui-btn-icon" استفاده می کردیم، شما می توانید مشخص کنید که آیکن مورد نظر در دکمه ی هدایتی، در کجا قرار بگیرد: top یا right یا bottom یا left . 

مکان آیکن در ظرف(container) نوار هدایتی قرار دارد. این امکان وجود ندارد تا هر لینک دکمه ی منحصر به فرد را مکان گذاری کنیم. بنا براین از خصوصیت data-iconpos برای مشخص کردن مکان مورد نظر استفاده کنید:

مقدار خصوصیتتوضیحاتمثال
data-iconpos="top"

ترازبندی آیکن در بالا

امتحان کنید
data-iconpos="right"

ترازبندی آیکن در سمت راست

امتحان کنید
data-iconpos="bottom"

ترازبندی آیکن در پایین

امتحان کنید
data-iconpos="left"

ترازبندی آیکن در سمت چپ

امتحان کنید
Note

به طور پیش فرض، آیکن ها در دکمه های ناوبری در بالای متن مورد نظر قرار می گیرند("data-iconpos="top).


دکمه های فعال

هنگامی که در نوار هدایتی، یک دکمه لمس شده یا کلیک می شود، این دکمه به حالت فشار داده شده/انتخاب شده در می آید. 

برای دسترسی به این حالت، بدون اینکه لینک را لمس کنیم، می توانید از "class="ui-btn-active استفاده نمایید تا دکمه به حالت فعال در بیاید:

مثال

<li><a href="#anylink" class="ui-btn-active">Home</a></li>
خودتان امتحان کنید »

وقتی چند صفحه داریم، شاید بخواهید لینک صفحه ای که کاربر در آن قرار دارد، به حالت فعال دربیاید. برای انجام این کار کلاس های "ui-state-persist" و "ui-btn-active" را به لینک خود اضافه نمایید:

مثال

<li><a href="#anylink" class="ui-btn-active ui-state-persist">Home</a></li>
خودتان امتحان کنید »

Examples

مثال های بیشتر

نوار هدایتی در محتوا
آموزش قرار دادن یک نوار هدایتی درون "data-role="content

 نوار هدایتی درون footer
آموزش اضافه کردن یک نوار هدایتی درون footer.

قرار دادن بیش از 5 دکمه
یک نسخه ی نمایشی از قرار دادن 10 دکمه در نوار هدایتی