آیکون‌های دکمه 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" تنظیم کنید:

Back:

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">جستجو</a>

آزمایش کنید