ویژگی‌های Data jQuery Mobile

ویژگی‌های داده jQuery

jQuery Mobile از ویژگی‌های data-* از HTML5 برای ایجاد ظاهری زیبا و

در لیست مرجع زیر، مقادیر تیره‌فام مقادیر پیش‌فرض را مشخص می‌کنند.

Button

پیوند‌های فراتر با ویژگی data-role="button". عناصر دکمه در نوار ابزار و پیوندها و فیلدهای ورودی به صورت خودکار استایل دکمه را تنظیم می‌کنند، بنابراین نیازی به data-role="button" نیست.

Data Properties مقدار توضیح
data-corners true | false تعیین اینکه آیا دکمه دارای گوشه‌های گرد است یا خیر.
data-icon منابع آیکون‌ها تعیین آیکون دکمه. پیش‌فرض بدون آیکون است.
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" استفاده کنید تا تعیین کنید که آیا دکمه‌ها به صورت افقی یا عمودی ترکیب شوند.

Checkbox

برچسب و input با type="checkbox" باید جفت باشند. به صورت خودکار به سبک دکمه تبدیل می‌شوند و نیازی به data-role نیست.

Data Properties مقدار توضیح
data-mini true | false تعیین اینکه مربع‌های انتخاب باید کوچک یا اندازه معمولی داشته باشند.
data-role none جلوگیری از تبدیل مربع‌های انتخاب به سبک دکمه توسط jQuery Mobile.
data-theme letter (a-z) تعیین رنگ موضوع مربع‌های انتخاب.

توضیح:برای ترکیب چندین مربع انتخاب، از data-role="controlgroup" و data-type="horizontal|vertical" استفاده کنید تا تعیین کنید که مربع‌های انتخاب باید افقی یا عمودی ترکیب شوند.

قابل تا کردن

عنصر عنوان، که پس از آن هر نوع برچسب HTML قرار دارد که در محفظه‌ای با ویژگی data-role="collapsible" قرار دارد.

Data Properties مقدار توضیح
data-collapsed true | false تعیین اینکه محتوا باید بسته یا باز باشد.
data-collapsed-icon منابع آیکون‌ها تعیین آیکون دکمه‌های قابل تا کردن. پیش‌فرض "جمع" است.
data-content-theme letter (a-z) تعیین رنگ موضوع محتوای قابل تا کردن. همچنین به محتوای قابل تا کردن گوشه‌های گرد اضافه می‌شود.
data-expanded-icon منابع آیکون‌ها تعیین آیکون دکمه‌های قابل تا کردن هنگامی که محتوا باز است. پیش‌فرض "مینوس" است.
data-iconpos چپ | راست | بالا | پایین تعیین موقعیت آیکون.
data-inset true | false تعیین اینکه آیا دکمه‌های قابل تا کردن باید دارای گوشه‌های گرد و حاشیه باشند.
data-mini true | false تعیین اینکه دکمه‌های قابل تا کردن باید کوچک یا اندازه معمولی داشته باشند.
data-theme letter (a-z) تعیین رنگ موضوع دکمه‌های قابل تا کردن.

مجموعه قابل تا کردن

محتوای قابل تا کردن در محفظه‌ای با ویژگی data-role="collapsible-set".

Data Properties مقدار توضیح
data-collapsed-icon منابع آیکون‌ها تعیین آیکون دکمه‌های قابل تا کردن. پیش‌فرض "جمع" است.
data-content-theme letter (a-z) تعیین رنگ موضوع محتوای قابل تا کردن.
data-expanded-icon منابع آیکون‌ها تعیین آیکون دکمه‌های قابل تا کردن هنگامی که محتوا باز است. پیش‌فرض "مینوس" است.
data-iconpos left | right | top | bottom | notext تعیین موقعیت آیکون.
data-inset true | false تعیین اینکه آیا مجموعه‌های قابل تا کردن باید دارای گوشه‌های گرد و حاشیه باشند.
data-mini true | false تعیین اینکه دکمه‌های قابل تا کردن باید کوچک یا اندازه معمولی داشته باشند.
data-theme letter (a-z) تعیین رنگ موضوع مجموعه‌های قابل تا کردن.

