سمات مسج البيانات
يستخدم مسج موبايل HTML5 data-* سمة لخلق "touch-friendly" وجذابة نظرة للهواتف النقالة.
للحصول على قائمة مرجعية أدناه، bold value تحدد القيمة الافتراضية.
زر
إهمال في الإصدار 1.4. استخدام فئات CSS بدلا من ذلك. الارتباطات التشعبية مع data-role="button" . ونصب عناصر زر والروابط في أشرطة الأدوات وحقول الإدخال تلقائيا أزرار، لا حاجة لل data-role="button" .
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-corners | true | false | تحدد ما إذا كان ينبغي أن يكون على زر تدوير زوايا أو لا |
| data-icon | Icons Reference | يحدد رمز الزر. الافتراضي هو أي رمز |
| data-iconpos | left | right | top | bottom | notext | تحديد موضع رمز |
| data-iconshadow | true | false | تحدد ما إذا كان ينبغي أن يكون رمز زر الظلال أم لا |
| data-inline | true | false | يحدد ما إذا كان الزر يجب أن تكون مضمنة أو لا |
| data-mini | true | false | يحدد ما إذا كان الزر يجب أن تكون صغيرة الحجم أو العادية |
| data-shadow | true | false | تحدد ما إذا كان ينبغي أن يكون على الزر الظلال أم لا |
| data-theme | letter (a-z) | يحدد لون موضوع زر |
إلى مجموعة أزرار متعددة، استخدم وعاء مع data-role="controlgroup" السمة جنبا إلى جنب مع data-type="horizontal|vertical" لتحديد ما إذا كان لأزرار مجموعة أفقيا أو عموديا.
مربع
أزواج من التسميات والمدخلات مع type="checkbox" .
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-mini | true | false | تحديد ما إذا كان مربع يجب أن تكون صغيرة الحجم أو العادية |
| data-role | none | يمنع مسج موبايل لمربعات النمط كما أزرار |
| data-theme | letter (a-z) | يحدد لون موضوع مربع |
لمجموعة خانات متعددة، استخدم data-role="controlgroup" جنبا إلى جنب مع data-type="horizontal|vertical" لتحديد ما إذا كانت مجموعة مربعات أفقيا أو عموديا.
منهار
وثمة عنصر رأس تليها أي ترميز HTML داخل حاوية مع data-role="collapsible" .
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-collapsed | true | false | يحدد ما إذا كان المحتوى يجب أن تكون مغلقة أو توسيعها |
| data-collapsed-cue-text | sometext | يحدد بعض النصوص لتوفير التغذية المرتدة مسموعة للمستخدمين مع برنامج قارئ الشاشة. الافتراضي هو "انقر لانهيار محتويات". |
| data-collapsed-icon | Icons Reference | يحدد رمز من زر للطي. الافتراضي هو "زائد" |
| data-content-theme | letter (a-z) | يحدد لون موضوع محتوى قابل للطي. سيتم أيضا إضافة زوايا مدورة إلى محتوى قابل للطي |
| data-expanded-cue-text | sometext | يحدد بعض النصوص لتوفير التغذية المرتدة مسموعة للمستخدمين مع برنامج قارئ الشاشة. الافتراضي هو "انقر فوق لتوسيع محتويات". |
| data-expanded-icon | Icons Reference | يحدد رمز من زر للطي عند توسيع المحتوى. الافتراضي هو "minus" |
| data-iconpos | left | right | top | bottom | تحديد موضع رمز |
| data-inset | true | false | تحدد ما إذا كان ينبغي على غرار الزر للطي مع زوايا مدورة وبعض الهامش أو لا |
| data-mini | true | false | تحديد ما إذا كان أزرار قابلة للطي وينبغي أن تكون صغيرة الحجم أو العادية |
| data-theme | letter (a-z) | يحدد لون موضوع زر للطي |
مجموعة للطي
كتل المحتوى قابلة للطي داخل وعاء مع data-role="collapsibleset" .
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-collapsed-icon | Icons Reference | يحدد رمز من زر للطي. الافتراضي هو "زائد" |
| data-content-theme | letter (a-z) | يحدد لون موضوع المحتوى للطي |
| data-expanded-icon | Icons Reference | يحدد رمز من زر للطي عند توسيع المحتوى. الافتراضي هو "ناقص" |
| data-iconpos | left | right | top | bottom | notext | تحديد موضع رمز |
| data-inset | true | false | تحدد ما إذا كان ينبغي على غرار لcollapsibles مع زوايا مدورة وبعض الهامش أو لا |
| data-mini | true | false | تحديد ما إذا كان أزرار قابلة للطي وينبغي أن تكون صغيرة الحجم أو العادية |
| data-theme | letter (a-z) | يحدد لون موضوع مجموعة قابلة للطي |
محتوى
إهمال في الإصدار 1.4، وسوف يتم إزالتها في 1.5 حاوية مع data-role="content" .
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-theme | letter (a-z) | يحدد لون موضوع المحتوى |
مجموعة التحكم
و <div> أو <fieldset> حاوية مع data-role="controlgroup" . مجموعات متعددة المدخلات التي تطلق على زر من نوع واحد (أزرار القائمة على صلة، وأزرار الراديو وخانات، عناصر محددة). لتجميع مربعات الشكل وأزرار الراديو، و <fieldset> ينصح الحاويات داخل <div> مع "ui-fieldcontain" الطبقة، لتحسين تسمية التصميم.
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-exclude-invisible | true | false | تحدد ما إذا كان لاستبعاد الأطفال غير مرئية في تخصيص زوايا مدورة |
| data-mini | true | false | يحدد ما إذا كانت المجموعة يجب أن تكون صغيرة الحجم أو العادية |
| data-theme | letter (a-z) | يحدد لون موضوع controlgroup |
| data-type | horizontal | vertical | تحديد ما إذا كان يجب عرض مجموعة أفقيا أو عموديا |
الحوار
وعاء مع data-dialog="true" .
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-close-btn | left | right | none | يحدد موقف زر الإغلاق |
| data-close-btn-text | sometext | يحدد نص الزر إغلاق |
| data-corners | true | false | تحدد ما إذا كان ينبغي أن يكون الحوار زوايا مدورة أو لا |
| data-dom-cache | true | false | تحديد ما إذا كان لمسح ذاكرة التخزين مسج DOM أو ليس لصفحات فردية (إذا تم تعيين إلى صحيح، تحتاج لرعاية لإدارة DOM نفسك واختبار شامل على جميع الأجهزة المحمولة) |
| data-overlay-theme | letter (a-z) | يحدد لون تراكب (خلفية) لصفحة الحوار |
| data-theme | letter (a-z) | يحدد لون موضوع الصفحة الحوار |
| data-title | sometext | تحديد عنوان للصفحة الحوار |
زيادة
وعاء مع data-enhance="false" أو data-ajax="false"
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-enhance | true | false | إذا تم تعيين إلى "true" ، و(الافتراضي) مسج الجوال تلقائيا أسلوب الصفحة، مما يجعلها مناسبة للأجهزة المحمولة. إذا لتعيين "كاذبة"، والإطار لن نمط الصفحة |
| data-ajax | true | false | تحدد ما إذا كان لتحميل صفحات عبر اياكس أم لا |
ملاحظة: data-enhance="false" يجب أن تستخدم جنبا إلى جنب مع $.mobile.ignoreContentEnabled=true" لوقف مسج موبايل لصفحات النمط تلقائيا.
أي رابط أو شكل عنصر داخل data-ajax="false" سيتم تجاهل الحاويات عن طريق وظائف الملاحة الإطار عند $.mobile.ignoreContentEnabled تم تعيين إلى true.
الحاويات الميدان
إهمال في الإصدار 1.4، وسوف يتم إزالتها في 1.5. استخدام class="ui-fieldcontain instead" . وعاء مع data-role="fieldcontain" ملفوفة حول زوج عنصر التسمية / النموذج.
شريط أدوات ثابت
وعاء مع data-role="header" أو data-role="footer" جنبا إلى جنب مع data-position="fixed" سمة.
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-disable-page-zoom | true | false | تحديد ما إذا كان المستخدم قادرا على مقياس / تكبير الصفحة أو لا |
| data-fullscreen | true | false | تحديد أشرطة الأدوات إلى وضعه دائما في أعلى و / أو أسفل |
| data-tap-toggle | true | false | تحديد ما إذا كان المستخدم قادرا على تبديل شريط الأدوات-الرؤية على الصنابير / النقرات أو لا |
| data-transition | slide | fade | none | تحديد تأثير انتقال عندما يحدث صنبور / النقرة |
| data-update-page-padding | true | false | تحديد الحشو من كل من أعلى وأسفل الصفحة ليتم تحديثه على تغيير حجم والانتقال و "updatelayout" الأحداث (مسج موبايل دائما بتحديث الحشو على "pageshow" الحدث) |
| data-visible-on-page-show | true | false | يحدد شريط الأدوات-الرؤية عند الصفحة الأم هو مبين |
الوجه التبديل تبديل
و <input type="checkbox"> مع-دور البيانات من "flipswitch" :
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-mini | true | false | تحديد ما إذا كان التبديل يجب أن تكون صغيرة الحجم أو العادية |
| data-on-text | sometext | يحدد "على" نص على التبديل الوجه (الافتراضي هو "On" ) |
| data-off-text | sometext | يحدد "خارج" النص على التبديل الوجه (الافتراضي هو "Off" ) |
تذييل
وعاء مع data-role="footer" .
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-id | sometext | يحدد هوية فريدة من نوعها. اللازمة لالتذييلات المستمرة |
| data-position | inline | fixed | تحديد ما إذا كان تذييل يجب أن تكون متوافقة مع محتوى الصفحة أو يبقى وضع في أسفل |
| data-fullscreen | true | false | تحديد ما إذا كان تذييل يجب دائما وضعه في الجزء السفلي، وعلى محتوى الصفحة (قليلا انظر من خلال) أم لا |
| data-theme | letter (a-z) | يحدد لون موضوع تذييل |
ملاحظة: لتمكين وضع ملء الشاشة، واستخدام data-position="fixed" ثم قم بإضافة data-fullscreen السمة إلى عنصر.
رأس
وعاء مع data-role="header" .
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-id | sometext | يحدد هوية فريدة من نوعها. مطلوب لرؤوس المستمرة |
| data-position | inline | fixed | تحديد ما إذا كان رأس ينبغي أن يكون متوافقا مع محتوى الصفحة أو يبقى وضع في الجزء العلوي |
| data-fullscreen | true | false | تحدد ما إذا كان ينبغي وضع الرأس دائما في أعلى وأكثر محتوى الصفحة (قليلا انظر من خلال) أم لا |
| data-theme | letter (a-z) | يحدد لون موضوع رأس |
ملاحظة: لتمكين وضع ملء الشاشة، واستخدام data-position="fixed" ثم قم بإضافة data-fullscreen السمة إلى عنصر.
المدخلات
المدخلات مع type="text|search|etc." أو textarea elements .
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-clear-btn | true | false | تحديد ما إذا كان يجب أن يكون إدخال "clear" زر |
| data-clear-btn-text | text | يحدد النص للزر "واضح". الافتراضي هو "clear text" |
| data-mini | true | false | تحديد ما إذا كان إدخال يجب أن تكون صغيرة الحجم أو العادية |
| data-role | none | يمنع مسج موبايل لأسلوب المدخلات / تيكستارياس كأزرار |
| data-theme | letter (a-z) | يحدد لون موضوع حقل الإدخال |
صلة
جميع الروابط.
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-ajax | true | false | تحدد ما إذا كان لتحميل صفحات عبر اياكس لتحسين تجربة المستخدم والتحولات. إذا تم رفض، ومسج جوال القيام طلب صفحة عادية. |
| data-direction | reverse | عكس انتقال الرسوم المتحركة (فقط للصفحة أو الحوار) |
| data-dom-cache | true | false | تحديد ما إذا كان لمسح ذاكرة التخزين مسج DOM أو ليس لصفحات فردية (إذا تم تعيين إلى صحيح، تحتاج لرعاية لإدارة DOM نفسك واختبار شامل على جميع الأجهزة المحمولة) |
| data-prefetch | true | false | يحدد ما إذا كان الجلب المسبق الصفحات في DOM بحيث تكون متوفرة عندما يقوم المستخدم بزيارة لهم |
| data-rel | back | dialog | external | popup | يحدد خيارا لكيف يجب أن تتصرف الارتباط. العودة - يتحرك خطوة واحدة إلى الوراء في التاريخ. الحوار - فتح رابط باعتباره الحوار، لا تتبع في التاريخ. الخارجية - للربط إلى مجال آخر. قافزة - يفتح نافذة منبثقة. |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | تحدد كيفية الانتقال من صفحة واحدة إلى أخرى. ترى لدينا مسج التحولات موبايل الفصل. |
| data-position-to | origin | jQuery selector | window | يحدد موضع صناديق المنبثقة. الأصل - افتراضي. مواقف منبثقة على الرابط الذي يفتحه. مسج محدد - مواقف منبثقة على العنصر المحدد. نافذة - مواقف المنبثقة في منتصف الشاشة نافذة. |
قائمة
و <ol> أو <ul> مع data-role="listview" .
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-autodividers | true | false | تحدد ما إذا كان لتقسيم عناصر القائمة أو يتم تلقائيا |
| data-count-theme | letter (a-z) | يحدد لون موضوع فقاعة العد |
| data-divider-theme | letter (a-z) | يحدد لون موضوع قائمة المفرق |
| data-filter | true | false | تحدد ما إذا كان لإضافة مربع البحث في قائمة أم لا |
| data-filter-placeholder | sometext | إهمال في الإصدار 1.4. استخدام السمة نائب HTML بدلا من ذلك. يحدد النص داخل مربع البحث. الافتراضي هو "تصفية العناصر ..." |
| data-filter-theme | letter (a-z) | يحدد لون موضوع مرشح بحث |
| data-icon | Icons Reference | يحدد رمز القائمة |
| data-inset | true | false | تحدد ما إذا كان ينبغي على غرار القائمة مع تدوير الزوايا وبعض الهامش أو لا |
| data-split-icon | Icons Reference | يحدد رمز زر الانقسام. الافتراضي هو "السهم ص" |
| data-split-theme | letter (a-z) | يحدد لون موضوع زر الانقسام |
| data-theme | letter (a-z) | يحدد لون موضوع قائمة |
قائمة الاغراض
و <li> داخل <ol> أو <ul> مع data-role="listview" .
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-filtertext | sometext | يحدد النص للبحث عن عند تصفية العناصر. وبعد ذلك تتم تصفيته هذا النص بدلا من النص قائمة البند الفعلي |
| data-icon | Icons Reference | يحدد رمز عنصر القائمة |
| data-role | list-divider | يحدد مقسم لعناصر القائمة |
| data-theme | letter (a-z) | يحدد لون موضوع عنصر القائمة |
ملاحظة: أيقونة بيانات تنسب العمل فقط على عناصر القائمة مع وصلات.
نافبار
<li> عناصر داخل وعاء مع data-role="navbar" .
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-icon | Icons Reference | يحدد رمز عنصر القائمة |
| data-iconpos | left | right | top | bottom | notext | تحديد موضع رمز |
Navbars ترث موضوع-حامل من الحاويات والدهم. وليس من الممكن لتعيين السمة موضوع البيانات إلى الناف بار. سمة للموضوع البيانات يمكن تعيين كل على حدة الارتباط داخل الناف بار.
صفحة
وعاء مع data-role="page" .
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-dom-cache | true | false | تحديد ما إذا كان لمسح ذاكرة التخزين مسج DOM أو ليس لصفحات فردية (إذا تم تعيين إلى صحيح، تحتاج لرعاية لإدارة DOM نفسك واختبار شامل على جميع الأجهزة المحمولة) |
| data-overlay-theme | letter (a-z) | يحدد لون تراكب (الخلفية) من صفحات الحوار |
| data-theme | letter (a-z) | يحدد لون موضوع الصفحة |
| data-title | sometext | تحديد عنوان الصفحة |
| data-url | url | قيمة لتحديث URL، بدلا من رابط تستخدم لطلب الصفحة |
يظهر فجأة
وعاء مع data-role="popup" .
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-corners | true | false | تحديد ما إذا كان يجب أن يكون المنبثقة زوايا مدورة أو لا |
| data-dismissible | true | false | يحدد ما إذا كان ينبغي إغلاق النوافذ المنبثقة عن طريق النقر خارج منبثقة أو لا |
| data-history | true | false | تحديد ما إذا كان المنبثقة يجب إنشاء متصفح البند التاريخ عند فتحه. إذا تم رفض، فإنه لن إنشاء عنصر التاريخ، وبعد ذلك سوف لن تكون القابلة للإغلاق طريق زر المتصفح "رجوع" |
| data-overlay-theme | letter (a-z) | يحدد لون تراكب (الخلفية) من مربع المنبثقة. الافتراضي هو خلفية شفافة (لا شيء). |
| data-shadow | true | false | تحدد ما إذا كان ينبغي أن يكون مربع منبثقة الظلال أم لا |
| data-theme | letter (a-z) | يحدد لون موضوع مربع المنبثقة. افتراضي الموروثة، "none" يحدد المنبثقة لشفافية |
| data-tolerance | 30, 15, 30, 15 | يحدد المسافة من حواف النافذة ( top, right, bottom, left ) |
مرساة مع data-rel="popup" :
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-position-to | origin | jQuery selector | window | يحدد موضع صناديق المنبثقة. الأصل - افتراضي. مواقف منبثقة على الرابط الذي يفتحه. مسج محدد - مواقف منبثقة على العنصر المحدد. نافذة - مواقف المنبثقة في منتصف الشاشة نافذة. |
| data-rel | popup | لفتح مربع منبثقة |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | تحدد كيفية الانتقال من صفحة واحدة إلى أخرى. ترى لدينا مسج التحولات موبايل الفصل. |
زر الراديو
أزواج من التسميات والمدخلات مع type="radio" .
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-mini | true | false | يحدد ما إذا كان الزر يجب أن تكون صغيرة الحجم أو العادية |
| data-role | none | يمنع مسج موبايل لأسلوب radiobuttons كما أزرار المحسن |
| data-theme | letter (a-z) | يحدد لون موضوع زر الراديو |
إلى أزرار متعددة المجموعة، استخدام data-role="controlgroup" جنبا إلى جنب مع data-type="horizontal|vertical" لتحديد ما إذا كانت مجموعة من الأزرار أفقيا أو عموديا.
اختار
جميع <select> العناصر.
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-icon | Icons Reference | يحدد رمز العنصر حدد. الافتراضي هو "arrow-d" |
| data-iconpos | left | right | top | bottom | notext | تحديد موضع رمز |
| data-inline | true | false | تحديد ما إذا كان عنصر حدد يجب أن تكون مضمنة أو لا |
| data-mini | true | false | تحديد ما إذا كان اختيار ينبغي أن تكون صغيرة الحجم أو العادية |
| data-native-menu | true | false | عندما وضعت إلى false، فإنه يستخدم المخصصة الخاصة اختر القائمة مسج (مستحسن إذا كنت ترغب في القائمة المختارة لعرض نفسه على جميع الأجهزة المحمولة) |
| data-overlay-theme | letter (a-z) | يحدد لون موضوع المخصصة الخاصة اختر القائمة مسج ل(تستخدم جنبا إلى جنب مع data-native-menu="false" ) |
| data-placeholder | true | false | يمكن تعيين على <option> عنصر من عناصر مختارة غير أصلية |
| data-role | none | يمنع مسج موبايل لأسلوب عناصر مختارة كأزرار |
| data-theme | letter (a-z) | يحدد لون موضوع العنصر حدد |
إلى مضاعفات مجموعة تحديد العناصر، استخدام data-role="controlgroup" جنبا إلى جنب مع data-type="horizontal|vertical" لتحديد ما إذا كانت مجموعة العناصر أفقيا أو عموديا.
المتزلج
المدخلات مع type="range" .
| بيانات السمة | القيمة | وصف |
|---|---|---|
| data-highlight | true | false | تحديد ما إذا كان المسار المنزلق ينبغي تسليط الضوء أم لا |
| data-mini | true | false | تحدد ما إذا كان شريط التمرير يجب أن تكون صغيرة الحجم أو العادية |
| data-role | none | يمنع مسج موبايل لأسلوب التحكم المنزلق كما أزرار |
| data-theme | letter (a-z) | يحدد لون موضوع السيطرة على شريط التمرير (المدخلات، والتعامل مع وتعقب) |
| data-track-theme | letter (a-z) | يحدد لون موضوع المسار المنزلق |