سبد (0)

آموزش‌های پیشنهادی فرادرس

جی کوئری موبایل-آیکن ها

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



اضافه کردن آیکن ها به دکمه های جی کوئری موبایل

برای اضافه کردن یک آیکن به دکمه ی خود، از کلاس 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-lLeft Arrowامتحان کنید
ui-icon-arrow-rRight Arrowامتحان کنید
ui-icon-infoInformationامتحان کنید
ui-icon-deleteDeleteامتحان کنید
ui-icon-backBackامتحان کنید
ui-icon-audioSpeakersامتحان کنید
ui-icon-lockPadlockامتحان کنید
ui-icon-searchSearchامتحان کنید
ui-icon-alertAlertامتحان کنید
ui-icon-gridGridامتحان کنید
ui-icon-homeHomeامتحان کنید

برای دیدن یک مرجع کامل از تمام آیکن های دکمه ی جی کوئری موبایل، به مرجع آیکن های جی کوئری موبایل، مراجعه نمایید. 


آیکن های مکان گذاری

شما می توانید از 4 مقدار برای مکان گذاری آیکن در دکمه ی مورد نظر استفاده نمایید که عبارتند از: top و right و bottom و left .

برای مشخص کردن مکان مورد نظر، از کلاس ui-btn-icon استفاده نمایید:

مکان گذاری آیکن برای دکمه های لینک

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">Top</a>
<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>
خودتان امتحان کنید »
Note

نکته: اگر در دکمه های لینک، مکان آیکن را مشخص نکنید، آیکن مورد نظر نمایش داده نخواهد شد. 


تنها نمایش دادن آیکن موردنظر

برای اینکه فقط آیکن مورد نظر نمایش داده شود، از عبارت "notext" برای مقدار مکان گذاری، استفاده نمایید:

مثال

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext">Search</a>
خودتان امتحان کنید »

حذف کردن دایره ی دور آیکن

به طور پیش فرض تمام آیکن ها دارای یک دایره ی خاکستری به دور خود هستند. برای حذف کردن این دایره کلاس "ui-nodisc-icon" را به عنصر مورد نظر و یا والد آن، اضافه کنید: 

مثال

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">With circle (default)</a>
<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">White</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon">Black</a>
خودتان امتحان کنید »

Examples

مثال های بیشتر

اضافه کردن کلاس "ui-nodisc-icon" به یک ظرف
یک مثال که در آن، کلاس "ui-nodisc-icon" به یک ظرف(container) اضافه شده است. 

اضافه کردن کلاس "ui-alt-icon" به یک ظرف
یک مثال که در آن، کلاس "ui-alt-icon" به یک ظرف(container) اضافه شده است. 

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