محتوا

محفظه‌ای با ویژگی data-role="content".

Data Properties مقدار توضیح
data-theme letter (a-z) تعیین رنگ موضوع محتوا. پیش‌فرض "c" است.

گروه کنترل

محفظه‌ای با ویژگی data-role="controlgroup" یا <div> یا <fieldset>. ترکیب چندین ورودی با یک نوع طراحی یکپارچه (بر اساس لینک‌های دکمه، انتخاب‌های رادیویی، مربع انتخاب و منوهای انتخاب).

Data Properties مقدار توضیح
data-mini true | false تعیین اینکه ترکیب باید کوچک یا اندازه معمولی داشته باشد.
data-type افقی | عمودی تعیین اینکه ترکیب باید افقی یا عمودی نمایش داده شود.

درگاه

محفظه‌ای که دارای ویژگی data-role="dialog" است یا لینک‌هایی که دارای ویژگی data-rel="dialog" هستند.

Data Properties مقدار توضیح
data-close-btn-text sometext تعریف متن کلید بستن برای دیالوگ.
data-dom-cache true | false تعریف اینکه آیا باید jQuery DOM cache برای صفحه‌های خاص پاک شود (اگر به true تنظیم شود، باید به مدیریت DOM توجه شود و تمام دستگاه‌های موبایل به طور کامل تست شوند).
data-overlay-theme letter (a-z) رنگ پس‌زمینه صفحه‌های صحبت را تعیین کنید.
data-theme letter (a-z) تعریف رنگ موضوع صفحه صحبت.
data-title sometext تعریف عنوان صفحه صحبت.

Enhancement

قابلیت‌هایی که ویژگی data-enhance="false" یا data-ajax="false" دارند.

Data Properties مقدار توضیح
data-enhance true | false اگر به "true" تنظیم شود، (پیش‌فرض) jQuery Mobile به طور خودکار استایل‌های صفحه را اضافه می‌کند تا مناسب‌تر برای دستگاه‌های موبایل باشد. اگر به "false" تنظیم شود، فریم‌ورک استایل‌های صفحه را تنظیم نمی‌کند.
data-ajax true | false تعریف اینکه آیا صفحه به وسیله AJAX بارگذاری می‌شود.

توضیح:data-enhance="false" به عنوان مثال با استفاده از $.mobile.ignoreContentEnabled=true"، برای جلوگیری از اضافه کردن خودکار استایل‌های صفحه توسط jQuery Mobile استفاده می‌شود.

وقتی که $.mobile.ignoreContentEnabled به true تنظیم شود، هر لینک یا عنصر فرم در قابلیت‌های data-ajax="false"، توسط قابلیت‌های هدایت فریم‌ورک نادیده گرفته می‌شود.

Fieldcontainer

بسته‌بندی عناصر label/form با ویژگی data-role="fieldcontain".

نوار ابزار ثابت

قابلیت‌های دارای ویژگی data-role="header" یا data-role="footer" و ویژگی data-position="fixed".

Data Properties مقدار توضیح
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 تعریف بروزرسانی فضای بیرونی صفحه در زمان وقوع رویداد resize، transition و "updatelayout" (jQuery Mobile همیشه در زمان وقوع رویداد "pageshow" فضای داخلی را بروزرسانی می‌کند).
data-visible-on-page-show true | false تعریف可见یت نوار ابزار در صفحه پدر نمایش داده می‌شود.

کلید تغییر وضعیت چرخش

یک عنصر <select> با ویژگی data-role="slider" و دو عنصر <option>.

Data Properties مقدار توضیح
data-mini true | false تعیین می‌کند کلیدهای انتخاب کوچک یا اندازه معمولی هستند.
data-role none از اینکه jQuery Mobile کلیدهای انتخاب را به سبک دکمه‌ها تبدیل کند، جلوگیری می‌کند.
data-theme letter (a-z) تعیین رنگ موضوع کلیدهای انتخاب.
data-track-theme letter (a-z) تعیین رنگ موضوع مسیر.

