jQuery Plugin For Clean Switch Button - switcher

switcher is a lightweight and simple plugin that helps you create slidable Switch Buttons using jQuery, CSS and html.

How to use it:

1. Include jQuery library and switcher.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.switcher.js"></script>

2. Markup

<div class="s_wrapper">
<div class="switcher js__switcher">
<div class="s_label js__s_label_left">OFF</div>
<a href="#" class="s_checkbox js__s_checkbox js__s_left"> <span class="js__s_active"></span> <span class="js__s_noactive"></span> </a>
<div class="s_label js__s_label_right">ON</div>
</div>
</div>

3. The CSS

.switcher {
width: 300px;
height: 60px;
}
.s_label {
float: left;
margin: 2px 0 0;
cursor: default;
}
.s_checkbox {
float: left;
width: 68px;
height: 34px;
margin: -2px 10px 10px;
background-image: url("../img/graphics.png");
}
.s_checkbox span {
float: left;
width: 50%;
height: 100%;
}
.another_switcher {
width: 125px;
height: 60px;
}
.js__s_left {
background-position: -10px -10px;
}
.js__s_right {
background-position: -10px -54px;
}
.js__s_active {
cursor: default;
}

4. Call the plugin

<script type="text/javascript">
$(function() {
      $(".js__switcher").switcher();
});
</script>

---

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