iCheck : عوض کردن استایل checkbox و radio مثل آب خوردن!

- visibility ۴ mode_comment

در این مطلب میخوام یک ابزار بنام iCheck رو خدمتتون معرفی کنم که با استفاده از اون میتونین براحتی هر چه تمامتر استایلهای متفاوتی رو برای Checkbox و Radio Button قرار بدین و با استفاده از اون کاری کنید که این عنصر ها در همه مرورگرها بصورت یکسان نشان داده شوند. این ابزار حتی از IE6 هم پشتیبانی میکنه. این بدان معناست که شما میتونین بدون هیچ نگرانی از اون استفاده کنید.

iCheck

iCheck1

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jquery.min.js و icheck.min.js و فایلهایی که در پوشه skins وجود دارند ، نیاز داریم. من این فایلهارو رو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید. حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML مورد نظر رو نوشتیم. در بالا یک checkbox و دو radio قرار دادیم و id های مورد نظر رو به اونا نسبت دادیم. شما باید از یکی از پوسته های آماده و یا پوسته ای که خودتون طراحی کردین استفاده کنید. پیشنهاد میکنم که از همین پوسته های موجود استفاده کنید. در پوشه skins تعدادی پوسته وجود داره که عبارتند از :

  • flat
  • futurico
  • line
  • minimal
  • polaris
  • square

من اینجا طرح flat رو توضیح میدم و بقیه رو هم میتونین مانند این انجام بدین. اگر در سایت مورد نظر flat رو ببینید ، بصورت زیر هست :

iCheck2

در تصویر بالا برای شما دمو قرار داده شده. برای توضیح در مورد این استایل باید روی Usage کلیک کنید. در اونجا بصورت کامل و قدم به قدم توضیح داده که چیکار باید کرد. در هر طرح از جمله flat رنگهای متفاوتی وجود داره که شما میتونین هر کدوم رو که دوست داشتین انتخاب کنید. برای هر رنگ باید فایل CSS متناظر اون رو در قسمت head قرار بدین. این رنگ ها عبارتند از :

  • Black — flat.css
  • Red — red.css
  • Green — green.css
  • Blue — blue.css
  • Aero — aero.css
  • Grey — grey.css
  • Orange — orange.css
  • Yellow — yellow.css
  • Pink — pink.css
  • Purple — purple.css

فرض کنید من رنگ قرمز ( Red ) مد نظرم هست. برای اینکار باید فایل red.css رو در قسمت head قرار بدیم ، بصورت زیر :

بعد از این کار ، باید در تگ اسکریپت نهایی کدهای زیر رو قرار بدین :

در ابتدا تمام input ها رو انتخاب کردیم و متد iCheck رو برای اونا فراخوانی کردیم. این متد ، ویژگی های زیادی داره که من در بالا 3 تا از مهمتریناش رو قرار دادم. بصورت زیر :

  • checkboxClass : نام کلاس مورد نظر برای Checkbox ها رو ، میتونین در این قسمت قرار بدین. میبینید که flat قرار دادم و از نوع red
  • radioClass : نام کلاس مورد نظر برای radio ها رو ، میتونین در این قسمت قرار بدین. میبینید که flat قرار دادم و از نوع red
  • cursor : اگر مقدار این ویژگی رو true قرار بدین ، ماوس که روی input ها بره به شکل یک دست در میاد

بهمین منوال میتونین برای دیگر skin ها هم عمل کنید. همچنین این ابزار تعداد زیادی Event یا رویداد رو پشتیبانی میکنه ، مثلا فرض کنید من میخوام وقتی که checkbox انتخاب شد ، یک alert نشون داده بشه. برای اینکار میتونین از رویداد ifChecked استفاده کنید. بصورت زیر :

لیست کامل این رویدادها در سایت مورد نظر وجود داره.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

comment دیدگاه کاربران
mahyar

salam
mikham bedunam shoma in abzararo chetor peyda mikonid
koja search mikonid
ya che juri bahashun ashna mishid
man kheyli mogheha donbale ye chizayi hastam ama nemdiunam tu kodum site bayad donbaleshun begardam
alan soalam ineke khode shoma masalan che juri ba in abzare jadid ashna shodid
mamnun misham rahnamayim konid

محمد اسفندیاری

با سلام
راستیتش از جای مشخصی نیست
شاید ماهانه هزاران لینک رو میبینم که از بین اونا بهتریناش رو فیلتر میکنم و برای شما قرار میدم
بیشتر ابزارها که خودشون مستندات دارن ، من کمی اونارو ساده تر میگم که همه کاربران متوجه بشن
اونایی هم که مستنداتش ضعیفه رو خودم باهاش ور میرم تا باهاش آشنا بشم
کلا بعد از مدتی دستتون راه میوفته که باید چیکار کنید
پیشنهاد میکنم همیشه سری به سایت بزنید تا با آخرین ابزارهای مفید آشنا بشد
موفق باشید

mahyar

khob khoshhal misham age chandta az marufasho behem moarefi konid
man ziyad be site sar mizanam

محمد اسفندیاری

میتونین در خبرنامه این سایتهای پایین عضو بشید :
http://designmodo.com/
http://sidebar.io/
http://heydesigner.com/
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.