پایش صفحه

محیطی با ویژگی data-role="footer".

Data Properties مقدار توضیح
data-id sometext تعیین ID منحصر به فرد. برای پایش‌های ثابت ضروری است.
data-position inline | fixed تعیین می‌کند پایش صفحه با محتوای صفحه رابطه درون‌محلی دارد یا در پایین باقی می‌ماند.
data-fullscreen true | false تعیین می‌کند آیا پایش صفحه همیشه در پایین قرار دارد و محتوای صفحه را پوشش می‌دهد (کمی شفاف).
data-theme letter (a-z) تعیین رنگ موضوع پایش صفحه. پیش‌فرض "a" است.

توضیح:برای فعال کردن قرارگیری کامل‌ صفحه، از data-position="fixed" استفاده کنید و سپس ویژگی data-fullscreen را به عنصر اضافه کنید.

سر صفحه

محیطی با data-role="header".

Data Properties مقدار توضیح
data-id sometext تعیین ID منحصر به فرد. برای سربرگ‌های ثابت ضروری است.
data-position inline | fixed تعیین می‌کند سر صفحه با محتوای صفحه رابطه درون‌محلی دارد یا در بالا باقی می‌ماند.
data-fullscreen true | false تعیین می‌کند آیا صفحه همیشه در بالا قرار دارد و محتوای صفحه را پوشش می‌دهد (کمی شفاف).
data-theme letter (a-z) تعیین رنگ موضوع سر صفحه. پیش‌فرض "a" است.

توضیح:برای فعال کردن قرارگیری کامل‌ صفحه، از data-position="fixed" استفاده کنید و سپس ویژگی data-fullscreen را به عنصر اضافه کنید.

لینک

همه لینک‌ها، از جمله لینک‌هایی با data-role="button" و دکمه‌های ارسال فرم.

Data Properties مقدار توضیح
data-ajax true | false تعیین می‌کند آیا صفحه از طریق AJAX بارگذاری می‌شود تا تجربه کاربری و انتقال بهبود یابد. اگر تنظیم به false باشد، jQuery Mobile درخواست صفحه معمولی را انجام می‌دهد.
data-direction reverse پایین آمدن انیمیشن انتقال (فقط برای صفحه یا گفتگو)
data-dom-cache true | false تعیین کنید که آیا باید jQuery DOM Cache برای صفحه‌های خاص پاک شود یا خیر (اگر به "true" تنظیم شود، باید به مدیریت DOM توجه کنید و تمام دستگاه‌های موبایل را به طور کامل تست کنید).
data-prefetch true | false تعیین می‌کند آیا صفحه پیش‌بینی می‌شود تا در DOM قرار گیرد و در دسترس کاربر باشد.
data-rel برگشت | گفتگو | بیرونی | پاپ‌آپ گزینه‌هایی برای تعیین نحوه رفتار لینک‌ها تعیین می‌کند. برگشت - یک قدم به عقب در تاریخچه حرکت می‌کند. گفتگو - صفحه را به عنوان یک گفتگو باز می‌کند، در تاریخچه ثبت نمی‌شود. بیرونی - به یک دامنه دیگر متصل می‌شود. باز کردن - پاپ‌آپ باز می‌شود.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none تعیین کنید که چگونه از یک صفحه به صفحه بعدی انتقال دهید. به jQuery Mobile Transition مراجعه کنید.
data-position-to origin | jQuery selector | window تعیین موقعیت پنجره پاپ‌آپ. مبدأ - پیش‌فرض. در باز کردن لینک آن پاپ‌آپ باز می‌شود. jQuery selector - در عنصر مشخص شده ظاهر می‌شود. Window - در وسط صفحه‌ی پنجره‌ای ظاهر می‌شود.

List

آیتم‌های <ol> یا <ul> با ویژگی data-role="listview".

