<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap switch - by Mattia Larentis, enhanced by BdMdesigN aka Peter Stein</title>
<meta name="author" content="Mattia Larentis">
<meta name="subauthor" content="Peter Stein">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="../static/stylesheets/bootstrap-switch.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/docs.css">
<style>
.span4, h1 {
text-align: center;
}
h1 {
margin-bottom: 20px;
}
h3 {
margin-top: 20px;
}
</style>
</head>
<body style="padding-top: 50px;">
<a href="https://github.com/nostalgiaz/bootstrap-switch"><img
style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
alt="Fork me on GitHub"></a>
<div class="container">
<div class="row-fluid">
<div class="span12">
<h1>Bootstrap switch
<small>- by <a href="http://larentis.eu">Mattia Larentis</a> <a href="https://twitter.com/spiritualguru">(@SpiritualGuru)</a>
</small>
</h1>
</div>
</div>
<div class="row-fluid">
<div class="span8 offset2" style="text-align: center;">
<iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=fork&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&type=follow&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
</div>
</div>
<!-- SIZE -->
<div class="row-fluid">
<div class="span12">
<h3>Size</h3>
<div class="bs-docs-example">
<div class="make-switch switch-large">
<input type="checkbox" checked />
</div>
<div class="make-switch">
<input type="checkbox" checked />
</div>
<div class="make-switch switch-small">
<input type="checkbox" checked />
</div>
<div class="make-switch switch-mini">
<input type="checkbox" checked />
</div>
<br>
<br>
<label>Dimensions can be changed too:</label>
<div id="dimension-switch" class="make-switch">
<input type="checkbox" checked />
</div>
<button id="btn-size-large-switch" class="btn">Large</button>
<button id="btn-size-regular-switch" class="btn">Regular</button>
<button id="btn-size-small-switch" class="btn">Small</button>
<button id="btn-size-mini-switch" class="btn">Mini</button>
</div>
<pre class="prettyprint linenums">
<div class="make-switch switch-large">
<input type="checkbox" checked />
</div>
<div class="make-switch">
<input type="checkbox" checked />
</div>
<div class="make-switch switch-small">
<input type="checkbox" checked />
</div>
<div class="make-switch switch-mini">
<input type="checkbox" checked />
</div>
<div id="dimension-switch" class="make-switch">
<input type="checkbox" checked />
</div>
</pre>
<pre class="prettyprint linenums">
$('#dimension-switch').bootstrapSwitch('setSizeClass', ''); // Resets to the regular style
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini'); // Sets a mini switch
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small'); // Sets a small switch
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large'); // Sets a large switch
</pre>
</div>
</div>
<!-- COLORS -->
<div class="row-fluid">
<div class="span12">
<h3>Colors <small>javascript</small></h3>
<div class="bs-docs-example">
<div class="make-switch" data-on="primary" data-off="info">
<input type="checkbox" checked />
</div>
<div class="make-switch" data-on="info" data-off="success">
<input type="checkbox" checked />
</div>
<div class="make-switch" data-on="success" data-off="warning">
<input type="checkbox" checked />
</div>
<div class="make-switch" data-on="warning" data-off="danger">
<input type="checkbox" checked />
</div>
<div class="make-switch" data-on="danger" data-off="default">
<input type="checkbox" checked />
</div>
<div class="make-switch" data-on="default" data-off="primary">
<input type="checkbox" checked />
</div>
<br>
<br>
<label for="change-color-switch">Colors can be changed too</label>
<div id="change-color-switch" class="make-switch" data-on="default" data-off="primary">
<input type="checkbox" checked />
</div>
<br>
<br>
<button id="btn-color-on-switch" class="btn">
Change "On" color
</button>
<button id="btn-color-off-switch" class="btn">
Change "Off" color
</button>
</div>
<pre class="prettyprint linenums">
<div class="make-switch" data-on="primary" data-off="info">
<input type="checkbox" checked />
</div>
<div class="make-switch" data-on="info" data-off="success">
<input type="checkbox" checked />
</div>
<div class="make-switch" data-on="success" data-off="warning">
<input type="checkbox" checked />
</div>
<div class="make-switch" data-on="warning" data-off="danger">
<input type="checkbox" checked />
</div>
<div class="make-switch" data-on="danger" data-off="default">
<input type="checkbox" checked />
</div>
<div class="make-switch" data-on="default" data-off="primary">
<input type="checkbox" checked />
</div>
<div id="change-color-switch" class="make-switch" data-on="default" data-off="primary">
<input type="checkbox" checked />
</div>
</pre>
<pre class="prettyprint linenums">
$('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
$('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');
</pre>
</div>
</div>
<!-- ANIMATION -->
<div class="row-fluid">
<div class="span12">
<h3>Animation <small>javascript</small></h3>
<div class="bs-docs-example">
<div id="animated-switch" class="make-switch" data-animated="false">
<input type="checkbox" checked />
</div>
<br>
<br>
<button id="btn-animate-switch" class="btn">
Animate
</button>
<button id="btn-dont-animate-switch" class="btn">
Don't animate
</button>
</div>
<pre class="prettyprint linenums">
<div id="animated-switch" class="make-switch" data-animated="false">
<input type="checkbox" checked />
</div>
</pre>
<pre class="prettyprint linenums">
$('#animated-switch').bootstrapSwitch('setAnimated', true); // Enables animation for the selected item
$('#animated-switch').bootstrapSwitch('setAnimated', false); // Disables animation for the selected item
</pre>
</div>
</div>
<!-- DISABLED -->
<div class="row-fluid">
<div class="span12">
<h3>Disabled</h3>
<div class="bs-docs-example">
<div class="make-switch">
<input type="checkbox" checked disabled />
</div>
</div>
<pre class="prettyprint linenums">
<div class="make-switch">
<input type="checkbox" checked disabled />
</div>
</pre>
</div>
</div>
<!-- TEXT -->
<div class="row-fluid">
<div class="span12">
<h3>Text</h3>
<div class="bs-docs-example">
<div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
<input type="checkbox" checked />
</div>
<br>
<br>
<button id="btn-label-on-switch" class="btn">
Change "On" label
</button>
<button id="btn-label-off-switch" class="btn">
Change "Off" label
</button>
</div>
<pre class="prettyprint linenums">
<div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
<input type="checkbox" checked />
</div>
</pre>
<pre class="prettyprint linenums">
$('#label-switch').bootstrapSwitch('setOnLabel', 'I');
$('#label-switch').bootstrapSwitch('setOffLabel', 'O');
</pre>
</div>
</div>
<!-- HTML TEXT -->
<div class="row-fluid">
<div class="span12">
<h3>HTML text</h3>
<div class="bs-docs-example">
<div class="make-switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
<input type="checkbox" checked />
</div>
</div>
<pre class="prettyprint linenums">
<div class="make-switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
<input type="checkbox" checked />
</div>
</pre>
</div>
</div>
<!-- HTML TEXT MINI SWITCH -->
<div class="row-fluid">
<div class="span12">
<h3>HTML text (mini-switch)</h3>
<div class="bs-docs-example">
<div class="make-switch switch-mini" data-on-label="<i class='switch-mini-icons icon-ok icon-white'></i>" data-off-label="<i class='switch-mini-icons icon-remove'></i>">
<input type="checkbox" checked />
</div>
</div>
<pre class="prettyprint linenums">
<div class="make-switch switch-mini" data-on-label="<i class='switch-mini-icons icon-ok icon-white'></i>" data-off-label="<i class='switch-mini-icons icon-remove'></i>">
<input type="checkbox" checked />
</div>
</pre>
</div>
</div>
<!-- EVENT HANDLER -->
<div class="row-fluid">
<div class="span12">
<h3>Event handler <small>javascript</small></h3>
<div class="bs-docs-example">
<div id="mySwitch" class="make-switch">
<input type="checkbox" checked />
</div>
</div>
<pre class="prettyprint linenums">
$('#mySwitch').on('switch-change', function (e, data) {
var $el = $(data.el)
, value = data.value;
console.log(e, $el, value);
});
</pre>
</div>
</div>
<!-- TOGGLE -->
<div class="row-fluid">
<div class="span12">
<h3>Toggle State <small>javascript</small></h3>
<div class="bs-docs-example">
<div id="toggle-state-switch" class="make-switch">
<input type="checkbox" checked />
</div>
<br>
<br>
<div id="toggle-state-switch-button-status" class="btn btn-primary">Status!</div>
<div id="toggle-state-switch-button-on" class="btn btn-primary">ON!</div>
<div id="toggle-state-switch-button" class="btn btn-primary">Toggle me!</div>
<div id="toggle-state-switch-button-off" class="btn btn-primary">OFF!</div>
</div>
<pre class="prettyprint linenums">
$('#toggle-state-switch').bootstrapSwitch('status'); // true || false
$('#toggle-state-switch').bootstrapSwitch('toggleState');
$('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false
</pre>
</div>
</div>
<!-- DESTROY -->
<div class="row-fluid">
<div class="span12">
<h3>Destroy <small>javascript</small></h3>
<div class="bs-docs-example">
<div id="destroy-switch" class="make-switch">
<input type="checkbox" checked />
</div>
<br>
<br>
<button id="btn-destroy-switch" class="btn btn-danger">
Destroy me!
</button>
</div>
<pre class="prettyprint linenums">
$('#destroy-switch').bootstrapSwitch('destroy');
</pre>
</div>
</div>
<!-- CREATE -->
<div class="row-fluid">
<div class="span12">
<h3>Create <small>javascript</small></h3>
<div class="bs-docs-example">
<input id="create-switch" type="checkbox" checked />
<br>
<br>
<div id="btn-create" class="btn">Create</div>
</div>
<pre class="prettyprint linenums">
$('#create-switch').wrap('<div class="make-switch" />').parent().bootstrapSwitch();
</pre>
</div>
</div>
<!-- DISABLED -->
<div class="row-fluid">
<div class="span12">
<h3>Disabled <small>javascript</small></h3>
<div class="bs-docs-example">
<label for="disable-switch-input">amazing label</label>
<div id="disable-switch" class="make-switch">
<input id="disable-switch-input" type="checkbox" checked />
</div>
<br>
<br>
<button id="btn-is-active-switch" class="btn">
Is active?
</button>
<button id="btn-toggle-activation-switch" class="btn">
Toggle activation!
</button>
<button id="btn-disable-switch" class="btn">
Disable!
</button>
<button id="btn-activate-switch" class="btn">
Activate!
</button>
</div>
<pre class="prettyprint linenums">
$('#disable-switch').bootstrapSwitch('isActive');
$('#disable-switch').bootstrapSwitch('toggleActivation');
$('#disable-switch').bootstrapSwitch('setActive', false); // true || false
</pre>
</div>
</div>
<!-- RADIO -->
<div class="row-fluid">
<div class="span12">
<h3>Radio <small>javascript</small></h3>
<div class="bs-docs-example">
<div class="control-group">
<div class="controls">
<label class="control-label" for="option1">Option 1</label>
<div id="option1" class="make-switch radio1 radio-no-uncheck">
<input type="radio" name="radio1" value="option1" />
</div>
<label class="control-label" for="option2">Option 2</label>
<div id="option2" class="make-switch radio1 radio-no-uncheck">
<input type="radio" name="radio1" value="option2" />
</div>
<label class="control-label" for="option3">Option 3</label>
<div id="option3" class="make-switch radio1 radio-no-uncheck">
<input type="radio" name="radio1" value="option3" />
</div>
</div>
</div>
</div>
<pre class="prettyprint linenums">
<div class="control-group">
<div class="controls">
<label class="control-label" for="option1">Option 1</label>
<div id="option1" class="make-switch radio1 radio-no-uncheck">
<input type="radio" name="radio1" value="option1" />
</div>
<label class="control-label" for="option2">Option 2</label>
<div id="option2" class="make-switch radio1 radio-no-uncheck">
<input type="radio" name="radio1" value="option2" />
</div>
<label class="control-label" for="option3">Option 3</label>
<div id="option3" class="make-switch radio1 radio-no-uncheck">
<input type="radio" name="radio1" value="option3" />
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.radio1').on('switch-change', function () {
$('.radio1').bootstrapSwitch('toggleRadioState');
});
// or
$('.radio1').on('switch-change', function () {
$('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck');
});
// or
$('.radio1').on('switch-change', function () {
$('.radio1').bootstrapSwitch('toggleRadioStateAllowUncheck', false);
});
});
</script>
</pre>
</div>
</div>
<!-- RADIO ALLOW UNCHECK -->
<div class="row-fluid">
<div class="span12">
<h3>Radio <small>javascript (allow radios uncheck)</small></h3>
<div class="bs-docs-example">
<div class="control-group">
<div class="controls">
<label class="control-label" for="option1">Option 1</label>
<div id="option1" class="make-switch radio2">
<input type="radio" name="radio2" value="option1" />
</div>
<label class="control-label" for="option2">Option 2</label>
<div id="option2" class="make-switch radio2">
<input type="radio" name="radio2" value="option2" checked="checked" />
</div>
<label class="control-label" for="option3">Option 3</label>
<div id="option3" class="make-switch radio2">
<input type="radio" name="radio2" value="option3" />
</div>
</div>
</div>
</div>
<pre class="prettyprint linenums">
<div class="control-group">
<div class="controls">
<label class="control-label" for="option1">Option 1</label>
<div id="option1" class="make-switch radio2">
<input type="radio" name="radio2" value="option1" />
</div>
<label class="control-label" for="option2">Option 2</label>
<div id="option2" class="make-switch radio2">
<input type="radio" name="radio2" value="option2" checked="checked" />
</div>
<label class="control-label" for="option3">Option 3</label>
<div id="option3" class="make-switch radio2">
<input type="radio" name="radio2" value="option3" />
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.radio2').on('switch-change', function () {
$('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
});
});
</script>
</pre>
</div>
</div>
<!-- FORM -->
<div class="row-fluid">
<div class="span12">
<h3>Form <small>- try to use tab, space and reset button</small></h3>
<div class="bs-docs-example">
<form class="form-horizontal span8 offset2">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="notification1">Notification 1</label>
<div class="controls">
<div class="make-switch" tabindex="0">
<input id="notification1" type="checkbox" />
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="notification2">Notification 2</label>
<div class="controls">
<div class="make-switch" tabindex="0">
<input id="notification2" type="checkbox" />
</div>
</div>
</div>
<div class="form-actions">
<button type="reset" class="btn btn-inverse">Reset</button>
</div>
</form>
<div class="clearfix"></div>
</div>
<pre class="prettyprint linenums">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="notification1">Notification 1</label>
<div class="controls">
<div class="make-switch" tabindex="0">
<input id="notification1" type="checkbox" />
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="notification2">Notification 2</label>
<div class="controls">
<div class="make-switch" tabindex="0">
<input id="notification2" type="checkbox" />
</div>
</div>
</div>
<div class="form-actions">
<button type="reset" class="btn btn-inverse">Reset</button>
</div>
</form>
</pre>
</div>
</div>
<!-- MODAL -->
<div class="row-fluid">
<div class="span12">
<h3>Modal</h3>
<div class="bs-docs-example">
<a href="#myModal" role="button" class="btn" data-toggle="modal">Modal</a>
</div>
<pre class="prettyprint linenums">
<a href="#myModal" role="button" class="btn" data-toggle="modal">Modal</a>
-----
<div class="modal-body">
<div class="make-switch">
<input type="checkbox" checked />
</div>
</div></pre>
</div>
</div>
<p class="pull-right">
<a href="https://twitter.com/SpiritualGuru">follow me</a> -
<a href="http://www.larentis.eu">my site</a>
</p>
</div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal</h3>
</div>
<div class="modal-body">
<div class="make-switch">
<input type="checkbox" checked />
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
<script src="../static/js/bootstrap-switch.js"></script>
<script>
$(document).ready(function() {
window.prettyPrint && prettyPrint();
$('#mySwitch').on('switch-change', function (e, data) {
var $el = $(data.el)
, value = data.value;
console.log(e, $el, value);
});
// DIMENSION
$('#btn-size-regular-switch').on('click', function () {
$('#dimension-switch').bootstrapSwitch('setSizeClass', '');
});
$('#btn-size-mini-switch').on('click', function () {
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');
});
$('#btn-size-small-switch').on('click', function () {
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');
});
$('#btn-size-large-switch').on('click', function () {
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');
});
// STATE
$('#toggle-state-switch-button').on('click', function () {
$('#toggle-state-switch').bootstrapSwitch('toggleState');
});
$('#toggle-state-switch-button-on').on('click', function () {
$('#toggle-state-switch').bootstrapSwitch('setState', true);
});
$('#toggle-state-switch-button-off').on('click', function () {
$('#toggle-state-switch').bootstrapSwitch('setState', false);
});
$('#toggle-state-switch-button-status').on('click', function () {
alert($('#toggle-state-switch').bootstrapSwitch('status'));
});
// DESTROY
$('#btn-destroy-switch').on('click', function () {
$('#destroy-switch').bootstrapSwitch('destroy');
$(this).remove();
});
// CREATE
$('#btn-create').on('click', function () {
$('#create-switch').wrap('<div class="make-switch" />').parent().bootstrapSwitch();
$(this).remove()
});
// ACTIVATION
$('#btn-is-active-switch').on('click', function () {
alert($('#disable-switch').bootstrapSwitch('isActive'));
});
$('#btn-toggle-activation-switch').on('click', function () {
$('#disable-switch').bootstrapSwitch('toggleActivation');
});
$('#btn-disable-switch').on('click', function () {
$('#disable-switch').bootstrapSwitch('setActive', false);
});
$('#btn-activate-switch').on('click', function () {
$('#disable-switch').bootstrapSwitch('setActive', true);
});
// LABEL
$('#btn-label-on-switch').on('click', function() {
$('#label-switch').bootstrapSwitch('setOnLabel', 'I');
});
$('#btn-label-off-switch').on('click', function() {
$('#label-switch').bootstrapSwitch('setOffLabel', 'O');
});
// COLOR
$('#btn-color-on-switch').on('click', function() {
$('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
});
$('#btn-color-off-switch').on('click', function() {
$('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');
});
// ANIMATION
$('#btn-animate-switch').on('click', function() {
$('#animated-switch').bootstrapSwitch('setAnimated', true);
});
$('#btn-dont-animate-switch').on('click', function() {
$('#animated-switch').bootstrapSwitch('setAnimated', false);
});
// RADIO
$('.radio1').on('switch-change', function () {
$('.radio1').bootstrapSwitch('toggleRadioState');
});
$('.radio2').on('switch-change', function () {
$('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
});
});
</script>
</body>
</html>