خصائص Data jQuery Mobile

jQuery Data Properties

استخدام jQuery Mobile لإنشاء تصميمات جذابة وجذابة لللمس باستخدام خصائص HTML5 data-* لاجهزة الأجهزة المحمولة.

في القائمة المرجعية أدناه، القيم المظللة تشير إلى القيم الافتراضية.

Button

روابط تحتوي على data-role="button". يتم تعيين عناصر زر في الشريط الأدنى وأزرار الاتصال وحقول الإدخال تلقائيًا بنمط الزر، دون الحاجة إلى data-role="button".

خصائص Data القيمة وصف
data-corners صحيح | خطأ تحديد ما إذا كان الزر يحتوي على زوايا مستديرة.
data-icon مرجع الرموز تحديد رمز الزر. يتم تعيين الزر بدون رمز بشكل افتراضي.
data-iconpos اليسار | اليمين | الاعلى | الأسفل | بدون نص يحدد موقع الرمز.
data-iconshadow صحيح | خطأ تحديد ما إذا كان رمز الزر يحتوي على ظل.
data-inline صحيح | خطأ تحديد ما إذا كان الزر داخل سطر.
data-mini صحيح | خطأ تحديد ما إذا كان حجم الزر صغيرًا أم عاديًا.
data-shadow صحيح | خطأ تحديد ما إذا كان الزر يحتوي على ظل.
data-theme حرف (a-z) تحديد لون الموضوع للزر.

نصيحة:إذا كنت ترغب في تجميع عدة أزرار، استخدم حاوية تحتوي على خصائص data-role="controlgroup" و data-type="horizontal|vertical" لتحديد ما إذا كانت الأزرار معقدة بشكل أفقي أو عمودي.

Checkbox

الوسم label وtype="checkbox" من المدخلات هي زوجية. سيتم تعيينها تلقائيًا كنوع البوتون دون الحاجة إلى data-role.

خصائص Data القيمة وصف
data-mini صحيح | خطأ تحديد حجم مربعات المزدوجة كصغير أو حجم عادي.
data-role لا شيء منع jQuery Mobile من تعيين مربعات المزدوجة كنوع البوتون.
data-theme حرف (a-z) تحديد لون موضوع المربعات المزدوجة.

نصيحة:لجمع عدة مربعات مزدوجة، استخدم data-role="controlgroup" وdata-type="horizontal|vertical" لتحديد عرض المربعات المزدوجة بشكل أفقي أو عمودي.

القابلة للطي

عنصر العنوان، يتبعه أي HTML علامة تقع داخل المستند الذي يحتوي على خاصية data-role="collapsible".

خصائص Data القيمة وصف
data-collapsed صحيح | خطأ تحديد ما إذا كان يجب على المحتوى إغلاق أو فتح.
data-collapsed-icon مرجع الرموز تحديد أيقونة زر القابلة للطي. الافتراضي هو "الصليب".
data-content-theme حرف (a-z) تحديد لون موضوع المحتوى القابل للطي. سيتم أيضًا إضافة زوايا الحواف.
data-expanded-icon مرجع الرموز تحديد أيقونة زر القابلة للطي عند فتح المحتوى. الافتراضي هو "الناقص".
data-iconpos اليسار | اليمين | الاعلى | الأسفل يحدد موقع الرمز.
data-inset صحيح | خطأ تحديد ما إذا كان يمكن للقابلة للطي امتلاك أنماط زوايا الحواف والهوامش.
data-mini صحيح | خطأ تحديد حجم زر القابلة للطي كصغير أو حجم عادي.
data-theme حرف (a-z) تحديد لون موضوع زر القابلة للطي.

مجموعة القابلة للطي

المحتوى القابل للطي داخل المستند الذي يحتوي على خاصية data-role="collapsible-set".