Data Properties مقدار توضیح
data-autodividers true | false تعریف اینکه آیا باید آیتم‌های لیست به صورت خودکار تقسیم شوند یا خیر.
data-count-theme letter (a-z) تعریف رنگ موضوعی کفه‌های شمارش. پیش‌فرض "c" است.
data-divider-theme letter (a-z) تعریف رنگ موضوعی خط‌کش لیست. پیش‌فرض "b" است.
data-filter true | false تعریف اینکه آیا باید جعبه جستجو در لیست اضافه شود یا خیر.
data-filter-placeholder sometext تعریف متن در جعبه جستجو. پیش‌فرض "Filter items..." است.
data-filter-theme letter (a-z) تعریف رنگ موضوعی برنامه فیلتر جستجو. پیش‌فرض "c" است.
data-icon منابع آیکون‌ها تعریف آیکون لیست.
data-inset true | false تعریف اینکه آیا باید سبک گوشه‌ها و حاشیه‌های لیست اضافه شود یا خیر.
data-split-icon منابع آیکون‌ها تعریف آیکون دکمه تقسیم. پیش‌فرض "arrow-r" است.
data-split-theme letter (a-z) تعریف رنگ موضوعی دکمه تقسیم. پیش‌فرض "b" است.
data-theme letter (a-z) تعریف رنگ موضوعی لیست.

List item

آیتم‌های <li> در داخل <ol> یا <ul> با ویژگی data-role="listview".

Data Properties مقدار توضیح
data-filtertext sometext تعریف متن جستجو در عناصر فیلتر. این متن به جای متن واقعی آیتم‌های لیست جستجو خواهد شد.
data-icon منابع آیکون‌ها تعریف آیکون‌های آیتم‌های لیست.
data-role list-divider تعریف خط‌کش آیتم‌های لیست.
data-theme letter (a-z) تعریف رنگ موضوعی آیتم‌های لیست.

توضیح:ویژگی data-icon فقط برای آیتم‌های لیستی که شامل لینک هستند، قابل استفاده است.

Navbar

عناصر <li> در داخل محیطی با ویژگی data-role="navbar".

Data Properties مقدار توضیح
data-icon منابع آیکون‌ها تعریف آیکون‌های آیتم‌های لیست.
data-iconpos left | right | top | bottom | notext تعیین موقعیت آیکون.

توضیح:نوارنавیگاتیون از رنگ theme-swatch والد خود ارث می‌برد. تنظیم ویژگی data-theme برای نوارنویگاتیون ممکن نیست. می‌توان ویژگی data-theme را به هر لینک در navbar به طور جداگانه تنظیم کرد.

Page

محیطی با ویژگی data-role="page".

Data Properties مقدار توضیح
data-add-back-btn true | false افزودن خودکار دکمه بازگشت، فقط برای سربرگ استفاده می‌شود.
data-back-btn-text sometext تعریف متن دکمه بازگشت.
data-back-btn-theme letter (a-z) تعریف رنگ موضوعی دکمه بازگشت.
data-close-btn-text letter (a-z) تعریف متن دکمه بستن در محاوره.
data-dom-cache true | false تعیین کنید که آیا باید jQuery DOM Cache برای صفحه‌های خاص پاک شود یا خیر (اگر به "true" تنظیم شود، باید به مدیریت DOM توجه کنید و تمام دستگاه‌های موبایل را به طور کامل تست کنید).
data-overlay-theme letter (a-z) رنگ پس‌زمینه صفحه‌های صحبت را تعیین کنید.
data-theme letter (a-z) رنگ موضوع صفحه را تعیین کنید. پیش‌فرض "c" است.
data-title sometext عنوان صفحه را تعیین کنید.
data-url url این مقدار برای به‌روزرسانی URL استفاده می‌شود، نه برای درخواست صفحه.

Popup

مح容器 با attribute data-role="popup":

Data Properties مقدار توضیح
data-corners true | false تعیین کنید که آیا پنجره پاپ‌آپ دارای گوشه‌های گرد است یا خیر.
data-overlay-theme letter (a-z) رنگ پس‌زمینه پنجره پاپ‌آپ را تعیین کنید. پیش‌فرض شفاف است (none).
data-shadow true | false تعیین کنید که آیا پنجره پاپ‌آپ سایه دارد یا خیر.
data-theme letter (a-z) رنگ موضوع پنجره پاپ‌آپ را تعیین کنید. پیش‌فرض است که از رنگ مادر استفاده می‌شود، "none" برای شفاف تنظیم می‌شود.
data-tolerance 30, 15, 30, 15 تعیین فاصله از لبه‌های پنجره (top, right, bottom, left).

