نوارهای هدایتی در جی کوئری موبایل
یک نوار هدایتی شامل یک گروه از لینک ها است که معمولا به طور افقی در داخل یک header یا footer ترازبندی شده اند:
نوار مورد نظر از لیست های نامنظم لینک ها ساخته شده است که درون یک عنصر <div> که دارای خصوصیت "data-role="navbar است، بسته بندی شده است:
مثال
<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>
 | به طور پیش فرض لینک های درون نوار هدایتی، به طور اتوماتیک به یک دکمه تبدیل می شوند( پس نیازی به "calss="ui-btn یا "data-role="button نیست). |
|---|
آیکن ها در دکمه های هدایتی
برای اضافه کردن آیکن به دکمه ی هدایتی خود، از خصوصیت data-icon استفاده نمایید:
خصوصیت 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" | ترازبندی آیکن در سمت چپ | امتحان کنید |
| به طور پیش فرض، آیکن ها در دکمه های ناوبری در بالای متن مورد نظر قرار می گیرند("data-iconpos="top). |
|---|
دکمه های فعال
هنگامی که در نوار هدایتی، یک دکمه لمس شده یا کلیک می شود، این دکمه به حالت فشار داده شده/انتخاب شده در می آید.
برای دسترسی به این حالت، بدون اینکه لینک را لمس کنیم، می توانید از "class="ui-btn-active استفاده نمایید تا دکمه به حالت فعال در بیاید:
وقتی چند صفحه داریم، شاید بخواهید لینک صفحه ای که کاربر در آن قرار دارد، به حالت فعال دربیاید. برای انجام این کار کلاس های "ui-state-persist" و "ui-btn-active" را به لینک خود اضافه نمایید:
مثال
مثال های بیشتر
نوار هدایتی در محتوا
آموزش قرار دادن یک نوار هدایتی درون "data-role="content
نوار هدایتی درون footer
آموزش اضافه کردن یک نوار هدایتی درون footer.
قرار دادن بیش از 5 دکمه
یک نسخه ی نمایشی از قرار دادن 10 دکمه در نوار هدایتی
