سبد خرید (0)

تبلیغات

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

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

نوار ابزارها اغلب در قسمت های header و footer قرار می گیرند تا دسترسی را ساده تر کنند.


ابزارهای Header

قسمت header  در بالای صفحه قرار می گیرد و معمولا دربردارنده ی یک عنوان یا لوگو می باشد و یا اینکه شامل دو دکمه است( معمولای دکمه های home و options یا search)

شما می توانید دکمه هایی را به سمت راست یا چپ از header مورد نظر قرار دهید. 

کد زیر، یک دکمه ی Home را به سمت چپ و یک دکمه ی Search را به سمت راست از متن عنوان header اضافه می کند: 

مثال

<div data-role="header">
  <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
  <h1>Welcome To My Homepage</h1>
  <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div>
خودتان امتحان کنید »

کد زیر تنها یک دکمه را به سمت چپ از عنوان header اضافه می کند:

مثال

<div data-role="header">
  <a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
  <h1>Welcome To My Homepage</h1>
</div>
خودتان امتحان کنید »

کد زیر تنها یک دکمه را به سمت راست عنوان header اضافه می کند:

مثال

<div data-role="header">
  <h1>Welcome To My Homepage</h1>
  <a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div>
خودتان امتحان کنید »
Note

یک header می تواند یک یا دو دکمه داشته باشد، در حالی که یک footer هیچ محدودیتی ندارد. 


ابزارهای Footer

footer در پایین هر صفحه قرار می گیرد. 

قسمت footer انعطاف پذیرتر از header می باشد. این قسمت کارکرد بیشتری دارد و در سراسر صفحات تغییر پذیرتر است و می تواند در صورت نیاز، شامل دکمه های زیادی باشد:

مثال

<div data-role="footer">
  <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
  <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
  <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
خودتان امتحان کنید »

نکته: دکمه های درون footer به طور پیش فرض در مرکز قرار نمی گیرند. برای حل این مشکل از css استفاده کنید: 

مثال

<div data-role="footer" style="text-align:center;">
خودتان امتحان کنید »

شما همچنین می توانید دکمه ها را در footer به صورت افقی و عمودی، گروه بندی کنید:

مثال

<div data-role="footer" style="text-align:center;">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
  </div>
</div>
خودتان امتحان کنید »

مکان گذاری قسمت های header و footer

header و footer می توانند به سه روش مکان گذاری شوند:

  • Inline - پیش فرض. header و footer به صورت خطی نسبت به محتوای صفحه قرار می گیرند. 
  • Fixed - قسمت های header و footer در بالا و پایین صفحه ی مورد نظر ثابت می مانند. 
  • Fullscreen - مانند حالت fixed رفتار می کند. قسمت های header و footer در بالا و پایین صفحه باقی می مانند اما همچنان در بالای محتوای صفحه قرار دارند. کمی هم نیمه شفاف می شود. 

از خصوصیت data-position برای مکان گذاری header و footer خود استفاده نمایید:

مکان گذاری Inline (پیش فرض)

<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>
خودتان امتحان کنید »

مکان گذاری Fixed

<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>
خودتان امتحان کنید »

برای فعال کردن مکان گذاری fullscreen از "data-position="fixed استفاده کنید و سپس خصوصیت data-fullscreen را به عنصر مورد نظر اضافه کنید:

مکان گذاری Fullscreen

<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
خودتان امتحان کنید »

نکته: مکان گذاری fullscreen برای استفاده در زمینه ی عکس و ویدئو ایده آل می باشد. 

نکته: لمس کردن صفحه در هردو مکان گذاری fixed و fullscreen باعث می شود که قسمت های header و footer محو شوند. 


Examples

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

تنها نمایش دادن آیکن مورد نظر در نوارابزارها
استفاده از کلاس ui-btn-icon-notext برای نمایش دادن آیکن مورد نظر در دکمه های header و footer، به تنهایی.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت پرداخت آنلاین - بانک پارسیان پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی