جی کوئری موبایل-آیکن ها
جی کوئری موبایل، یک مجموعه از آیکن ها را برای زیباتر شدن دکمه های شما ارائه می دهد.
اضافه کردن آیکن ها به دکمه های جی کوئری موبایل
برای اضافه کردن یک آیکن به دکمه ی خود، از کلاس ui-icon استفاده کنید و سپس به وسیله ی یک کلاس مکان گذاری، مکان قرارگیری آیکن خود را مشخص کنید(ui-btn-icon-pos):
کد
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
نکته: برای دیگر دکمه ها، از قبیل فرمها و ... شما باید از خصوصیت data-icon استفاده نمایید. این موضوع در آموزش های بعدی، بررسی خواهد شد.
در زیر، برخی از آیکن هایی که جی کوئری موبایل ارائه می دهد را لیست کرده ایم:
| کلاس آیکن | توضیحات | مثال |
|---|---|---|
| ui-icon-arrow-l | Left Arrow | امتحان کنید |
| ui-icon-arrow-r | Right Arrow | امتحان کنید |
| ui-icon-info | Information | امتحان کنید |
| ui-icon-delete | Delete | امتحان کنید |
| ui-icon-back | Back | امتحان کنید |
| ui-icon-audio | Speakers | امتحان کنید |
| ui-icon-lock | Padlock | امتحان کنید |
| ui-icon-search | Search | امتحان کنید |
| ui-icon-alert | Alert | امتحان کنید |
| ui-icon-grid | Grid | امتحان کنید |
| ui-icon-home | Home | امتحان کنید |
برای دیدن یک مرجع کامل از تمام آیکن های دکمه ی جی کوئری موبایل، به مرجع آیکن های جی کوئری موبایل، مراجعه نمایید.
آیکن های مکان گذاری
شما می توانید از 4 مقدار برای مکان گذاری آیکن در دکمه ی مورد نظر استفاده نمایید که عبارتند از: top و right و bottom و left .
برای مشخص کردن مکان مورد نظر، از کلاس ui-btn-icon استفاده نمایید:
مکان گذاری آیکن برای دکمه های لینک
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">Right</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">Bottom</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Left</a>
 |
نکته: اگر در دکمه های لینک، مکان آیکن را مشخص نکنید، آیکن مورد نظر نمایش داده نخواهد شد. |
|---|
تنها نمایش دادن آیکن موردنظر
برای اینکه فقط آیکن مورد نظر نمایش داده شود، از عبارت "notext" برای مقدار مکان گذاری، استفاده نمایید:
مثال
حذف کردن دایره ی دور آیکن
به طور پیش فرض تمام آیکن ها دارای یک دایره ی خاکستری به دور خود هستند. برای حذف کردن این دایره کلاس "ui-nodisc-icon" را به عنصر مورد نظر و یا والد آن، اضافه کنید:
مثال
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">Without circle</a>
آیکن های سیاه یا سفید رنگ
به طور پیش فرض، تمام آیکن ها سفید هستند. برای تغییر دادن رنگ سفید به سیاه، عبارت "ui-alt-icon" را به عنصر مورد نظر یا والد آن اضافه نمایید:
مثال
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon">Black</a>
مثال های بیشتر
اضافه کردن کلاس "ui-nodisc-icon" به یک ظرف
یک مثال که در آن، کلاس "ui-nodisc-icon" به یک ظرف(container) اضافه شده است.
اضافه کردن کلاس "ui-alt-icon" به یک ظرف
یک مثال که در آن، کلاس "ui-alt-icon" به یک ظرف(container) اضافه شده است.
- نوشته شده توسط احسان عباسی
- بازدید: 5348
