This time I will share jQuery Plugin and tutorial about Multi-state Toggle Switch Plugin with jQuery – SwitchStateButton, hope it will help you in programming stack.
SwitchStateButton is a very simple jQuery plugin that helps you creates toggle switches with support for multiple option states.
How to use it:
1. Include the tsb.js file after the jQuery JavaScript as shown in the code snippet below.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="js/tsb.js"></script> |
2. Render a basic toggle switch with 3 states inside the container you specify.
1 |
$("#selector").threestatebutton({ |
3. Output the selected state.
1 |
<span id="output">Output: state 1</li> |
1 |
function stateChanged(state, source) { |
2 |
var nb = $(source).attr("id").substring(6); |
3 |
var dispid = "#output" + nb; |
4 |
$(dispid).text("Output " + nb + ": state " + state); |
1 |
$("#selector").threestatebutton({ |
4 |
stateChanged: stateChanged |
4. Apply your own CSS to the toggle switch.
02 |
background-color: #4CD964; |
03 |
border-color: #ECF0F1; |
04 |
border-width: 1px 1px 1px 1px; |
18 |
background-color: #fff; |
23 |
vertical-align: central; |
This awesome jQuery plugin is developed by Arthur0g. For more Advanced Usages, please check the demo page or visit the official website.
