jQuery Plugin To Convert Select Box Into A Switch Control - Switch Button

Switch Button is a lightweight jQuery plugin used to convert a regular select box into a stylish compact switch control.

Basic Usage:

1. Load jQuery library and the jQuery switch button plugin in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.switchButton.js"></script>

2. Create a regular select box.

<select class="btn-switch">
  <option value="1">Item One</option>
  <option value="2">Item Two</option>
  <option value="3">Item Three</option>
  <option value="4" selected>Item Four</option>
</select>

3. Call the plugin to convert it into a toggleable switch button.

$('.btn-switch').switchButton();

4. Add your custom styles to this switch button.

.switch-select {
  overflow: hidden;
  border-radius: 3px;
}

.switch-select-button {
  text-align: center;
  font-size: 80%;
  padding: 5px;
  cursor: pointer;
  background: rgb(224, 224, 224);
}

.switch-select-button:hover {
  background: rgb(207, 55, 55);
  color: white;
}

5. Available options.

template: "<div></div>", // custom template
class: "switch-select", // element class
innerclass: "switch-select-button", // inner element class
width: "", // default to its parent width
marker: "#3577EE, // marker color
markerback: "#B9B9B9", // marker background color
markerh: "4px", // marker size
onchange: "function(value){}" // callback function

---

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