آیکون‌های دکمه jQuery Mobile

یک مجموعه از آیکون‌ها که jQuery Mobile ارائه می‌دهد می‌تواند دکمه‌های شما را جذاب‌تر کند.

افزودن آیکون به دکمه‌های jQuery Mobile

برای افزودن آیکون به دکمه‌های خود از ویژگی data-icon استفاده کنید:

<a href="#anylink" data-role="button" data-icon="search">البحث</a>

إشارة:شما همچنین می‌توانید ویژگی data-icon را در عناصر <button> یا <input> استفاده کنید.

در اینجا تعدادی از آیکون‌های قابل استفاده که jQuery Mobile ارائه می‌دهد را لیست کرده‌ایم:

مقدار ویژگی توضیح آیکون مثال
data-icon="arrow-l" کشش به سمت چپ آزمایش
data-icon="arrow-r" کشش به سمت راست آزمایش
data-icon="delete" حذف آزمایش
data-icon="info" اطلاعات آزمایش
data-icon="home" خانه آزمایش
data-icon="back" بازگشت آزمایش
data-icon="search" جستجو آزمایش
data-icon="grid" شبکه آزمایش

برای اطلاعات کامل در مورد آیکون‌های دکمه jQuery Mobile، لطفاً به دستورالعمل آیکون jQuery Mobile。

محل‌دهی آیکون

شما همچنین می‌توانید موقعیت آیکون را تعیین کنید: بالا، راست، پایین یا چپ.

برای تعیین موقعیت آیکون از ویژگی data-iconpos استفاده کنید:

موقعیت آیکون:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top"> بالا</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right"> دراینجا</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom"> نیچیلی</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">اليسار</a>

جرب بنفسك

إشارة:بافتراض، يتم وضع الأيقونات في الجانب الأيسر في جميع الأزرار.

عرض الأيقونة فقط

إذا كنت بحاجة إلى عرض الأيقونة فقط، فأحضر data-iconpos إلى "notext":

رجوع:

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">البحث</a>

جرب بنفسك