Convert HTML Checkbox Into iOS 7 Switch With Switchery.js

Checkbox is very useful for providing users input. When users input true value, it displays a check inside the little square box. Customizing the look of checkbox can be easily done via CSS. Even so, the customization affects only the box and check style. To customize the checkbox with a truly different design requires quite a bit of coding.

With the help of Switchery though, checkbox customization is a piece of cake. It’s able to automatically convert your checkbox element into a beautiful iOS7-like switch button. The switches can also be customized to match your design perfectly. Let’s check it out.

Recommended Reading: 10 Useful Fallback Methods For CSS And Javascript

Getting Started With Switchery

Switchery is a free standalone javascript library. To install it, you just need to include the Switchery javascript and style file into your web. You can get both files from GitHub.

 <link rel="stylesheet" type="text/css" href="css/switchery.css" /> <script type="text/javascript" src="js/switchery.js"></script>

To convert your old-fashioned checkbox, simply include your checkbox element with a class that will be referred to Switchery.

Giving the checkbox initial state is also very easy. You can do that by including the checked attribute inside HTML for checked state when first load. For example, we will add a demo class into a checkbox with checked state like so:

 <input type="checkbox" class="demo" checked />

For now, the checkbox doesn’t change yet. We still need to add the following javascript code into the HTML. This is where we put the defined checkbox class, and give some options (if needed).

 <script> var elem = document.querySelector('.demo'); // referred checkbox class is here var init = new Switchery(elem); // put option after elem attribute </script>

That’s it!

Customize The Switch

To give some option, it can be done within the javascript. This option can change the look and feel of the default switch. The following are all available options:

  • color : to change color of the switch element, work with HEX or RGB value
  • secondaryColor : to change "off" state color of the switch shadow and border
  • className : customize the switch element class name styled in switchery.css
  • disabled : to enable or disable the switch on click events, filled with boolean (true or false)
  • disabledOpacity : to change switch opacity when disabled is true, ranging from 0 to 1
  • speed : change the transition time length, e.g. ’0.1s’, ’0.5s’, ’2.2s’

For instance, with our previous switch, let’s change its first and secondary color. In the init variable, after elem attribute, just put the option within couple curl bracket like so:

 <script> var elem = document.querySelector('.demo'); var init = new Switchery(elem,{ color: '#fec200', secondaryColor: '#41b7f1' }); </script>

And here is the result:

Instead of customizing the state design only, there are still many available options like displaying multiple switches or linking the switch with other elements and getting its current state. As always the documentation page is a useful place to visit.

Conclusion

With a tool like Switchery, adapting any type of design from any device is becoming increasingly easier. Even more, it has been tested and is supported on many modern browsers like Chrome, Firefox, Opera, Safari and IE8+. If you want to adapt another iOS 7 style UI widgets design, you might want to check out Powerange for range slider control.

Related posts:

  1. UI Design: Customize Checkbox & Radio Input with iCheck
  2. Adding and Removing HTML Classes Upon Request With jQuery
  3. Generate Pure CSS3 Toggle Button With On/Off FlipSwitch Generator
  4. UI Design: Customize Checkboxes and Radio Buttons with CSS3




via hongkiat.com http://ift.tt/1t8uiOA