خصائص Data القيمة وصف
data-collapsed-icon مرجع الرموز تحديد أيقونة زر القابلة للطي. الافتراضي هو "الصليب".
data-content-theme حرف (a-z) تحديد لون موضوع المحتوى القابل للطي.
data-expanded-icon مرجع الرموز تحديد أيقونة زر القابلة للطي عند فتح المحتوى. الافتراضي هو "الناقص".
data-iconpos اليسار | اليمين | الاعلى | الأسفل | بدون نص يحدد موقع الرمز.
data-inset صحيح | خطأ تحديد ما إذا كان يمكن للقابلة للطي امتلاك أنماط زوايا الحواف والهوامش.
data-mini صحيح | خطأ تحديد حجم زر القابلة للطي كصغير أو حجم عادي.
data-theme حرف (a-z) تحديد لون موضوع مجموعة القابلة للطي.

المحتوى

المستند الذي يحتوي على خاصية data-role="content".

خصائص Data القيمة وصف
data-theme حرف (a-z) تحديد لون موضوع المحتوى. الافتراضي هو "c".

الجمع

المستندات التي تحتوي على خاصية data-role="controlgroup" أو <fieldset>. جمع عدة أنواع من المدخلات البوتونية (استنادًا إلى الروابط، المربعات المفردة، المربعات المزدوجة، قائمة الاختيار).

خصائص Data القيمة وصف
data-mini صحيح | خطأ تحديد حجم الجمع كصغير أو حجم عادي.
data-type أفقي | عمودي تحديد عرض الجمع بشكل أفقي أو عمودي.

النافذة

المستند الذي يحتوي على خاصية data-role="dialog" أو رابط يحتوي على خاصية data-rel="dialog".

خصائص Data القيمة وصف
data-close-btn-text sometext يُحدد النص الخاص بالزر لإغلاق النافذة الحوارية
data-dom-cache صحيح | خطأ يُحدد ما إذا كان يجب مسح jQuery DOM المخزن للصفحة الفردية (إذا تم تعيينه على true،فسيكون من الضروري إدارة DOM بشكل صحيح والتحقق من جميع الأجهزة المحمولة بشكل شامل)
data-overlay-theme حرف (a-z) تحديد لون الت叠加 (الخلفية) للصفحة الحوارية.
data-theme حرف (a-z) يُحدد لون الموضوع لصفحة الحوار
data-title sometext يُحدد عنوان صفحة الحوار

Enhancement

المعامل الذي يحتوي على خصائص data-enhance="false" أو data-ajax="false"

خصائص Data القيمة وصف
data-enhance صحيح | خطأ إذا تم تعيينه على "true"،(القيمة الافتراضية) سيقوم jQuery Mobile تلقائيًا بإضافة أنماط الصفحة لجعلها أكثر ملاءمة للهواتف المحمولة. إذا تم تعيينه على "false"،فإن الهيكل لن يضيف أنماط الصفحة
data-ajax صحيح | خطأ يُحدد ما إذا كان يتم تحميل الصفحة عبر AJAX

ملاحظة:data-enhance="false" مثل استخدام $.mobile.ignoreContentEnabled=true" لمنع jQuery Mobile من إضافة أنماط الصفحة تلقائيًا

عندما يتم تعيين $.mobile.ignoreContentEnabled إلى true، يتم تجاهل أي رابط أو عنصر نموذج في المعامل الذي يحتوي على data-ajax="false" من قبل وظيفة التوجيه الخاصة بالهيكل

Fieldcontainer

المعامل الذي يحتوي على data-role="fieldcontain" لlabel/form

شريط الأدوات الثابت

المعامل الذي يحتوي على خصائص data-role="header" أو data-role="footer" وdata-position="fixed"

خصائص Data القيمة وصف
data-disable-page-zoom صحيح | خطأ يُحدد ما إذا كان المستخدم يمكنه تكبير الصفحة
data-fullscreen صحيح | خطأ يُحدد ما إذا كانت شريط الأدوات دائمًا في الأعلى أو الأسفل
data-tap-toggle صحيح | خطأ يُحدد ما إذا كان المستخدم يمكنه التبديل بين رؤية شريط الأدوات بالضغط أو النقر
data-transition slide | fade | none يُحدد تأثير التحول عند الضغط أو النقر
data-update-page-padding صحيح | خطأ يُحدد عند حدوث أحداث resize،transition،و "updatelayout" لتحديث الأنصاف العلوية والسفلية وال جانبية للصفحة (jQuery Mobile دائمًا يُحدد الأنصاف الداخلية عند حدوث أحداث "pageshow")
data-visible-on-page-show صحيح | خطأ يُحدد في العرض في شريط الأدوات لصفحة الأب

