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

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

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

برای اضافه کردن یک آیکن به دکمه ی خود، از کلاس 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>

خودتان امتحان کنید »

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

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

برای اینکه فقط آیکن مورد نظر نمایش داده شود، از عبارت "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>

خودتان امتحان کنید »