تخفیف ویژه ماه محرم، فرصت یادگیری با 35٪ تخفیف (کد تخفیف: moharam)
زمان باقی مانده

 السّلام علیک یا اباعبداللّه الحسین

سبد (0)

تبلیغات

جی کوئری موبایل-کلاس های 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 امتحان کنید

برای اطلاعات بیشتر در مورد شبکه بندی ها، مقاله ی شبکه بندی در جی کوئری موبایل را مطالعه نمایید. 

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی