نوار ابزار jQuery Mobile

نوار ابزار jQuery Mobile

عناصر ابزارهای سربرگ و پایندرگه اغلب در سربرگ و پایندرگه قرار می‌گیرند - برای دسترسی به

نوار عنوان

سربرگ معمولاً شامل عنوان سربرگ/لوگوی سربرگ یا یک تا دو دکمه (معمولاً خانه، گزینه‌ها یا دکمه جستجو) است.

شما می‌توانید در سربرگ دکمه‌ها را به سمت چپ و یا/و سمت راست اضافه کنید.

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

Example

<div data-role="header">
  <a href="#" data-role="button">خانه</a>
  <h1>به خانه‌ی شخصی خود خوش آمدید</h1>
  <a href="#" data-role="button">جستجو</a>
</div>

به طور شخصی امتحان کنید

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

<div data-role="header">
  <a href="#" data-role="button">خانه</a>
  <h1>به خانه‌ی شخصی خود خوش آمدید</h1>
</div>

اما اگر شما در عناصر بعد از <h1> لینک دکمه قرار دهید، آن‌ها در سمت راست متن نمایش داده نمی‌شوند. برای اضافه کردن دکمه به سمت راست عنوان سربرگ، نام کلاس "ui-btn-right" را تعیین کنید:

Example

<div data-role="header">
  <h1>به خانه‌ی شخصی خود خوش آمدید</h1>
  <a href="#" data-role="button" class="ui-btn-right">جستجو</a>
</div>

به طور شخصی امتحان کنید

توجه:سربرگ می‌تواند یک یا دو دکمه را شامل شود، اما پایندرگه محدودیتی ندارد.

نوار پایندرگه

در مقایسه با سربرگ، پایندرگه انعطاف‌پذیری بیشتری دارد - آنها کاربردی‌تر و متنوع‌تر هستند، بنابراین می‌توانند تعداد مورد نیاز دکمه‌ها را شامل شوند:

Example

<div data-role="footer">
  <a href="#" data-role="button">Broadcast to Sina Weibo</a>
  <a href="#" data-role="button">Broadcast to Tencent Weibo</a>
  <a href="#" data-role="button">Broadcast to QQ Space</a>
</div>

به طور شخصی امتحان کنید

Note:The style of the footer is different from the header (it reduces some padding and space, and the buttons are not centered). If you want to fix this issue, please set the class name "ui-btn" in the footer settings:

Example

<div data-role="footer" class="ui-btn">

به طور شخصی امتحان کنید

You can also choose to combine buttons horizontally or vertically in the footer:

Example

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">Broadcast to Sina Weibo</a>
    <a href="#" data-role="button" data-icon="plus">Broadcast to Tencent Weibo</a>
    <a href="#" data-role="button" data-icon="plus">Broadcast to QQ Space</a>
  </div>
</div>

به طور شخصی امتحان کنید

localize the header and footer

There are three ways to place the header and footer:

  • Inline - default. The header and footer are located inline with the page content.
  • Fixed - the header and footer will stay at the top and bottom of the page.
  • Fullscreen - similar to fixed; the header and footer will stay at the top and bottom of the page, but also over the page content. It is also slightly translucent

Use the data-position attribute to localize the header and footer:

inline localization (default)

<div data-role="header" data-position="inline"</div>
<div data-role="footer" data-position="inline"</div>

به طور شخصی امتحان کنید

fixed localization

<div data-role="header" data-position="fixed"</div>
<div data-role="footer" data-position="fixed"</div>

به طور شخصی امتحان کنید

If you need to enable full localization, use data-position="fixed" and add the data-fullscreen attribute to the element:

fullscreen localization

<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، لمس صفحه باعث مخفی و نمایش سربرگ و پایش می‌شود.