مفتاح التبديل المقلوب

عنصر <select> يحتوي على خاصية data-role="slider" واثنين من عناصر <option>.

خصائص Data القيمة وصف
data-mini صحيح | خطأ يحدد ما إذا كان المفتاح صغيرًا أم كبيرًا.
data-role لا شيء يمنع jQuery Mobile من تعيين مفتاح التبديل كنوع زر.
data-theme حرف (a-z) يحدد لون موضوع مفتاح التبديل.
data-track-theme حرف (a-z) يحدد لون موضوع المسار.

السوادية

المستودع الذي يحتوي على خاصية data-role="footer".

خصائص Data القيمة وصف
data-id sometext يحدد ID الفريد. ضروري للسواديات الثابتة.
data-position inline | fixed يحدد ما إذا كانت الرأس والعنصر محتوى الصفحة تكون علاقة سلسلة، أو تبقى في الأسفل.
data-fullscreen صحيح | خطأ يحدد ما إذا كانت الصفحة يجب أن تكون دائمًا في الأسفل وتغطي محتوى الصفحة (شفاف قليلاً).
data-theme حرف (a-z) يحدد لون موضوع الرأس. الافتراضي هو "a".

ملاحظة:لتمكين التركيز الكامل، استخدم data-position="fixed" ثم أضف خاصية data-fullscreen إلى العنصر.

الرأس

المستودع الذي يحتوي على data-role="header".

خصائص Data القيمة وصف
data-id sometext يحدد ID الفريد. ضروري للرؤوس الثابتة.
data-position inline | fixed يحدد ما إذا كانت الرأس والعنصر محتوى الصفحة تكون علاقة سلسلة، أو تبقى في الأعلى.
data-fullscreen صحيح | خطأ يحدد ما إذا كانت الصفحة يجب أن تكون دائمًا في الأعلى وتغطي محتوى الصفحة (شفاف قليلاً).
data-theme حرف (a-z) يحدد لون موضوع الرأس. الافتراضي هو "a".

ملاحظة:لتمكين التركيز الكامل، استخدم data-position="fixed" ثم أضف خاصية data-fullscreen إلى العنصر.

الرابط

جميع الروابط، بما في ذلك الروابط التي تحتوي على data-role="button" وأزرار تقديم النماذج.

خصائص Data القيمة وصف
data-ajax صحيح | خطأ يحدد ما إذا كان يجب تحميل الصفحة عن طريق AJAX لتحسين تجربة المستخدم والتأثير.
data-direction استعادت استعادت تأثير الحركة (يستخدم فقط للصفحات أو النوافذ الحوارية)
data-dom-cache صحيح | خطأ تحديد ما إذا كان يجب مسح مخزن jQuery DOM للصفحات الفردية (إذا تم تعيينه على true، فلاحظ إدارة DOM، وتجربة جميع الأجهزة المحمولة بشكل شامل).
data-prefetch صحيح | خطأ يحدد ما إذا كان يجب تحميل الصفحة مسبقًا إلى DOM لتكون متاحة عند زيارتها من قبل المستخدم.
data-rel الرجوع | نافذة حوارية | خارجي | تبويب يحدد الخيارات المتعلقة بكيفية سلوك الروابط. الرجوع - يتحرك إلى الوراء خطوة واحدة في التاريخ. نافذة حوارية - يفتح الصفحة كنافذة حوارية، لا يتم تسجيلها في التاريخ. خارجي - يصل إلى مجال آخر. يفتح - يفتح نافذة التبويب.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none تحديد كيفية الانتقال من صفحة إلى صفحة أخرى. شاهد انتقالات jQuery Mobile.
data-position-to origin | jQuery selector | window تحديد موقع النافذة الإضافية. النقطة الأصلية - افتراضي. يظهر في نافذة التبويب عند فتح الرابط. jQuery selector - يظهر على العنصر المحدد. Window - يظهر في منتصف شاشة النافذة.

List

عنصر <ol> أو <ul> الذي يحتوي على خاصية data-role="listview".

