جی کوئی موبائل دکمه

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

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

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

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

<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-* پرپریٹیز کی پورا معلومات کے لئے، ہمارے جی کوئی موبائل ڈیٹا پرپریٹیز مراجع دستور.

آئندہ حصے میں دکھایا جائے گا کہ کیسے دکھائیں کا آئیکون اضافہ کیا جاتا ہے。