jQuery Plugin To Turn Checkboxes Into Toggle Buttons - BlueToggleButton

A dead simple jQuery & jQuery UI based input type="checkbox" replacement that turns a general checkbox into a nice looking toggle button.

Basic Usage:

1. Include the requlired jQuery and jQuery UI in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

2. Include the jQuery BlueToggleButton plugin after jQuery library.

<script src="toggle.button.js"></script>

3. Insert a normal checkbox in your web page.

<input type="checkbox" id="toggle-button" checked>

4. Call the plugin with default settings on the checkbox you create.

<script>
$("#toggle-button").toggleButton();
</script>

5. Sample CSS to custom the styles of your toggle button.

.toggleButton {
background-image: url('textures/highlight.png');
background-image: none, -webkit-linear-gradient(top, #f6f6f6 0, #eaeaea 100%);
background-image: none, -moz-linear-gradient(top, #f6f6f6 0, #eaeaea 100%);
background-image: none, -o-linear-gradient(top, #f6f6f6 0, #eaeaea 100%);
background-image: none, linear-gradient(to bottom, #f6f6f6 0, #eaeaea 100%);
background-position: 50% 50%;
background-color: #e3e3e3;
border: solid 1px lightgrey;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
cursor: pointer;
padding: 5px 10px;
display: inline-block;
margin: 0;
font-family: inherit;
line-height: 1.66em;
text-align: center;
cursor: pointer;
text-decoration: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.toggle-img {
background-position: center;
display: inline-block;
float: left;
width: 16px;
height: 16px;
margin-top: 6px;
margin-right: 5px;
overflow: hidden;
background-repeat: no-repeat;
font-size: 0;
line-height: 0;
text-indent: -3333px;
text-align: center;
vertical-align: middle;
}

6. All the default options.

<script>
$("#toggle-button").toggleButton({
text : "Toggle",
toggleOnColor : "green",
onTitle : "On",
offTitle : "Off",
onImg: "toggleON.png",
offImg: "toggleOFF.png",
change : null
});
</script>

---

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