doctype html
html(lang='en')
head
meta(charset='utf-8')
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(name='viewport', content='width=device-width, initial-scale=1.0')
meta(name='description', content='Turn checkboxes and radio buttons in toggle switches.')
meta(name='author', content='Mattia Larentis, Emanuele Marchi and Peter Stein')
title Bootstrap Switch ยท Turn checkboxes and radio buttons in toggle switches
link(href='http://fonts.googleapis.com/css?family=Roboto:400,700', rel='stylesheet')
link(href='docs/lib/css/bootstrap.min.css', rel='stylesheet')
link(href='docs/lib/css/highlight.css', rel='stylesheet')
link(href='build/css/bootstrap3/bootstrap-switch.css', rel='stylesheet')
link(href='docs/index.css', rel='stylesheet')
script.
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-43092768-1']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
body
header.navbar.navbar-default.navbar-fixed-top.top(role='banner')
.container
.navbar-header
button.navbar-toggle(type='button', data-toggle='collapse', data-target='#collapse')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href='../') Bootstrap Switch
nav#collapse.collapse.navbar-collapse(role='navigation')
ul.nav.navbar-nav
li: a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip') Download 3RC
li: a(href='#getting-started') Getting Started
li.dropdown
a(href='#documentation', data-toggle='dropdown')
| Documentation
span.caret
ul.dropdown-menu
li: a(href='#options') Options
li: a(href='#methods') Methods
li: a(href='#events') Events
li: a(href='#examples') Examples
li: a(href='https://github.com/nostalgiaz/bootstrap-switch/issues') Bug reports
.container
.header
h1.title Bootstrap Switch
p.lead Turn checkboxes and radio buttons in toggle switches.
p Choose your version:
p: input(type='checkbox', name='download-version', checked, data-size='large', data-on-text='3 RC', data-off-text='2.0.1')
p
a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip', id='download-3', class='btn btn-lg btn-primary') Download 3 (Release candidate)
a(href='https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip', id='download-2' class='btn btn-lg btn-primary') Download 2.0.1
#getting-started
h1.page-header Getting Started
p Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.
pre
code
[...]
<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap-switch.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-switch.js"></script>
[...]
#options
h1.page-header Options
table.table.table-bordered.table-striped.table-responsive
thead
tr
th Name
th Type
th Description
th Values
th Default
tbody
tr
td state
td Boolean
td The checkbox state
td true, false
td 'checked' attribute or true
tr
td size
td String
td The checkbox state
td 'mini', 'small', 'normal', 'large'
td 'normal'
tr
td animate
td Boolean
td Animate the switch
td true, false
td true
tr
td disabled
td Boolean
td Disable state
td true, false
td 'disabled' attribute or false
tr
td readonly
td Boolean
td Readonly state
td true, false
td 'readonly' attribute or false
tr
td onColor
td String
td Color of the left side of the switch
td 'primary', 'info', 'success', 'warning', 'danger', 'default'
td: 'primary'
tr
td offColor
td String
td Color of the right side of the switch
td 'primary', 'info', 'success', 'warning', 'danger', 'default'
td: 'default'
tr
td onText
td String
td Text of the left side of the switch
td String
td: 'ON'
tr
td offText
td String
td Text of the right side of the switch
td String
td: 'OFF'
tr
td labelText
td String
td Text of the center handle of the switch
td String
td: ' '
tr
td baseClass
td String
td Prefix of every other used class
td String
td 'bootstrap-switch'
tr
td wrapperClass
td String | Array
td Container element class(es)
td String | Array
td 'wrapper'
tr
td containerClass
td String | Array
td Wrapper element class(es)
td String | Array
td 'container'
tr
td handleOnClass
td String | Array
td Handle On element class(es)
td String | Array
td 'handle-on'
tr
td handleOffClass
td String | Array
td Handle Off element class(es)
td String | Array
td 'handle-off'
tr
td labelClass
td String | Array
td Label element class(es)
td String | Array
td 'label'
tr
td onModifierClass
td String
td On Modifier class, used when the switch state is true
td String
td 'on'
tr
td offModifierClass
td String
td Off Modifier class, used when the switch state is false
td String
td 'off'
tr
td focusedModifierClass
td String
td Focused Modifier class, used when the switch is focused
td String
td 'focused'
tr
td animateModifierClass
td String
td Animate Modifier class, used to apply CSS animation to the switch
td String
td 'animate'
tr
td disabledModifierClass
td String
td Disabled Modifier class, used the switch is disabled
td String
td 'disabled'
tr
td readonlyModifierClass
td String
td Readonly Modifier class, used the switch is readonly
td String
td 'readonly'
tr
td onInit
td Function
td Callback function to execute on initialization
td Function
td: pre: code.javascript function(event, state) {}
tr
td onSwitchChange
td Function
td Callback function to execute on switch state change
td Function
td: pre: code.javascript function(event, state) {}
#methods
h1.page-header Methods
p In Bootstrap Switch, every option is also a method.
p You can call a method in this way:
pre: code $('input[name="my-checkbox"]').bootstrapSwitch('state', true);
h2 Additional Methods
table.table.table-bordered.table-striped.table-responsive
thead
tr
th Name
th Description
tbody
tr
td toggleState
td Toggle the switch state
tr
td toggleDisabled
td Toggle the disabled state
tr
td toggleReadonly
td Toggle the readonly state
tr
td destroy
td Destroy the instance of Bootstrap Switch
#events
h1.page-header Events
p You can register to the emitted events as follow:
pre
code
| $('inputy[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
| console.log(this); // DOM element
| console.log(event); // jQuery event
| console.log(state); // true | false
| });
table.table.table-bordered.table-striped.table-responsive
thead
tr
th Name
th Description
th Parameters
tbody
tr
td init
td Triggered on initialization. 'this' refers to the DOM element.
td
| event (jQuery Event object)
tr
td switchChange
td Triggered on switch state change. 'this' refers to the DOM element.
td
| event (jQuery Event object),
| state (true | false)
#examples
h1.page-header Examples
h2 State
.row
.col-sm-6
input(type='checkbox', id='state-switch' checked)
.col-sm-6
.btn-group.pull-right
button(type='button', id='state-switch-state', class='btn btn-default') Get State
button(type='button', id='state-switch-on', class='btn btn-default') Set On
button(type='button', id='state-switch-off', class='btn btn-default') Set Off
button(type='button', id='state-switch-toggle', class='btn btn-default') Toggle State
Working on this...
script(src='docs/lib/js/jquery.min.js')
script(src='docs/lib/js/bootstrap.min.js')
script(src='docs/lib/js/highlight.js')
script(src='build/js/bootstrap-switch.js')
script(src='docs/index.js')