خصائص Data القيمة وصف
data-autodividers صحيح | خطأ يحدد ما إذا كان يتم فرز عناصر القائمة تلقائيًا.
data-count-theme حرف (a-z) يحدد لون الموضوع للبقعة العددية. الافتراضي هو "c".
data-divider-theme حرف (a-z) يحدد لون الموضوع لحاجز القائمة. الافتراضي هو "b".
data-filter صحيح | خطأ يحدد ما إذا كان يتم إضافة مربع الفرز في القائمة.
data-filter-placeholder sometext يحدد النص في مربع الفرز. الافتراضي هو "Filter items...".
data-filter-theme حرف (a-z) يحدد لون الموضوع لبرنامج الفرز. الافتراضي هو "c".
data-icon مرجع الرموز يحدد رمز القائمة.
data-inset صحيح | خطأ يحدد ما إذا كان يتم إضافة زوايا رonde و边际 الوسائط للقائمة.
data-split-icon مرجع الرموز يحدد رمز زر المقطوع. الافتراضي هو "arrow-r".
data-split-theme حرف (a-z) يحدد لون الموضوع للزر المقطوع. الافتراضي هو "b".
data-theme حرف (a-z) يحدد لون الموضوع للقائمة.

List item

عنصر <li> داخل <ol> أو <ul> الذي يحتوي على خاصية data-role="listview".

خصائص Data القيمة وصف
data-filtertext sometext يحدد النص الذي سيتم البحث عنه عند فرز العناصر. هذا النص وليس نص العنصر الفعلي سيتم البحث عنه.
data-icon مرجع الرموز يحدد رمز عنصر القائمة.
data-role list-divider يحدد حاجز القائمة.
data-theme حرف (a-z) يحدد لون الموضوع لعنصر القائمة.

ملاحظة:خاصية data-icon تعمل فقط على عناصر القائمة التي تحتوي على روابط.

Navbar

عنصر <li> داخل الوعاء الذي يحتوي على خاصية data-role="navbar".

خصائص Data القيمة وصف
data-icon مرجع الرموز يحدد رمز عنصر القائمة.
data-iconpos اليسار | اليمين | الاعلى | الأسفل | بدون نص يحدد موقع الرمز.

نصيحة:يورث المخطط الموضوعي theme-swatch من الوعاء الأب. لا يمكن تعيين خاصية data-theme للنافذة. يمكن تعيين خاصية data-theme لكل رابط في navbar بشكل مستقل. يمكن تعيين خاصية data-theme لكل رابط في navbar بشكل مستقل.

Page

المساحة التي تحتوي على خاصية data-role="page".

خصائص Data القيمة وصف
data-add-back-btn صحيح | خطأ إضافة زر الخلفية تلقائيًا، يستخدم فقط في العنوان.
data-back-btn-text sometext يحدد نص زر الخلفية.
data-back-btn-theme حرف (a-z) يحدد لون الموضوع للزر الخلفي.
data-close-btn-text حرف (a-z) يحدد نص زر إغلاق المحادثة.
data-dom-cache صحيح | خطأ تحديد ما إذا كان يجب مسح مخزن jQuery DOM للصفحات الفردية (إذا تم تعيينه على true، فلاحظ إدارة DOM، وتجربة جميع الأجهزة المحمولة بشكل شامل).
data-overlay-theme حرف (a-z) تحديد لون الت叠加 (الخلفية) للصفحة الحوارية.
data-theme حرف (a-z) تحديد لون الموضوع للصفحة. افتراضيًا، هو "c".
data-title sometext تحديد عنوان الصفحة.
data-url url يستخدم هذا القيمة لتحديث URL وليس لطلب الصفحة.

Popup

المعطيات التي تحتوي على خاصية data-role="popup".

خصائص Data القيمة وصف
data-corners صحيح | خطأ تحديد ما إذا كانت النافذة الإضافية تحتوي على زوايا مستديرة.
data-overlay-theme حرف (a-z) تحديد لون الت叠加 (الخلفية) للنافذة الإضافية. افتراضيًا، يكون خلفية شفافة (none).
data-shadow صحيح | خطأ تحديد ما إذا كانت النافذة الإضافية تحتوي على ظل.
data-theme حرف (a-z) تحديد لون الموضوع للنافذة الإضافية. افتراضيًا، يُنقل هذا اللون.
data-tolerance 30, 15, 30, 15 تحديد المسافة من حافة النافذة (top, right, bottom, left).

