تخفیف ویژه هفته کتاب و کتاب خوانی، فرصت یادگیری با 40٪ تخفیف (کد تخفیف: Ketab)
زمان باقی مانده
سبد (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-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-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 مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی