دکمه‌های jQuery Mobile

نرم‌افزارهای موبایل مبتنی بر راحتی عملیات لمسی هستند.

ایجاد بانتون در jQuery Mobile

بانتون‌های jQuery Mobile می‌توانند به سه روش ایجاد شوند:

  • استفاده از عناصر <button>
  • استفاده از عناصر <input>
  • استفاده از عناصر <a> با data-role="بانتون"

<button>

<button>بانتون</button>

آزمایش کنید

<input>

<input type="button" value="دکمه">

آزمایش کنید

<a>

<a href="#" data-role="button">دکمه</a>

آزمایش کنید

توجه:دکمه‌های jQuery Mobile به طور خودکار استایل دریافت می‌کنند که تعامل و دسترسی آن‌ها در دستگاه‌های موبایل را افزایش می‌دهد. ما توصیه می‌کنیم از عنصر <a> با ویژگی data-role="button" برای ایجاد لینک‌های بین صفحات استفاده کنید، و عناصر <input> یا <button> برای ارسال فرم استفاده شوند.

دکمه‌های ناوبری

برای لینک‌دهی صفحات از طریق دکمه، از عنصر <a> با ویژگی data-role="button" استفاده کنید:

مثال

<a href="#pagetwo" data-role="button">به صفحه دوم برو</a>

آزمایش کنید

دکمه‌های درون‌صفحه

به طور پیش‌فرض، دکمه‌ها تمام عرض صفحه را اشغال می‌کنند. اگر می‌خواهید دکمه‌ها به محتوای خود تطبیق یابند یا اگر می‌خواهید دو یا چند دکمه به صورت پارالل نمایش داده شوند، ویژگی data-inline="true" را اضافه کنید:

مثال

<a href="#pagetwo" data-role="button" data-inline="true">به صفحه دوم برو</a>

آزمایش کنید

دکمه‌های ترکیبی

jQuery Mobile روش‌های ساده‌ای برای ترکیب دکمه‌ها ارائه می‌دهد.

برای ترکیب دکمه‌ها به صورت افقی یا عمودی، ویژگی data-role="controlgroup" را با data-type="horizontal|vertical" استفاده کنید:

مثال

<div data-role="controlgroup" data-type="horizontal">
  <a href="#anylink" data-role="button">دکمه 1</a>
  <a href="#anylink" data-role="button">دکمه 2</a>
  <a href="#anylink" data-role="button">دکمه 3</a>
</div>

آزمایش کنید

توجه:به طور پیش‌فرض، دکمه‌های ترکیبی به صورت عمودی گروه‌بندی می‌شوند، بین آن‌ها هیچ حاشیه و فضای خالی وجود ندارد. و تنها اولین و آخرین دکمه‌ها دارای گوشه‌های گرد هستند، که پس از ترکیب آن‌ها یک ظاهر زیبا ایجاد می‌شود.

دکمه بازگشت

برای ایجاد دکمه بازگشت، از ویژگی data-rel="back" استفاده کنید (مقدار href آدرس آنکر نادیده گرفته می‌شود):

مثال

<a href="#" data-role="button" data-rel="back">بازگشت</a>

آزمایش کنید

ویژگی‌های data-* بیشتر برای دکمه‌ها استفاده می‌شوند

ویژگی مقدار توضیح مثال
data-corners true | false تعیین می‌کند که آیا دکمه دارای گوشه‌های گرد است یا خیر. آزمایش
data-mini true | false تعیین می‌کند که آیا دکمه کوچک است یا خیر. آزمایش
data-shadow true | false تعیین می‌کند که آیا دکمه سایه دارد یا خیر. آزمایش

برای اطلاعات کامل‌تر در مورد ویژگی‌های data-* jQuery Mobile، لطفاً به دستورالعمل‌های مرجع Data jQuery Mobile.

در این بخش نمایش داده می‌شود که چگونه می‌توان آیکون به دکمه اضافه کرد.