جی کوئری موبایل-کلاس های css
کلاس های css در جی کوئری موبایل
جی کوئری موبایل از کلاس های css استفاده می کند تا به عناصر مختلف استایل دهی کند.
در مراجع زیر، ما کلاس های css را برای استایل های متداول اضافه کرده ایم.
کلاس های عمومی
این کلاس ها می توانند به هر ویدجت(widget) جی کوئری موبایل اضافه شوند( مانند: دکمه ها ، نوارابزارها، پنل ها، جدول ها، لیست ها، و ...):
| کلاس | توضیحات |
|---|---|
| ui-corner-all |
گوشه های گرد شده را به عنصر مورد نظر اضافه می کند |
| ui-shadow |
سایه ها را به عنصر مورد نظر اضافه می کند. |
| ui-overlay-shadow |
یک سایه ی پوششی را به عنصر اضافه می کند |
| ui-mini |
عنصر مورد نظر را کوچکتر می کند . |
کلاس های دکمه
علاوه بر کلاس های عمومی، شما می توانید کلاس های زیر را به عناصر <a> یا <button> اضافه کنید(به جز دکمه های <input>):
| کلاس | توضیحات |
|---|---|
| ui-btn |
باید به عناصر <a> اضافه شود، اگر می خواهید که آنها به صورت دکمه استایل دهی شوند |
| 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" دارای پس زمینه ی مشکلی با متن سفید می باشد. |
کلاس های ِآیکن
تمام کلاس های آیکن را برای عناصر <a> و <button> در زیر مشاهده می کنید(برای یادگیری استفاده از آیکن ها در دیگر عناصر، مرجع آیکن ها را مشاهده نمایید):
| کلاس | توضیحات آیکن | آیکن |
|---|---|---|
| ui-icon-action |
عملیات |
|
| ui-icon-alert |
علامت تعجب درون مثلث |
|
| ui-icon-audio |
صدا یا بلند گو |
|
| 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-back |
برگشت به عقب |
|
| ui-icon-bars |
سه خط افقی بر روی یکدیگر |
|
| ui-icon-bullets |
سه گلوله افقی بر روی یکدیگر |
|
| ui-icon-calendar |
تقویم |
|
| ui-icon-camera |
دوربین |
|
| ui-icon-carat-d |
جهت پایین |
|
| ui-icon-carat-l |
جهت سمت چپ |
|
| ui-icon-carat-r |
جهت سمت راست |
|
| ui-icon-carat-u |
جهت بالا |
|
| ui-icon-check |
چک کردن |
|
| ui-icon-clock |
ساعت |
|
| ui-icon-cloud |
ابر |
|
| ui-icon-comment |
کامنت |
|
| ui-icon-delete |
حذف |
|
| ui-icon-edit |
ویرایش |
|
| ui-icon-eye |
چشم |
|
| ui-icon-forbidden |
علامت ممنوع |
|
| ui-icon-forward |
به جلو |
|
| ui-icon-gear |
چرخ دنده |
|
| ui-icon-grid |
شبکه |
|
| ui-icon-heart |
قلب |
|
| ui-icon-home |
خانه |
|
| ui-icon-info |
اطلاعات |
|
| ui-icon-location |
مکان |
|
| ui-icon-lock |
قفل |
|
| ui-icon-mail |
نامه |
|
| ui-icon-minus |
علامت منفی |
|
| ui-icon-navigation |
هدایتی |
|
| ui-icon-phone |
تلفن |
|
| ui-icon-power |
خاموش-روشن |
|
| ui-icon-plus |
بعلاوه |
|
| ui-icon-recycle |
بازیافت |
|
| ui-icon-refresh |
رفرش |
|
| ui-icon-search |
جستجو |
|
| ui-icon-shop |
خرید |
|
| ui-icon-star |
ستاره |
|
| ui-icon-tag |
تگ |
|
| ui-icon-user |
کاربر |
|
| ui-icon-video |
ویدئو |
کلاس های تم
جی کوئری موبایل، دو کلاس تم را ارائه می دهد که عبارتند از: a(قهوه ای) و b(مشکی). اما شما همچنین می توانید کلاس شخصی خود را نیز بسازید. در جدول زیر، تمام کلاس های تم امکان پذیر، لیست شده اند. حروف a-z به این معنی است که شما می توانید یک حرف از a تا z را مشخص کنید. بعنوان مثال : ui-bar-a یا ui-bar-b و ... .
| کلاس | توضیحات |
|---|---|
| (ui-bar-(a-z |
یک رنگ را برای یک نوار مشخص می کند- مانند header و footer و دیگر نوارها |
| ui-body-(a-z) |
رنگ یک قطعه محتوا را مشخص می کند- مانند قطعه محتوای صفحه(بد دانسته شده در ورژن 1.4.0) ، آیتم های لیست نمایشی، پاپ آپ ها، پیش ساخته ها، لود کننده، نوار های لغزنده و پنل ها |
| ui-btn-(a-z) |
رنگ را برای یک دکمه، مشخص می کند(و آیکن ها). |
| ui-group-theme-(a-z) |
رنگ را برای controlgroup ها و لیست های نمایشی و مجموعه های پیش ساخته، مشخص می کند. |
| ui-overlay-(a-z) |
رنگ پس زمینه ی صفحه ای را مشخص می کند که جعبه ی گفتگو و پاپ آپ ها و دیگر ظرف های صفحه در بالای آن نمایش می یابند. |
| ui-page-theme-(a-z) |
رنگ را برای صفحات مشخص می کند. |
کلاس های شبکه بندی
ستون های درون یک شبکه دارای عرض برابر هستند(و به طور کلی دارای عرض 100% هستند) و همچنین دارای border و background و margin یا position نمی باشند. 5 طرح بندی برای شبکه بندی ها وجود دارند که می توانند مورد استفاده قرار بگیرند:
| کلاس شبکه | ستون ها | عرض های ستون | مربوط است به | مثال |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | امتحان کنید |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | امتحان کنید |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | امتحان کنید |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | امتحان کنید |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | امتحان کنید |
برای اطلاعات بیشتر در مورد شبکه بندی ها، مقاله ی شبکه بندی در جی کوئری موبایل را مطالعه نمایید.
- نوشته شده توسط احسان عباسی
- بازدید: 4962
