جی کوئری موبایل-نوار هدایتی
نوارهای هدایتی در جی کوئری موبایل
یک نوار هدایتی شامل یک گروه از لینک ها است که معمولا به طور افقی در داخل یک 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 دکمه در نوار هدایتی
- نوشته شده توسط احسان عباسی
- بازدید: 5247
