illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6336 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

4 1682 ۱۸ اسفند ۹۳

در این مطلب میخوام یک ابزار بنام 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 استفاده کنید. بصورت زیر :

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

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    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

    • ‏‏
      محمد اسفندیاری(۱۹ اسفند ۱۳۹۳)

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram