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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!
6 5999 ۲۹ اردیبهشت ۹۳ علی امینی

به نام خدا

با سلام خدمت همگی دوستان سون لرنی عزیز. امیدوارم حالتون خوب باشه. در پست " 9 استایل زیبا برای چک باکس ها با CSS3 " با نحوه ی استایل دادن به چک باکس ها آشنا شدیم و فهمیدیم که نمیشه به طور مستقیم به چک باکس ها استایل داد.

switchery-screenshot

 

با کمک Swichery میتونید چک باکس های خودتونو به سوئیچ های زیبای iOS 7 تبدیل کنید. همچنین میتونید با تغییر کدهای CSS این کتابخانه، سوئیچ هارو با طراحی خودتون ست کنید.

شروع کار با Swichery

Switchery یک کتابخانه ی جاوااسکریپت رایگانه. شما میتونید فایل های این کتابخانه رو از GitHub دانلود کنید. ابتدا باید فایل Js و فایل CSS این کتابخونه رو در صفحه ی خورتون فراخوانی کنید.

و در قدم بعدی با دادن یک کلاس به چک باکس های قدیمی، میتونید اونهارو به سوئیچ های iOS 7 تبدیل کنید. مثلا ما به چک باکسمون کلاس "demo" رو میدیم.

و حالا به صورت زیر از کتابخانه Swichery استفاده میکنیم.

نتیجه:

result

 

سفارشی کردن سوئیچ

برای سفارشی کردن سوئیچ ها چند گزینه وجود دارد که به صورت پیشفرض مقدار هایی رو گرفته اند.

  • color : برای تغییر رنگ عنصر با مقدار HEX و یا RGB.
  • secondaryColor : برای تغییر رنگ حالت خاموش به کار میرود.
  • className : نام کلاس سوئیچ برای سفارشی کردن استایل
  • disabled : برای فعال و غیر فعال کردن به کار میرود. مقادیر False و یا True میگیرد.
  • disabledOpacity : برای تعیین شفافیت سوئیچ غیر فعال؛ مقداری بین 0 و 1 میگیرد.
  • speed : برای تعیین سرعت عوض شدن حالت به کار میرود. مقادیری مانند '0.5s' یا '1.5s' میگیرد.

JavaScript:

result-option

میتونید دمو رو در JSfiddle ببینید.

اهداف و مزایای استفاده از این ابزار :

  • استفاده ی آسان
  • زیبایی سوئیچ ها
  • کم حجم بودن کتابخانه
  • سفارشی کردن ظاهر سوئیچ ها

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

  • ‏‏

    بسیار جالبه! ممنون از زحمتتون

  • ‏‏
    Amirhossein Ziaee(۴ خرداد ۱۳۹۳)

    من هرکاری کردم کار نداد !
    می شه اماده شدش را بزارید؟

    • ‏‏
      علی امینی(۵ خرداد ۱۳۹۳)

      حتما به چند نکته توحه نکردید. باید در ابتدای صفحه استایل و اسکریپت سوئیچ رو فراخوانی کنید و در آخر صفحه توسط جاوا اسکریپت، چک باکس رو به سوئیچ تبدیل کنید.
      در اینجا میتونید کد های کامل رو ببینید.

  • ‏‏
    Amirhossein Ziaee(۵ خرداد ۱۳۹۳)

    ممنون درست شد
    من دستورات JS را بالای چک باکس گذاشتم بودم
    الان قرار دادم پایینش درست شد ❓

  • ‏‏
    علی(۴ دی ۱۳۹۳)

    میشه دکمه رایویی و لیست های انتخابی, تکست باکس ها و Button های ارسال رو هم مثل این چک باکس ها استایل دهی کرد؟
    ممنون میشم اگه کمکم کنید خیلی بشون نیاز دارم
    با سپاس ❓

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram