مقدمه
باسلام خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش jQuery موبایل همراه ما هستند. همونطور که مشاهده نمودید ویژگی های داده در jQuery mobile رو در سه جلسه تقدیم حضورتون می نماییم. در قسمت اول توضیحاتی راجع به دکمه ،چک باکس ها، ارتقا یا پیشرفت، Collapsible یا پیش ساخته ها در جی کوئری موبایل و… داده شد. در جلسه دوم مباحث رو ادامه داده ،بنابراین نوار ابزار ثابت در جی کوئری موبایل، Footer ،کلید یا سوییچ دو حالته، Inputs یا ورودی ها، آیتم های لیست در جی کوئری موبایل و… رو مورد بحث قرار خواهیم داد.با نوار ابزار ثابت در جی کوئری موبایل آغاز می کنیم.
ویژگی های داده درjQuery mobile
نوار ابزار ثابت در جی کوئری موبایل
خصوصیات نوار ابزار ثابت در جی کوئری موبایل را در زیر خواهیم داشت.
| ردیف | خصوصیت data و توضیحات | مقدار |
|---|
| ۱ | 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 بالا و پایین صفحه را طوری مشخص می کند که در هنگام تغییر اندازه، یا انتقال یا رویداد های updatelayout، تغییر یابد و آپ دیت شود. | true | false |
| ۶ | data-visible-on-page-show هنگامی که صفحه نمایش داده می شود، ظاهر بودن نوار ابزار را مشخص می کند. | true | false |
بعد از نوار ابزار ثابت در جی کوئری موبایل سراغ کلید دو حالته خواهیم رفت.
کلید یا سوییچ دو حالته
جدول زیر لیست عناصر دو حالته استفاده شده با ویژگی “data-role = “flipswitch
| ردیف | خصوصیت data و توضیحات | مقدار |
|---|
| ۱ | data-mini مشخص می کند که آیا کلید مورد نظر باید دارای اندازه ی کوچک باشد یا عادی. | true | false |
| ۲ | data-on-text مقدار متن on را برای کلید دوحالته مشخص می کند(مقدار پیش فرض On است) . | Default is “on” |
| ۳ | data-off-text مقدار متن offرا برای کلید دو حالته مشخص می کند(مقدار پیش فرض off است). | Default is “off” |
خب تا اینجا نوار ابزار ثابت در جی کوئری موبایل و کلید یا سوییچ دو حالته رو دیدیم.
جدول زیر لیست عناصر پایه استفاده شده با ویژگی ” data-role = “footer را نشان می دهد.
−
| ردیف | خصوصیت data و توضیحات | مقدار |
|---|
| ۱ | data-id یک ID یکتا را مشخص می کند. | text |
| ۲ | data-position مشخص می کند که آیا footer مورد نظر باید نسبت به محتوای صفحه به صورت خطی باشد یا در پایین بماند. | inline | fixed |
| ۳ | data-fullscreen مشخص می کند که آیا footer مورد نظر همیشه باید در پایین و روی محتوای صفحه نمایش داده شود یا خیر. | true | false |
| ۴ | data-theme رنگ تم footer را مشخص می کند. | letter (a-z) |
در جدول زیر لیست عناصر هدر مورد استفاده با ویژگی “data-role = “header است.
| ردیف | خصوصیت data و توضیحات | مقدار |
|---|
| ۱ | data-id یک ID یکتا را مشخص می کند. | text |
| ۲ | data-position مشخص می کند که آیا header مورد نظر باید نسبت به محتوای صفحه به صورت خطی باشد یا در بالا بماند. | inline | fixed |
| ۳ | data-fullscreen مشخص می کند که آیا header مورد نظر باید همیشه در بالا و روی محتوای صفحه ی مورد نظر نمایش داده شود یا نه. | true | false |
| ۴ | data-theme رنگ تم از header مورد نظر را مشخص می کند. | letter (a-z) |
Inputs یا ورودی ها
جدول زیر لیست عناصر ورودی مورد استفاده با “type = “text|search|etc را مضخص کرده است.
| ردیف | خصوصیت data و توضیحات | مقدار |
|---|
| ۱ | data-clear-btn مشخص می کند که آیا ورودی مورد نظر باید یک دکمه ی “پاک کردن” داشته باشد یا خیر. | true | false |
| ۲ | data-clear-btn-text یک متن را برای دکمه ی “پاک کردن” مشخص می کند. | text |
| ۳ | data-mini مشخص می کند که آیا ورودی مورد نظر باید کوچک باشد و یا دارای اندازه ی عادی باشد. | true | false |
| ۴ | data-role از این که جی کوئری موبایل ورودی ها و textarea ها را استایل دهی کند، جلوگیری می کند. | none |
| ۵ | data-theme رنگ تم را برای فیلد ورودی مشخص می کند. | letter (a-z) |
Link
جدول زیر لیست عناصر Link مورد استفاده با jQuery Mobile را نشان می دهد.
| ردیف | خصوصیت data و توضیحات | مقدار |
|---|
| ۱ | data-ajax مشخص می کند که آیا از ajax برای لود کردن صفحات استفاده کنیم یا نه. | true | false |
| ۲ | data-direction انیمیشن انتقال را معکوس می کند. | reverse |
| ۳ | data-dom-cache مشخص می کند که آیا برای صفحات تکی، کش jquery DOM باید پاک شود یا خیر. | true | false |
| ۴ | data-prefetch مشخص می کند که آیا صفحات را در DOM واکشی اولیه(prefetch) کند یا خیر. | true | false |
| ۵ | 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 |
فهرست و لیست ها
جدول زیر نشان می دهد عناصر لیست استفاده شده با ویژگی”data-role = “listview را نشان می دهد.
| ردیف | خصوصیت data و توضیحات | مقدار |
|---|
| ۱ | data-autodividers مشخص می کند که آیا آیتم های لیست، به طور اتوماتیک تقسیم شوند یا خیر. | true | false |
| ۲ | data-count-theme رنگ تم را برای دکمه ی شمارنده مشخص می کند. | letter (a-z) |
| ۳ | data-divider-theme رنگ تم را برای تقسیم کننده ی لیست مشخص می کند. | letter (a-z) |
| ۴ | data-filter مشخص می کند که آیا یک جعبه ی جستجو را در لیست اضافه کند یا خیر. | true | false |
| ۵ | data-filter-placeholder یک متن را درون جعبه جستجو تعریف می کند. | text |
| ۶ | data-filter-theme رنگ تم را برای فیلتر جستجو تعریف می کند. | letter (a-z) |
| ۷ | data-icon آیکن لیست مورد نظر را مشخص می کند. | Default is no icon |
| ۸ | data-inset مشخص می کند که آیا لیست مورد نظر باید دارای گوشه های گرد شده و مقداری margin باشد یا خیر. | true | false |
| ۹ | data-split-icon آیکن دکمه ی split را مشخص می کند. | The default icon is “arrow-r” |
| ۱۰ | data-split-theme رنگ تم را برای دکمه ی split تعریف می کند. | letter (a-z) |
| ۱۱ | data-theme رنگ تم را برای لیست مورد نظر تعریف می کند. | letter (a-z) |
List Item یا آیتم های لیست در جی کوئری موبایل
جدول زیر عناصر لیست مورد استفاده با ویژگی “data-role = “listview را نشان می دهد .
آیتم های لیست در جی کوئری موبایل رو با هم می بینیم.
| ردیف | خصوصیت data و توضیحات | مقدار |
|---|
| ۱ | data-filtertext برای فیلتر کردن مقادیر لیست با استفاده از متن در کادر جستجو استفاده می شود. | text |
| ۲ | data-icon آیکن آیتم لیست مورد نظر را مشخص می کند. | Default is no icon |
| ۳ | data-role یک تقسیم کننده برای آیتم های لیست مشخص می کند. | list-divider |
| ۴ | data-theme رنگ تم را برای آیتم لیست مشخص می کند. | letter (a-z) |
همونطور که می بینیم آیتم های لیست در جی کوئری موبایل بحث جالبی است.
بعد از آیتم های لیست در جی کوئری موبایل ، نوار هدایتی رو بررسی می نماییم.
نوار هدایتی یا Navbar
جدول زیر لیست عناصر navbar مورد استفاده با ویژگی “data-role = “navbar را نشان می دهد.
| ردیف | خصوصیت data و توضیحات | مقدار |
|---|
| ۱ | data-icon آیکن آیتم لیست را مشخص می کند. | Default is no icon |
| ۲ | data-iconpos مکان آیکن مورد نظر را مشخص می نماید. | left | right | top | bottom | notext |
کلام پایانی
در جلسه دوم ویژگی های داده درjQuery mobile مباحث مختلفی بیان شد. از جمله نوار ابزار ثابت در جی کوئری موبایل ،Inputs یا ورودی ها، آیتم های لیست در جی کوئری موبایل ، فهرست و لیست ها و… . در نوار ابزار ثابت در جی کوئری موبایل قابلیت زوم بر روی صفحه ی مورد نظر و توانایی محو با ظاهر سازی نوار ابزارها و دیگر تنظیمات مشخص شد. در آیتم های لیست در جی کوئری موبایل نیز فیلتر کردن مقادیر لیست ،رنگ تم برای آیتم لیست و…بیان شد . ادامه مباحث رو در جلسه سوم ادامه خواهیم داد.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
