مقدمه
باسلام خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش jQuery موبایل همراه ما هستند. مبحث عملکرد تم ها در jQuery mobile رو در جلسات گذشته داشتیم. اکنون برای استایل دهی می خواهیم انواع کلاس های CSS در jQuery mobile مانند کلاس های تم، کلاس های متداول، کلاس های دکمه، کلاس های شبکه بندی و کلاس های آیکون در جی کوئری موبایل رو مورد بررسی قرار دهیم.خب مبحث کلاس های CSS در jQuery mobile را آغاز خواهیم نمود. با ما همراه باشید.
کلاس های CSS در jQuery mobile
جی کوئری موبایل از کلاس های css استفاده می کند تا به عناصر مختلف استایل دهی کند.
کلاس های متداول در جی کوئری موبایل
در مراجع زیر، ما کلاس های CSS در jQuery mobile را برای استایل های متداول اضافه نموده ایم.
| ردیف | کلاس های متداول و توضیحات |
| ۱ | ui-corner-all
عناصر با گوشه های گرد را نمایش می دهد. |
| ۲ | ui-shadow
سایه ها را برای عناصر اضافه می کند. |
| ۳ | ui-overlay-shadow
نمایش سایه پوششی را برای عناصر نشان می دهد. |
| ۴ | ui-mini
عناصر را کوچک تر نمایش می دهد. |
کلاس های دکمه در جی کوئری موبایل
جدول زیر فهرست کلاس های دکمه ای است که با عناصر anchor یا عنصر دکمه استفاده می شوند.
| ردیف | کلاس های دکمه و توضیحات |
| ۱ | ui-btn
مشخص می کند که عنصر به عنوان دکمه به کار می رود. |
| ۲ | ui-btn-inline
نمایش دادن دکمه به صورت خطی. دکمه را به عنوان عنصر درون خطی نشان می دهد که فضای مورد نیاز برای برچسب را ذخیره می کند |
| ۳ | ui-btn-icon-top
این آیکون را بالای متن دکمه قرار می دهد. |
| ۴ | ui-btn-icon-right
این آیکون را در سمت راست متن دکمه قرار می دهد. |
| ۵ | ui-btn-icon-bottom
این آیکون را زیر متن دکمه قرار می دهد |
| ۶ | ui-btn-icon-left
آیکون را سمت چپ متن دکمه قرار می دهد. |
| ۷ | ui-btn-icon-notext
تنها آیکون را به نمایش می گذارد. |
| ۸ | ui-btn-a|b
این رنگ دکمه را نشان می دهد (“a” به رنگ پس زمینه پیش فرض، یعنی خاکستری، و “b” رنگ پس زمینه را به سیاه تغییر می دهد). |
کلاس های آیکون در جی کوئری موبایل
جدول زیر لیست کلاس های آیکون در جی کوئری موبایل است که با عناصر anchor یا المان های دکمه استفاده می شوند.
| ردیف | کلاس های ِآیکون و توضیحات |
| ۱ | ui-icon-action
عملیات آیکون را نشان می دهد. |
| ۲ | ui-icon-alert
علامت تعجب داخل یک مثلث را نشان می دهد. |
| ۳ | ui-icon-arrow-d-l
پیکان با جهت پایین مایل به چپ را تعریف می کند |
| ۴ | ui-icon-arrow-d-r
پیکان با جهت پایین، مایل به راست را تعریف می کند |
| ۵ | ui-icon-arrow-u-l
پیکان با جهت بالا، مایل به چپ را تعریف می کند |
| ۶ | ui-icon-arrow-u-r
پیکان با جهت بالا، مایل به راست را تعریف می کند |
| ۷ | ui-icon-arrow-l
پیکان سمت چپ را تعریف می کند |
| ۸ | ui-icon-arrow-r
پیکان سمت راست را تعریف می کند |
| ۹ | ui-icon-arrow-u
این پیکان بالا را مشخص می کند |
| ۱۰ | ui-icon-arrow-d
این پیکان پایین را مشخص می کند |
| ۱۱ | ui-icon-bars
سه خط افقی بر روی یکدیگر را تعریف می کند |
| ۱۲ | ui-icon-bullets
سه گلوله افقی بر روی یکدیگر را تعریف می کند |
| ۱۳ | ui-icon-carat-d
جهت پایین را تعریف می کند |
| ۱۴ | ui-icon-carat-l
جهت سمت چپ را تعریف می کند |
| ۱۵ | ui-icon-carat-r
جهت سمت راست را تعریف می کند |
| ۱۶ | ui-icon-carat-u
جهت بالا را تعریف می کند |
| ۱۷ | ui-icon-check
چک کردن را تعریف می کند |
| ۱۸ | ui-icon-comment
این نظر یا کامنت را مشخص می کند. |
| ۱۹ | ui-icon-forbidden
این آیکون ممنوع را نمایش می دهد. |
| ۲۰ | ui-icon-forward
این نماد رو به جلو را مشخص می کند. |
| ۲۱ | ui-icon-navigation
این نماد ناوبری یا هدایتی را مشخص می کند. |
| ۲۲ | ui-icon-recycle
نماد بازیافت را نمایش می دهد. |
| ۲۳ | ui-icon-refresh
نماد رفرش را نشان می دهد. |
| ۲۴ | ui-icon-tag
آیکون تگ را نشان می دهد |
| ۲۵ | ui-icon-video
نماد ویدیو یا دوربین را نشان می دهد. |
بعد از کلاس های آیکون در جی کوئری موبایل به کلاس های تم می پردازیم.
کلاس های تم در جی کوئری موبایل
کلاس های تم در جی کوئری موبایل دو نوع مختلف از تم ها مانند تم “a” و تم “b” را برای سفارشی کردن ظاهر برنامه فراهم می کند. شما می توانید کلاس های تم خود را با اضافه کردن حرف swatch (a-z) ایجاد کنید. در جدول زیر لیست کلاس های تم که از حرف a به z مشخص شده است، آمده است.
| ردیف | کلاس های تم و توضیحات |
| ۱ | ui-bar-(a-z)
این رنگ برای نوار، از جمله هدر ها، پاورقی ها و دیگر نوار ها در صفحه را نشان می دهد. |
| ۲ | ui-body-(a-z)
رنگ یک قطعه محتوا را مشخص می کند. مانند قطعه محتوای صفحه، آیتم های لیست نمایشی، پاپ آپ ها، پیش ساخته ها، لود کننده، نوار های لغزنده و پنل ها |
| ۳ | ui-btn-(a-z)
رنگ را برای دکمه نشان می دهد |
| ۴ | ui-group-theme-(a-z)
رنگ را برای controlgroup ها و لیست های نمایشی و مجموعه های پیش ساخته، مشخص می کند |
| ۵ | ui-overlay-(a-z)
رنگ پس زمینه ی صفحه ای را مشخص می کند که جعبه ی گفتگو و پاپ آپ ها و دیگر ظرف های صفحه در بالای آن نمایش می یابند. |
| ۶ | ui-page-theme-(a-z)
رنگ برای صفحات نمایش داده می شود. |
کلاس های شبکه بندی در جی کوئری موبایل
جدول زیر لیست کلاس های شبکه ای است که با عرض برابر، بدون مرز، پس زمینه، حاشیه یا پد استفاده می شود.
| ردیف | کلاس شبکه | ستون | عرض های ستون | مربوط است به |
| ۱ | ui-grid-solo | ۱ | ۱۰۰% | ui-block-a |
| ۲ | ui-grid-a | ۲ | ۵۰%/۵۰% | ui-block-a|b |
| ۳ | ui-grid-b | ۳ | ۳۳%/۳۳%/۳۳% | ui-block-a|b|c |
| ۴ | ui-grid-c | ۴ | ۲۵%/۲۵%/۲۵%/۲۵% | ui-block-a|b|c|d |
| ۵ | ui-grid-d | ۵ | ۲۰%/۲۰%/۲۰%/۲۰%/۲۰% | ui-block-a|b|c|d|e |
کلام پایانی
در این قسمت انواع کلاس های CSS در jQuery mobile مانند کلاس های تم، کلاس های متداول، کلاس های دکمه، کلاس های شبکه بندی و کلاس های آیکون در جی کوئری موبایل رو با هم مورد بررسی قرار دادیم. سپس توضیحاتی در رابطه با هر یک از کلاس ها بیان شد. بعد از معرفی کلاس های CSS در jQuery mobile در ادامه جلسات آموزشی به ویژگی های داده در jQuery mobile می پردازیم.
امیدوارم مفید واقع شود.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
