أزرار 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 صحيح | خطأ تحديد ما إذا كان الزر به زوايا دائرية أم لا. اختبار
data-mini صحيح | خطأ تحديد ما إذا كان الزر صغيرًا أم لا. اختبار
data-shadow صحيح | خطأ تحديد ما إذا كان الزر له ظل أم لا. اختبار

للحصول على معلومات كاملة عن خصائص data-* لـ jQuery Mobile، يرجى زيارة دليل مرجعي jQuery Mobile Data Properties.

يوضح هذا الفصل كيفية إضافة أيقونة إلى الزر.