锚 با attribute data-rel="popup":

Data Properties مقدار توضیح
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 Transition مراجعه کنید.

دکمه انتخابی

label با input که type="radio" دارد، به صورت خودکار به عنوان دکمه تنظیم می‌شود و نیازی به data-role ندارد.

Data Properties مقدار توضیح
data-mini true | false تعیین کنید که آیا دکمه‌ها کوچک هستند یا اندازه معمولی دارند.
data-role none jQuery Mobile را برای قرار دادن دکمه‌های انتخابی به عنوان دکمه‌های بهبود یافته استفاده کنید.
data-theme letter (a-z) رنگ موضوع دکمه‌های انتخابی را تعیین کنید.

توضیح:برای ترکیب چندین دکمه انتخابی، از data-role="controlgroup" و data-type="horizontal|vertical" برای تعیین ترکیب افقی یا عمودی دکمه‌ها استفاده کنید.

انتخاب

تمام عناصر <select>، به صورت خودکار به عنوان استایل دکمه تنظیم می‌شوند و نیازی به data-role ندارند.

Data Properties مقدار توضیح
data-icon منابع آیکون‌ها تعیین آیکون عنصر select. پیش‌فرض "arrow-d" است.
data-iconpos left | right | top | bottom | notext تعیین موقعیت آیکون.
data-inline true | false تعیین می‌کند که عنصر select باید به صورت خطی باشد یا خیر.
data-mini true | false تعیین می‌کند که عنصر select کوچک یا اندازه معمولی است.
data-native-menu true | false اگر به false تنظیم شود، از منوی انتخاب شخصی jQuery خود استفاده می‌شود (اگر می‌خواهید منوی انتخاب در تمام دستگاه‌های موبایل دارای ظاهر یکسانی باشد، توصیه می‌شود استفاده کنید).
data-overlay-theme letter (a-z) رنگ موضوع منوی انتخاب شخصی jQuery را تعیین می‌کند (با استفاده از data-native-menu="false").
data-placeholder true | false می‌توان روی عناصر <option> غیر اولیه select تنظیم کرد.
data-role none استایل قرار دادن jQuery Mobile برای تنظیم عنصر select به عنوان دکمه.
data-theme letter (a-z) رنگ موضوع عنصر select را تعیین می‌کند.

توضیح:برای ترکیب چندین عنصر select، از data-role="controlgroup" و data-type="horizontal|vertical" استفاده کنید تا تعیین کنید که این عنصر باید به صورت افقی یا عمودی ترکیب شود.

اسلایدر

عناصر input با type="range"، به صورت خودکار به عنوان استایل دکمه تنظیم می‌شوند و نیازی به data-role ندارند.

Data Properties مقدار توضیح
data-highlight true | false تعیین می‌کند که مسیر اسلایدر باید برجسته شود یا خیر.
data-mini true | false تعیین می‌کند که اسلایدر کوچک یا اندازه معمولی است.
data-role none استایل قرار دادن jQuery Mobile برای دکمه‌های تنظیم اسلایدر.
data-theme letter (a-z) رنگ موضوع کنترل‌های اسلایدر (input، دستگیره و مسیر) را تعیین می‌کند.
data-track-theme letter (a-z) رنگ موضوع مسیرهای اسلایدر را تعیین می‌کند.

ورودی متن و Textarea

عناصر input یا textarea با type="text|search|etc."، به صورت خودکار استایل داده می‌شوند و نیازی به data-role ندارند.

Data Properties مقدار توضیح
data-mini true | false تعیین می‌کند که آیا عنصر input کوچک یا معمولی است.
data-role none طرح input/textarea به عنوان دکمه‌های jQuery Mobile قرار می‌گیرد.
data-theme letter (a-z) رنگ موضوع ورودی‌های تعریف شده را مشخص می‌کند.