الروابط التي تحتوي على خاصية data-rel="popup".

خصائص Data القيمة وصف
data-position-to origin | jQuery selector | window تحديد موقع النافذة الإضافية. Origin - افتراضي. يتم فتح النافذة الإضافية على الرابط الذي فتحها. jQuery selector - يتم فتح النافذة الإضافية على العنصر المحدد. Window - يتم فتح النافذة الإضافية في منتصف شاشة النافذة.
data-rel popup لفتح نافذة إضافية.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none تحديد كيفية الانتقال من صفحة إلى صفحة أخرى. شاهد انتقالات jQuery Mobile.

زر اختياري

العلامة مع input ذات نوع "radio" سيتم تحديد نمطها كزر تلقائيًا دون الحاجة إلى data-role.

خصائص Data القيمة وصف
data-mini صحيح | خطأ تحديد ما إذا كانت الأزرار صغيرة أو حجمها عادي.
data-role لا شيء تحديد أن الزر اختياري سيكون من النمط المزود بجافا سكريبت موبايل.
data-theme حرف (a-z) تحديد لون الموضوع للأزرار الاختيارية.

نصيحة:لإضافة عدة أزرار اختيارية، استخدم data-role="controlgroup" و data-type="horizontal|vertical" لتحديد ما إذا كانت الأزرار ستكون موزعة أفقيًا أو عموديًا.

Select

جميع عناصر <select>. سيتم تعيينها تلقائيًا لنمط الزر دون الحاجة إلى date-role.

خصائص Data القيمة وصف
data-icon مرجع الرموز يحدد رمز السلبي. الافتراضي هو "arrow-d".
data-iconpos اليسار | اليمين | الاعلى | الأسفل | بدون نص يحدد موقع الرمز.
data-inline صحيح | خطأ يحدد ما إذا كان السلبي داخليًا.
data-mini صحيح | خطأ يحدد ما إذا كان السلبي صغيرًا أم كبيرًا.
data-native-menu صحيح | خطأ إذا تم تعيينه على false، سيتم استخدام قائمة اختيار مخصصة jQuery الخاصة بها (إذا كنت ترغب في أن يكون لقائمة الاختيار مظهر متسق على جميع الأجهزة المحمولة، فنوصي باستخدامه).
data-overlay-theme حرف (a-z) يحدد لون قائمة اختيار jQuery مخصصة (يستخدم مع data-native-menu="false").
data-placeholder صحيح | خطأ يمكن تعيينه على عناصر <option> غير الأصلية.
data-role لا شيء يحدد نمط السلبي في jQuery Mobile.
data-theme حرف (a-z) يحدد لون السلبي.

نصيحة:لدمج عدة عناصر select، استخدم data-role="controlgroup" و data-type="horizontal|vertical" لتحديد ما إذا كان يجب دمج العنصر بشكل أفقي أو عمودي.

Slider

عنصر input الذي يحتوي على type="range" سيتم تعيينه تلقائيًا لنمط الزر، دون الحاجة إلى data-role.

خصائص Data القيمة وصف
data-highlight صحيح | خطأ يحدد ما إذا كان مسار السلبي يتميز بالتوهج.
data-mini صحيح | خطأ يحدد ما إذا كان السلبي صغيرًا أم كبيرًا.
data-role لا شيء يحدد نمط زر إعداد السلبي في jQuery Mobile.
data-theme حرف (a-z) يحدد لون التحكم في السلبي (input، يد التحكم و مسار).
data-track-theme حرف (a-z) يحدد لون مسار السلبي.

مستخدمو النصوص والنصوص

عنصر input أو textarea الذي يحتوي على type="text|search|etc." سيتم تعيينه تلقائيًا للنمط، دون الحاجة إلى data-role.

خصائص Data القيمة وصف
data-mini صحيح | خطأ تحديد ما إذا كان عنصر الإدخال صغيرًا أم كبيرًا.
data-role لا شيء وضع jQuery Mobile لجعل input/textarea يظهر كزرار.
data-theme حرف (a-z) تحديد لون موضوع حقل الإدخال المحدد.