آموزش ویژگی های داده در برنامه نویسی جی کوئری موبایل
آموزش ویژگی های داده در برنامه نویسی جی کوئری موبایل
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش ویژگی های داده در برنامه نویسی جی کوئری موبایل خواهیم پرداخت.
دکمه
این ویژگی یک دکمه قابل کلیک را مشخص می کند که شامل مطالبی مانند متن یا تصاویر با استفاده از کلاس ui-btn است. در نسخه ۱٫۴ منسوخ شده است. به جای استفاده از ویژگی data-role = “button” از ویژگی ui-btn استفاده کنید.
جدول زیر عناصر دکمه استفاده شده با مشخصه داده را لیست می کند.
| ویژگی داده و توضیح | مقدار | |
|---|---|---|
| ۱ | data-corners
این مشخص می کند که آیا دکمه باید حاوی گوشه های گرد باشد یا خیر. |
true | false |
| ۲ | data-icon
آیکون دکمه را مشخص می کند. |
Default is no icon |
| ۳ | data-iconpos
موقعیت آیکون را مشخص می کند. |
left | right | top | bottom |
| ۴ | data-iconshadow
این مشخص می کند که آیا آیکون دکمه باید حاوی سایه باشد یا خیر. |
true | false |
| ۵ | data-inline
این مشخص می کند که آیا آیکون باید به صورت درون خطی باشد یا نه. |
true | false |
| ۶ | data-mini
این تعریف می کند که آیا دکمه باید در اندازه کوچکتر یا اندازه منظم نمایش داده شود. |
true | false |
| ۷ | data-shadow
این مشخص می کند که آیا دکمه باید حاوی سایه باشد یا خیر. |
true | false |
| ۸ | data-theme
رنگ تم را برای دکمه نمایش می دهد. |
letter (a-z) |
چک باکس
در جدول زیر عناصر چک باکس استفاده شده با type = “checkbox” لیست شده است.
| ویژگی داده و توضیح | مقدار | |
|---|---|---|
| ۱ | data-mini
این تعریف می کند که آیا چک باکس باید در اندازه کوچکتر یا اندازه منظم نمایش داده شود. |
true | false |
| ۲ | data-role
حالت دهی چک باکس ها را به عنوان دکمه متوقف می کند. |
none |
| ۳ | data-theme
این رنگ زمینه را برای چک باکس نشان می دهد. |
letter (a-z) |
عناصر جمع شونده
جدول زیر عناصر جمع شونده را با ویژگی data-role = “collapsible” استفاده می کند.
| Sr.No. | Data-attribute & Description | Value |
|---|---|---|
| ۱ | data-collapsed
این نشان می دهد که آیا باید محتوا بسته یا گسترش یابد. |
true | false |
| ۲ | data-collapsed-cue-text
با استفاده از نرم افزار صفحه خوان ، بازخورد را برای کاربران نمایش می دهد. |
Default is collapsing content |
| ۳ | data-collapsed-icon
این آیکون دکمه جمع شدن را مشخص می کند. |
Default icon is “plus” |
| ۴ | data-content-theme
این رنگ تم را برای محتوای جمع شونده نمایش می دهد. |
letter (a-z) |
| ۵ | data-expanded-cue-text
با استفاده از نرم افزار صفحه خوان ، بازخورد را برای کاربران نمایش می دهد. |
Default is expanding content |
| ۶ | data-expanded-icon
هنگامی که محتوا را گسترش می دهید دکمه جمع شدن نمایش داده می شود. |
Default icon is “minus” |
| ۷ | data-iconpos
موقعیت آیکون را مشخص می کند. |
left | right | top | bottom |
| ۸ | data-inset
این مشخص می کند که آیا دکمه جمع شونده باید با گوشه های گرد و حاشیه نمایش داده شود یا خیر. |
true | false |
| ۹ | data-mini
این مشخص می کند که آیا دکمه های جمع شونده باید در اندازه کوچکتر یا اندازه منظم نمایش داده شوند. |
true | false |
| ۱۰ | data-theme
این رنگ تم را برای دکمه جمع شدن نمایش می دهد. |
letter (a-z) |
مجموعه جمع شونده
جدول زیر عناصر مجموعه جمع شونده را با ویژگی data-role = “collapsibleset” استفاده می کند.
| Sr.No. | Data-attribute & Description | Value |
|---|---|---|
| ۱ | data-collapsed-icon
این آیکون دکمه جمع شدن را مشخص می کند. |
Default icon is “plus” |
| ۲ | data-content-theme
این رنگ تم را برای محتوای جمع شونده نمایش می دهد. |
letter (a-z) |
| ۳ | data-expanded-icon
وقتی محتوا را گسترش می دهید دکمه جمع شدن نمایش داده می شود. |
Default icon is “minus” |
| ۴ | data-iconpos
موقعیت آیکون را مشخص می کند. |
left | right | top | bottom |
| ۵ | data-inset
این مشخص می کند که آیا دکمه جمع شونده باید با گوشه های گرد و حاشیه نمایش داده شود یا خیر. |
true | false |
| ۶ | data-mini
این مشخص می کند که آیا دکمه های جمع شونده باید در اندازه کوچکتر یا اندازه منظم نمایش داده شوند. |
true | false |
| ۷ | data-theme
این رنگ تم را برای دکمه جمع شدن نمایش می دهد. |
letter (a-z) |
گروه کنترل
جدول زیر عناصر گروه کنترل را با ویژگی data-role = “controlgroup” استفاده می کند –
| Sr.No. | Data-attribute & Description | Value |
|---|---|---|
| ۱ | data-exclude-invisible
این امر تعیین می کند که آیا کودکان نامرئی را در انتصاب گوشه های گرد مستثنی کنیم. |
true | false |
| ۲ | data-mini
این تعریف می کند که آیا این گروه باید در اندازه کوچکتر یا اندازه منظم نمایش دهند. |
true | false |
| ۳ | data-theme
رنگ تم را برای گروه کنترل نمایش می دهد. |
letter (a-z) |
| ۴ | data-type
این نشان می دهد که آیا این گروه باید به صورت افقی یا عمودی نمایش داده شود. |
horizontal | vertical |
گفتگو
جدول زیر عناصر گفتگوی مورد استفاده با ویژگی data-dialog = “true” را لیست می کند.
| Sr.No. | Data-attribute & Description | Value |
|---|---|---|
| ۱ | data-close-btn
موقعیت دکمه بستن را مشخص می کند. |
left | right | none |
| ۲ | data-close-btn-text
متن را برای دکمه بستن تعریف می کند. |
text |
| ۳ | data-corners
این مشخص می کند که آیا گفتگو باید با گوشه های گرد نمایش داده شود یا خیر. |
true | false |
| ۴ | data-dom-cache
این نشان می دهد که آیا حافظه پنهان DOM برای صفحات جداگانه باید پاک شود یا خیر. |
true | false |
| ۵ | data-overlay-theme
این رنگ پوشش صفحه گفتگو را مشخص می کند. |
letter (a-z) |
| ۶ | data-theme
این رنگ زمینه صفحه گفتگو را مشخص می کند. |
letter (a-z) |
| ۷ | data-title
عنوان صفحه گفتگو را تعریف می کند. |
text |
بهبود
جدول زیر عناصر بهبود را با استفاده از ویژگی data-enhan = “false” یا data-ajax = “false” استفاده می کند.
| Sr.No. | Data-attribute & Description | Value |
|---|---|---|
| ۱ | data-enhance
با تنظیم این ویژگی روی “true” می توانید صفحه را سبک کنید. اگر صفحه “غلط” تنظیم شود ، نمی توانید آن را سبک کنید. |
true | false |
| ۲ | data-ajax
این نشان می دهد که آیا صفحات باید از Ajax بارگیری شوند یا خیر. |
true | false |
نوار ابزار ثابت
جدول زیر عناصر نوار ابزار مورد استفاده با ویژگی data-position = “fixed” را لیست می کند.
| Sr.No. | Data-attribute & Description | Value |
|---|---|---|
| ۱ | data-disable-page-zoom
این مشخص می کند که آیا کاربر می تواند صفحه را مقیاس بندی یا بزرگنمایی کند یا خیر. |
true | false |
| ۲ | data-fullscreen
این تعریف می کند که نوارابزارها باید در بالا و / یا پایین قرار بگیرند. |
true | false |
| ۳ | data-tap-toggle
این نشان می دهد که آیا کاربر می تواند در نوار ضربه ، قابلیت مشاهده نوار ابزار را تغییر دهد یا خیر. |
true | false |
| ۴ | data-transition
وقتی روی عنصر ضربه می زنید یا کلیک می کنید ، یک اثر گذار نشان می دهد. |
slide | fade | none |
| ۵ | data-update-page-padding
با استفاده از رویدادهای طرح تغییر اندازه ، انتقال و به روزرسانی ، صفحه padding را به روز می کند. |
true | false |
| ۶ | data-visible-on-page-show
هنگام نمایش صفحه والد ، قابلیت مشاهده نوار ابزار را تعریف می کند. |
true | false |
هدر
جدول زیر عناصر هدر استفاده شده با ویژگی data-role = “header” را لیست می کند.
| Sr.No. | Data-attribute & Description | Value |
|---|---|---|
| ۱ | data-id
شناسه منحصر به فرد را تعریف می کند. |
text |
| ۲ | data-position
این تعریف می کند که آیا سرصفحه باید در پایین قرار گیرد یا با محتوای صفحه درون خطی باشد. |
inline | fixed |
| ۳ | data-fullscreen
این تعریف می کند که آیا هدر باید در پایین و بالای محتوای صفحه قرار گیرد یا خیر. |
true | false |
| ۴ | data-theme |
پنجره پاپ آپ
جدول زیر عناصر پنجره مورد استفاده با ویژگی data-role = “popup” را لیست می کند.
| Sr.No. | Data-attribute & Description | Value |
|---|---|---|
| ۱ | 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) |
| ۷ | data-tolerance
لبه های پنجره را مشخص می کند. |
۳۰, ۱۵, ۳۰, ۱۵ |
عناصر کشویی
جدول زیر عناصر کشویی استفاده شده با ویژگی type = “range” را لیست می کند.
| Sr.No. | Data-attribute & Description | Value |
|---|---|---|
| ۱ | data-highlight
این لغزنده را برجسته می کند. |
true | false |
| ۲ | data-mini
این مشخص می کند که آیا لغزنده باید در اندازه کوچکتر یا اندازه منظم نمایش داده شود. |
true | false |
| ۳ | data-role
این یک ظاهر طراحی شده را به عنوان دکمه کنترل می کند. |
none |
| ۴ | data-theme
این رنگ تم را برای کنترل کشویی نمایش می دهد. |
letter (a-z) |
| ۵ | data-track-theme
این رنگ تم را برای پنجره کشویی نمایش می دهد. |
letter (a-z) |
لیست جلسات قبل آموزش برنامه نویسی جی کوئری موبایل
- آموزش برنامه نویسی جی کوئری موبایل
- مقدمه برنامه نویسی جی کوئری موبایل
- آموزش نصب و راه اندازی جی کوئری موبایل
- آموزش صفحات در برنامه نویسی جی کوئری موبایل
- آموزش آیکون ها در برنامه نویسی جی کوئری موبایل
- آموزش انتقال ها در برنامه نویسی جی کوئری موبایل
- آموزش طرح بندی در برنامه نویسی جی کوئری موبایل
- آموزش ویجت ها در برنامه نویسی جی کوئری موبایل
- آموزش رویدادها در برنامه نویسی جی کوئری موبایل
- آموزش فرم ها در برنامه نویسی جی کوئری موبایل
- آموزش تم ها در برنامه نویسی جی کوئری موبایل
- آموزش کلاس های CSS در برنامه نویسی جی کوئری موبایل
.svg)
دیدگاه شما