آموزش کلاس های CSS در برنامه نویسی جی کوئری موبایل
آموزش کلاس های CSS در برنامه نویسی جی کوئری موبایل
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش کلاس های CSS در برنامه نویسی جی کوئری موبایل خواهیم پرداخت.
کلاس های CSS جی کوئری
شما می توانید از انواع مختلف کلاس های CSS برای سبک دادن به عناصر استفاده کنید ، همانطور که در بخش های زیر توضیح داده شده است.
| کلاس و توضیحات | |
|---|---|
| 1 | ui-corner-all
این عناصر را با گوشه های گرد نشان می دهد. |
| 2 | ui-shadow
سایه را برای عناصر نمایش می دهد. |
| 3 | ui-overlay-shadow
سایه همپوشانی را برای عناصر نمایش می دهد. |
| 4 | ui-mini
عناصر کوچکتر را نمایش می دهد. |
کلاس های دکمه ای
جدول زیر کلاس های دکمه را ذکر می کند که با عناصر لنگر یا دکمه استفاده می شوند –
| کلاس و توضیحات | |
|---|---|
| 1 | ui-btn
این مشخص می کند که عنصر به عنوان دکمه مدل می شود. |
| 2 | ui-btn-inline
این دکمه را به عنوان عنصر درون خطی نشان می دهد که فضای مورد نیاز را برای برچسب ذخیره می کند. |
| 3 | ui-btn-icon-top
این نماد را بالای متن قرار می دهد. |
| 4 | ui-btn-icon-right
این نماد را در سمت راست متن قرار می دهد. |
| 5 | ui-btn-icon-bottom
این نماد را در زیر متن قرار می دهد. |
| 6 | ui-btn-icon-left
نماد سمت چپ متن را قرار می دهد. |
| 7 | ui-btn-icon-notext
این تنها نماد را نشان می دهد. |
| 8 | ui-btn-a|b
این رنگ دکمه را نمایش می دهد (“a” رنگ پس زمینه پیش فرض خواهد بود یعنی خاکستری و “b” رنگ زمینه را به سیاه تغییر می دهد). |
کلاس های آیکون
جدول زیر کلاس های آیکون را نشان می دهد که با عناصر لنگر یا دکمه استفاده می شوند –
| کلاس و توضیحات | |
|---|---|
| 1 | ui-icon-action
این آیکون عمل را نشان می دهد. |
| 2 | ui-icon-alert
علامت تعجب را در داخل یک مثلث نشان می دهد. |
| 3 | ui-icon-arrow-d-l
با فلش سمت چپ مشخص می شود. |
| 4 | ui-icon-arrow-d-r
با فلش راست پایین را مشخص می کند. |
| 5 | ui-icon-arrow-u-l
با فلش سمت چپ مشخص می شود. |
| 6 | ui-icon-arrow-u-r
با فلش راست مشخص می شود. |
| 7 | ui-icon-arrow-l
پیکان سمت چپ را مشخص می کند. |
| 8 | ui-icon-arrow-r
پیکان سمت راست را مشخص می کند. |
| 9 | ui-icon-arrow-u
پیکان رو به بالا را مشخص می کند. |
| 10 | ui-icon-arrow-d
پیکان رو به پایین را مشخص می کند. |
| 11 | ui-icon-bars
3 میله افقی را یکی بالاتر از دیگری نشان می دهد. |
| 12 | ui-icon-bullets
این 3 بولت افقی را یکی بالاتر از دیگری نشان می دهد. |
| 13 | ui-icon-carat-d
این عیار را به سمت پایین نشان می دهد. |
| 14 | ui-icon-carat-l
عیار را به سمت راست نمایش می دهد. |
| 15 | ui-icon-carat-r
عیار را به سمت راست نمایش می دهد. |
| 16 | ui-icon-carat-u
عیار را به بالا نمایش می دهد. |
| 17 | ui-icon-check
این آیکون علامت گذاری را نشان می دهد. |
| 18 | ui-icon-comment
این نظر یا پیام را مشخص می کند. |
| 19 | ui-icon-forbidden
این نماد ممنوع را نمایش می دهد. |
| 20 | ui-icon-forward
این نماد رو به جلو را مشخص می کند. |
| 21 | ui-icon-navigation
این آیکون پیمایش را مشخص می کند. |
| 22 | ui-icon-recycle
آیکون بازیافت را نمایش می دهد. |
| 23 | ui-icon-refresh
این آیکون تازه کردن را نشان می دهد. |
| 24 | ui-icon-tag
این آیکون برچسب را نشان می دهد. |
| 25 | ui-icon-video
این آیکون فیلم یا دوربین را نشان می دهد. |
کلاس های تم
این دو نوع تم مختلف مانند تم “a” و تم “b” را برای سفارشی کردن ظاهر برنامه فراهم می کند. شما می توانید کلاسهای موضوعی خود را با ضمیمه نامه swatch (a-z) ایجاد کنید. جدول زیر کلاسهای موضوعی را که از حرف a تا z مشخص شده اند ، لیست می کند.
| Sr.No. | Class & Description |
|---|---|
| 1 | ui-bar-(a-z)
این رنگ برای نوار شامل هدر ها، فوتر ها و سایر میله های صفحه را نشان می دهد. |
| 2 | ui-body-(a-z)
این رنگ برای بلوک محتوا شامل فهرست ، پنجره های پاپ آپ لغزنده ها ، پانل ها ، لودرها و غیره را نمایش می دهد. |
| 3 | ui-btn-(a-z)
این رنگ برای دکمه را نشان می دهد. |
| 4 | ui-group-theme-(a-z)
این رنگ برای گروه های کنترل ، لیست ها و مجموعه های جمع شونده نمایش داده می شود. |
| 5 | ui-overlay-(a-z)
این رنگ زمینه برای پنجره های پنجره بازشو ، گفتگو و صفحه را نشان می دهد. |
| 6 | ui-page-theme-(a-z)
این رنگ صفحات را نمایش می دهد. |
کلاس های شبکه
جدول زیر کلاسهای شبکه ای را نشان می دهد که با عرض برابر ، بدون حاشیه ، پس زمینه ، حاشیه یا پر کردن استفاده می شوند.
| Sr.No. | Grid Class | Columns | Column Widths | Corresponds To |
|---|---|---|---|---|
| 1 | ui-grid-solo | 1 | 100% | ui-block-a |
| 2 | ui-grid-a | 2 | 50%/50% | ui-block-a|b |
| 3 | ui-grid-b | 3 | 33%/33%/33% | ui-block-a|b|c |
| 4 | ui-grid-c | 4 | 25%/25%/25%/25% | ui-block-a|b|c|d |
| 5 | ui-grid-d | 5 | 20%/20%/20%/20%/20% | ui-block-a|b|c|d|e |
لیست جلسات قبل آموزش برنامه نویسی جی کوئری موبایل
- آموزش برنامه نویسی جی کوئری موبایل
- مقدمه برنامه نویسی جی کوئری موبایل
- آموزش نصب و راه اندازی جی کوئری موبایل
- آموزش صفحات در برنامه نویسی جی کوئری موبایل
- آموزش آیکون ها در برنامه نویسی جی کوئری موبایل
- آموزش انتقال ها در برنامه نویسی جی کوئری موبایل
- آموزش طرح بندی در برنامه نویسی جی کوئری موبایل
- آموزش ویجت ها در برنامه نویسی جی کوئری موبایل
- آموزش رویدادها در برنامه نویسی جی کوئری موبایل
- آموزش فرم ها در برنامه نویسی جی کوئری موبایل
- آموزش تم ها در برنامه نویسی جی کوئری موبایل
.svg)
دیدگاه شما