مقدمه
باسلام خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش jQuery موبایل همراه ما هستند. برای استایل دهی انواع کلاس های CSS در jQuery mobile مانند کلاس های تم، کلاس های متداول، کلاس های دکمه، کلاس های شبکه بندی و کلاس های آیکون بیان شدند.حال در نظر داریم ویژگی های داده در jQuery mobile رو در سه جلسه تقدیم حضورتون نماییم. در قسمت اول توضیحاتی راجع به دکمه ،چک باکس ها، ارتقا یا پیشرفت، Collapsible یا پیش ساخته ها در جی کوئری موبایل و… داده خواهد شد. بنابراین بررسی ویژگی های داده در jQuery mobile را شروع می کنیم.
ویژگی های داده در jQuery mobile
دکمه
از ویژگی های داده در jQuery mobile دکمه است. این یک دکمه قابل کلیک که محتوایی مانند متن یا تصاویر را با استفاده از کلاس ui-btn شامل می شود را مشخص می کند. این در نسخه ۱٫۴ نادیده گرفته شده است. به جای استفاده از ویژگی “data-role = “button” از ویژگی ui-btn استفاده کنید.
جدول زیر لیست عناصر دکمه مورد استفاده با ویژگی داده است.
| ردیف | خصوصیت data و توضیحات | مقدار |
|---|
| ۱ | 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) |
چک باکس ها در جی کوئری موبایل
چک باکس از دیگر ویژگی های داده در jQuery mobile می باشد.
جدول زیر لیست عناصر چک باکس با استفاده از “type = “checkbox را نشان می دهد.
| ردیف | خصوصیت data و توضیحات | مقدار |
|---|
| ۱ | data-mini مشخص می کند که آیا چک باکس مورد نظر باید کوچک باشد یا دارای اندازه ی عادی باشد. | true | false |
| ۲ | data-role به جی کوئری موبایل می فهماند که از استایل دهی به چک باکس ها برای این که تبدیل به دکمه شوند، جلوگیری کند. | none |
| ۳ | data-theme رنگ تم چک باکس را مشخص می کند. | letter (a-z) |
Collapsible یا پیش ساخته ها در جی کوئری موبایل رو در ادامه خواهیم داشت.
Collapsible یا پیش ساخته ها در جی کوئری موبایل
جدول زیر لیست عناصر قابل پیش ساخته مورد استفاده با ویژگی data-role = “collapsible” است.
| ردیف | خصوصیت data و توضیحات | مقدار |
| ۱ | data-collapsed مشخص می کند محتوای پیش ساخته باید بسته باشد یا باز باشد. | true | false |
| ۲ | data-collapsed-cue-text برای کاربرانی که از صفحه خوان ها استفاده می کنند، متنی را مشخص می کندقابل شنیدن باشد. متن پیش فرض “click to collapse contents” است. | Default is collapsing content |
| ۳ | data-collapsed-icon آیکون دکمه ی پیش ساخته را مشخص می کند. آیکون پیش فرض، علامت به اضافه است. | Default icon is “plus” |
| ۴ | data-content-theme رنگ تم محتوای پیش ساخته را مشخص می کند. همچنین به محتوای پیش ساخته، گوشه های گرد شده را خواهد داد. | letter (a-z) |
| ۵ | data-expanded-cue-text متنی را مشخص می کند که برای کاربرانی که از صفحه خوان ها استفاده می کنند قابل شنیدن باشد. متن پیش فرض “click to expand contents” است. | Default is expanding content |
| ۶ | data-expanded-icon آیکون دکمه ی پیش ساخته را مشخص می کند. این آیکون مخصوص زمانی است که پیش ساخته باز شده است. آیکون پیش فرض علامت منفی می باشد. | Default icon is “minus” |
| ۷ | data-iconpos مکان آیکون مورد نظر را مشخص می کند. | left | right | top | bottom |
| ۸ | data-inset مشخص می کند که آیا دکمه ی پیش ساخته باید دارای گوشه های گرد شده و مقداری margin باشد یا خیر. | true | false |
| ۹ | data-mini مشخص می کند که آیا دکمه ی پیش ساخته شده باید دارای اندازه ی کوچک یا دارای اندازه ی عادی باشد . | true | false |
| ۱۰ | data-theme رنگ تم دکمه ی پیش ساخته را مشخص می کند. | letter (a-z) |
Collapsible یا پیش ساخته ها در جی کوئری موبایل رو هم باهم دیدیم.
بعد از Collapsible یا پیش ساخته ها در جی کوئری موبایل به مجموعه های پیش ساخته می پردازیم.
مجموعه های پیش ساخته در جی کوئری موبایل
در زیر جدول لیست عناصر مجموعه پیش ساخته مورد استفاده با ویژگی “data-role = “collapsibleset را نشان می دهد.
| ردیف | خصوصیت data و توضیحات | مقدار |
|---|
| ۱ | 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 مشخص می کند که آیا پیش ساخته ها باید دارای گوشه های گرد شده و مقداری margin باشند یا خیر. | true | false |
| ۶ | data-mini مشخص می کند که آیا دکمه های پیش ساخته باید دارای اندازه ی کوچک باشند یا اندازه ی عادی. | true | false |
| ۷ | data-theme رنگ تم را بری مجموعه پیش ساخته ها مشخص می کند. | letter (a-z) |
Controlgroup یا گروه های کنترل در جی کوئری موبایل
| ردیف | خصوصیت data و توضیحات | مقدار |
|---|
| ۱ | data-exclude-invisible مشخص می کند که در گوشه های گردشده، آیا کودکان نامرئی را محروم کند یا نه. | true | false |
| ۲ | data-mini مشخص می کند که آیا گروه مورد نظر باید اندازه اش کوچک باشد یا عادی. | true | false |
| ۳ | data-theme رنگ تم گروه کنترل را مشخص می کند. | letter (a-z) |
| ۴ | data-type مشخص می کند که آیا گروه مورد نظر باید به صورت افقی یا عمودی نمایش داده شود. | horizontal | vertical |
جعبه ی گفتگو در جی کوئری موبایل
در زیر جدول لیست عناصر محاوره ای مورد استفاده با “data-dialog = “true است.
| ردیف | خصوصیت data و توضیحات | مقدار |
|---|
| ۱ | data-close-btn محل دکمه ی بستن، را مشخص می کند. | left | right | none |
| ۲ | data-close-btn-text یک متن را برای دکمه ی بستن، مشخص می کند. | text |
| ۳ | data-corners مشخص می کند که آیا جعبه ی گفتگو باید دارای گوشه های گرد شده باشد یا نه. | true | false |
| ۴ | data-dom-cache مشخص می کند که آیا برای صفحات تکی، کش jquery DOM باید پاک شود یا نه. | true | false |
| ۵ | data-overlay-theme رنگ پوششی(پس زمینه) را برای صفحه ی گفتگو، مشخص می کند. | letter (a-z) |
| ۶ | data-theme رنگ تم را برای صفحه ی گفتگو مشخص می کند. | letter (a-z) |
| ۷ | data-title عنوان مورد نظر را برای صفحه ی گفتگو مشخص می کند. | text |
Enhancement یا پیشرفت در جی کوئری موبایل
در زیر لیست عناصر تقویت با ویژگی “data-enhancement = “false یا “data-ajax = “false استفاده شده است.
| ردیف | خصوصیت data و توضیحات | مقدار |
|---|
| ۱ | data-enhance اگر true تنظیم شود(که به طور پیش فرض است)، جی کوئری موبایل به طور اتوماتیک صفحه را استایل دهی می کند و آن را برای دستگاه های موبایل سازگار می کند. اگر false تنظیم شود، فریم ورک مورد نظر صفحه را استایل دهی نمی کند. | true | false |
| ۲ | data-ajax مشخص می کند که آیا برای لود کردن صفحات از ajax استفاده شود یا نه. | true | false |
کلام پایانی
همونطور که با هم دیدیم درقسمت اول مبحث ویژگی های داده در jQuery mobile ، راجع به دکمه ،چک باکس ها، ارتقا یا پیشرفت، Collapsible یا پیش ساخته ها در جی کوئری موبایل و… داده خواهد شد. در جلسه بعد به ادامه مبحث خواهیم پرداخت.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
