iOS 7 Style Smooth Toggle Buttons With jQuery and CSS3 - Checkable

Just another jQuery plugin used to create an iOS 7 like smooth toggle buttons with CSS3 transitions and transforms.

See also:

• Creating iOS 7 Style Toggle Switches With Switchery.js

How to use it:

1. Include the latest jQuery javascript library and jQuery checkable plugin at the end of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="jquery.checkable.js"></script> 

2. Creating a toggle button using any Html elements like DIV, SPAN, P, etc.

<div class="switch" data-name="human" data-checked="false" data-value="true">
<div class="helper"></div>
</div>

3. The required CSS to style the toggle button.

.switch {
display: block;
box-sizing: border-box;
width: 70px;
height: 40px;
border-radius: 999px;
background-color: #d8d9db;
margin-bottom: 10px;
-webkit-transition: background-color cubic-bezier(.25, .46, .45, .94) .2s;
-moz-transition: background-color cubic-bezier(.25, .46, .45, .94) .2s;
transition: background-color cubic-bezier(.25, .46, .45, .94) .2s
}
.switch .helper {
margin-top: 2px;
margin-left: 2px;
border-radius: 50%;
width: 36px;
height: 36px;
display: inline-block;
background-color: #fff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.25, .46, .45, .94);
-moz-transition-timing-function: cubic-bezier(.25, .46, .45, .94);
transition-timing-function: cubic-bezier(.25, .46, .45, .94)
}
.switch.ui-checked {
border-color: #4cd864;
background-color: #4cd864
}
.switch.ui-checked .helper {
-webkit-transform: translateX(30px);
-moz-transform: translateX(30px);
-ms-transform: translateX(30px);
-o-transform: translateX(30px);
transform: translateX(30px)
}

4. Enable the toggle button.

<script>
$(".switch").checkable("Value", true|false) // sets the value.
$(".switch").checkable("Value") // returns the value.
</script>

---

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