وتبنى التطبيقات النقالة على بساطة الأمور التنصت كنت تريد عرضها.
إنشاء زر في مسج موبايل
يمكن إنشاء زر في مسج المحمول من خلال ثلاث طرق:
- باستخدام <input> العنصر
- باستخدام <button> العنصر مع class="ui-btn"
- باستخدام <a> عنصر مع class="ui-btn"
وعلى غرار أزرار في مسج الجوال تلقائيا، مما يجعلها جذابة وصالحة للاستعمال على كل من الأجهزة المحمولة وأجهزة الكمبيوتر المكتبية. ونحن ننصح استخدام <a> عنصر مع class="ui-btn" لربط بين الصفحات، و <input> أو <button> العناصر لتقديم النموذج.
ملاحظة: قبل أن الإصدار 1.4، استخدمنا data-role="button" سمة لإنشاء زر في مسج موبايل. اعتبارا من 1.4، والإطار الطبقات استخدام CSS لأزرار النمط (باستثناء <input> الأزرار).
أزرار التنقل
لربط بين الصفحات عن طريق أزرار، استخدم <a> عنصر مع class="ui-btn" :
أزرار مجمعة
يوفر مسج المحمول وسيلة سهلة لتجميع أزرار معا.
استخدام data-role="controlgroup" ويعزو جنبا إلى جنب مع data-type="horizontal|vertical" في عنصر حاوية، لتحديد ما إذا كانت مجموعة أزرار أفقيا أو عموديا:
مثال
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" class="ui-btn">Button 1</a>
<a href="#"
class="ui-btn">Button 2</a>
<a href="#"
class="ui-btn">Button 3</a>
</div>
انها محاولة لنفسك » افتراضيا، يتم تجميع أزرار تجميعها عموديا مع عدم وجود هوامش والمسافة التي تفصل بينهما. وفقط أول وآخر زر وتدوير زوايا، مما يخلق نظرة لطيفة عندما تجميعها معا.
أزرار الظهر
لإنشاء زر الخلف، استخدام data-rel="back" سمة (ملاحظة: هذا سيتم تجاهل مرساة ل href قيمة):
أزرار مضمنة
افتراضيا، أزرار يستغرق العرض الكامل من الشاشة. إذا كنت ترغب في زر التي ليست سوى واسعة كما محتواه، أو إذا كنت تريد اثنين أو أكثر من أزرار لتظهر جنبا إلى جنب، إضافة "ui-btn-inline" الفئة:
المزيد من فئات CSS لأزرار لينك
| صف مدرسي | وصف | مثال |
|---|---|---|
| ui-btn-b | يتغير لون الزر إلى خلفية سوداء مع نص أبيض (الافتراضي هو خلفية رمادية مع نص أسود). | جربها |
| ui-corner-all | ويضيف زوايا مدورة على الزر | جربها |
| ui-mini | يجعل زر أصغر | جربها |
| ui-shadow | ويضيف الظلال على الزر | جربها |
إذا كنت ترغب في استخدام أكثر من فئة واحدة، فصل كل فئة مع الفضاء، مثل: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
افتراضيا، <input> أزرار لديها الظل وزوايا مدورة. و <a> و <button> عنصر لا.
للإشارة كاملة من الطبقات المغلق لأساليب مشتركة، زيارة موقعنا مسج موبايل CSS فئات المرجعي .
يوضح الفصل التالي كيفية إرفاق الرموز إلى الأزرار الخاصة بك.