Switchery.Js : تبدیل چک باکس ها به سوئیچ های iOS 7

- visibility ۶ mode_comment

به نام خدا

با سلام خدمت همگی دوستان سون لرنی عزیز. امیدوارم حالتون خوب باشه. در پست " 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 ببینید.

comment دیدگاه کاربران
P.Behravesh

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

Amirhossein Ziaee

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

علی امینی

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

Amirhossein Ziaee

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

علی

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

برای دکمه رادیویی و چک باکس میتونید به این آموزش مراجعه کنید.
برای فیلد های فرم هم میتونید از این آموزش استفاده کنید.

نیاز به لاگین

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