apache-cordova

آموزش برنامه نویسی Cordova – آیکن ها در jQuery Mobile یا jQuery Mobile Icons

jQuery Mobile یک سری از آیکن ها (icon) را برای ما آماده کرده که استفاده از این آیکن ها باعث زیباتر شدن و مطلوب تر شدن خروجی کار می شود.

 

اضافه کردن آیکن (icon) به دگمه ها در jQuery Mobile

برای اضافه کردن آیکن (icon) به دگمه از کلاس ui-icon  و همچنین برای معین کردن مکان آیکن از کلاس ui-btn-icon-pos استفاده می کنیم.

 

نکته قابل توجه این است که برای بقیه دگمه ها مثل دگمه ها در list view یا form  ها از خاصیت data-icon استفاده باید کرد که در ادامه درس ها به آن پرداخته میشود.

در قطعه کد زیر مثالی در این باره آورده شده است:

 

محل قرار گیری آیکن ها

شما می توانید با ۴ مقدار toprightbottom یا left مشخص کنید که آیکن در کجای دگمه قرار بگیرد.

 

نمایش دگمه ها فقط با آیکن

برای اینکه در داخل دگمه ها فقط آیکن نمایش پیدا کند و نوشته و چیز دیگری نمایش داده نشود و اندازه دگمه به اندازه آیکن در آید از خاصیت notext استفاده می کنیم.

 

برداشتن دایره خاکستری زیر آیکن

در حالت پیشفرض یک دایره به رنگ خاکستری رنگ اطراف آیکن را احاطه کرده. برای برداشتن آن خاصیت  ui-nodisc-icon را به خود گزینه مورد نظر یا به div بالا دستش اضافه می کنیم.

 

رنگ سفید یا سیاه برای آیکن ها

در حالت پیشفرض تمام آیکن ها سفید می باشند. برای تبدیل این رنگ به مشکی ، خاصیت ui-alt-icon را به خود گزینه مورد نظر یا به div بالا دستش اضافه می کنیم.

این آموزش در باره آیکن در jQuery Mobile بود که به پایان رسید.

در ادامه به بقیه موارد می پردازیم.

باتشکر.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *