http://www.larentis.eu/bootstrap_toggle_buttons/
Just include Twitter Bootstrap, jQuery and Bootstrap Toggle Buttons CSS and Javascript
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap-toggle-buttons.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.toggle.buttons.js"></script>HTML
<div id="toggle-button">
<input id="checkbox1" type="checkbox" value="value1" checked="checked">
</div>JS
$('#toggle-button').toggleButtons();HTML
<div id="toggle-button">
<input id="checkbox1" type="checkbox" value="value1" checked="checked">
</div>JS
$('#toggle-button').toggleButtons({
onChange: function ($el, status, e) {
// $el = $('#toggle-button');
// status = [true, false], the value of the checkbox
// e = the event
console.log($el, status, e);
},
width: 100,
height: 25,
font: {
'font-size': '20px',
'font-style': 'italic'
},
animated: true,
transitionspeed: 1, // Accepted values float or "percent" [ 1, 0.5, "150%" ]
label: {
enabled: "ON",
disabled: "OFF"
},
style: {
// Accepted values ["primary", "danger", "info", "success", "warning"] or nothing
enabled: "primary",
disabled: "danger",
custom: {
enabled: {
background:"#FF00FF",
gradient: "#D300D3",
color: "#FFFFFF"
},
disabled: {
background: "#FFAA00",
gradient: "#DD9900",
color: "#333333"
}
}
}
});
$('#toggle-button').toggleButtons('toggleActivation'); // to toggle the disabled statusHTML
<div id="data-attribute-toggle-button"
data-toggleButton-width="170"
data-toggleButton-transitionspeed="500%"
data-toggleButton-style-custom-enabled-background="#FF0000"
data-toggleButton-style-custom-enabled-gradient="#000000">
<input type="checkbox" checked="checked">
</div>JS
$('#data-attribute-toggle-button').toggleButtons();JS
$('#my-toggle-button').toggleButtons('toggleState');JS
$('#my-toggle-button').toggleButtons('destroy');
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent