iOS Style Toggle Button Plugin with jQuery - iToggle

iToggle is a simple and lightweight jQuery plugin that turns a standard checkbox into a iOS style toggle switch button.

See also:

• iPhone Like Toggle Button Plugin - jQuery toggles
• jQuery Plugin For Switchy Select Options - Switchy

How to use it:

1. Create a standard Html checkbox input field. Using data-label-on and data-label-off attributes for ON/OFF options.

<label>Do you like jQueryScript?
<input type="checkbox" class="iToggle" data-label-on="of course!" data-label-off="no" checked="checked" />
</label>

2. The CSS for the toggle button.

.iToggle, .iToggle * {
box-sizing: border-box;
}
.iToggle {
display: inline-block;
border: 1px solid #AAA;
border-radius: 3px;
cursor: pointer;
vertical-align: text-bottom;
}
.iToggle.focus {
outline: none;
border-color: #549ED4;
box-shadow: 0 0 5px #549ED4;
}
.iToggle span.label {
display: inline-block;
padding: 3px 5px;
text-align: center;
color: white;
}
.iToggle .slider {
border: 1px solid #CCC;
background-color: rgb(238,238,238); /* fallback */
background-image: linear-gradient(bottom, rgb(199,199,199) 3%, rgb(245,245,245) 100%, rgb(255,255,255) 95%);
background-image: -o-linear-gradient(bottom, rgb(199,199,199) 3%, rgb(245,245,245) 100%, rgb(255,255,255) 95%);
background-image: -moz-linear-gradient(bottom, rgb(199,199,199) 3%, rgb(245,245,245) 100%, rgb(255,255,255) 95%);
background-image: -webkit-linear-gradient(bottom, rgb(199,199,199) 3%, rgb(245,245,245) 100%, rgb(255,255,255) 95%);
background-image: -ms-linear-gradient(bottom, rgb(199,199,199) 3%, rgb(245,245,245) 100%, rgb(255,255,255) 95%);
background-image: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0.03, rgb(199,199,199)),  color-stop(1, rgb(245,245,245)),  color-stop(0.95, rgb(255,255,255))  );
}
.iToggle .label-off {
background: #FF0000;
}
.iToggle .label-on {
background: #00DD00;
}

3. Include jQuery javascript library and jQuery iToggle plugin in the page.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="itoggle.jquery.js"></script> 

4. Just call the plugin and you're done.

<script>
$(function() {
$('input[type=checkbox]').iToggle();
});
</script>

5. Options.

<script>
$(function() {
$('input[type=checkbox]').iToggle({
speed: 70, // the speed of animation.
defaultOffLabel: 'no',
defaultOnLabel: 'yes'
});
});
</script>

Change log:

v1.0.5 (2013-11-11)

• added vendor-prefix to some css props

v1.0.4 (2013-11-11)

• General improvement

---

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