Creating iOS 7 Style Toggle Switches With Switchery.js

Creating iOS 7 Style Toggle Switches With Switchery.js
File Size: 24.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Switchery is a simple javascript component that converts the standard Html checkboxes into flat iOS 7 style toggle switches with nice sliding effects.

Basic Usage:

1. Create a set of checkboxes on the web page.

<input type="checkbox" class="js-switch" />
<input type="checkbox" class="js-switch" checked />
<input type="checkbox" class="js-switch" />

2. The basic CSS for the component.

.switchery {
background-color: #fff;
border: 1px solid #dfdfdf;
border-radius: 20px;
cursor: pointer;
display: inline-block;
height: 30px;
position: relative;
vertical-align: middle;
width: 50px;
}
.switchery > small {
background: #fff;
border-radius: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
height: 30px;
position: absolute;
top: 0;
width: 30px;
}

3. Load the Switchery.js script at the bottom of your page.

<script type="text/javascript" src="standalone/switchery.js"></script> 

4. The javascript.

<script type="text/javascript">
var Switchery = require('switchery');

// if-else statement used only for fixing <IE9 issues
if (Array.prototype.forEach) {
var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));

elems.forEach(function(html) {
var switchery = new Switchery(html);
});
} else {
var elems = document.querySelectorAll('.js-switch');

for (var i = 0; i < elems.length; i++) {
var switchery = new Switchery(elems[i]);
}
}
</script>

Change log:

v0.5.0 (2014-02-09)

  • Removes the internal validation for loaded switches and lets people do it on their own
  • Sets a data attribute to handle multiple calls for a checkbox

This awesome jQuery plugin is developed by abpetkov. For more Advanced Usages, please check the demo page or visit the official website.