Bootstrap-switch

Demo

http://www.larentis.eu/switch/

Usage

Just include Twitter Bootstrap, jQuery, Bootstrap Switch CSS and Javascript

<metahttp-equiv="X-UA-Compatible" content="IE=9; IE=8;" /><linkrel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"><linkrel="stylesheet" href="bootstrapSwitch.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><scriptsrc="bootstrapSwitch.js"></script> // master
<scriptsrc="//cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/1.3/bootstrapSwitch.min.js"> // from cdnjs.com

Less

If you want to use your bootstrap vars edit bootstrapSwitch.less and then compile the less file

lessc static/less/bootstrapSwitch.less static/stylesheets/bootstrapSwitch.css

Basic Example

<divclass="switch"><inputtype="checkbox"></div>

Large, small or mini

<divclass="switch switch-large"><!-- switch-large, switch-small or switch-mini --><inputtype="checkbox"></div>

Colors

<divclass="switch" data-on="danger" data-off="warning"><!-- primary, info, success, warning and danger --><inputtype="checkbox"></div>

Animation

<divclass="switch" data-animated="false"><inputtype="checkbox"></div>

Text

<divclass="switch" data-on-label="SI" data-off-label="NO"><inputtype="checkbox"></div>

HTML Text

<divclass="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>"><inputtype="checkbox"></div>

Initial values

<divclass="switch"><inputtype="checkbox" checked="checked" disabled="disabled"></div>

Event handler

$('#mySwitch').on('switch-change',function(e,data){var$el=$(data.el),value=data.value;console.log(e,$el,value);});

Methods

$('#mySwitch').bootstrapSwitch('toggleActivation');$('#mySwitch').bootstrapSwitch('isActive');$('#mySwitch').bootstrapSwitch('setActive',false);$('#mySwitch').bootstrapSwitch('setActive',true);$('#mySwitch').bootstrapSwitch('toggleState');$('#mySwitch').bootstrapSwitch('setState',true);$('#mySwitch').bootstrapSwitch('status');// returns true or false$('#mySwitch').bootstrapSwitch('destroy');

License

Licensed under the Apache License, Version 2.0 http://www.apache.org/licenses/LICENSE-2.0