- <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>
- // Resets to the regular style
- $('#dimension-switch').bootstrapSwitch('setSizeClass', '');
- // Sets a mini switch
- $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');
- // Sets a small switch
- $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');
- // Sets a large switch
- $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');
- <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>
- $('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
- $('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');
- <div id="animated-switch" class="make-switch" data-animated="false">
- <input type="checkbox" checked>
- </div>
- // Enables animation for the selected item
- $('#animated-switch').bootstrapSwitch('setAnimated', true);
- // Disables animation for the selected item
- $('#animated-switch').bootstrapSwitch('setAnimated', false);
- <div class="make-switch">
- <input type="checkbox" checked disabled>
- </div>
- <div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
- <input type="checkbox" checked>
- </div>
- $('#label-switch').bootstrapSwitch('setOnLabel', 'I');
- $('#label-switch').bootstrapSwitch('setOffLabel', 'O');
- <div class="make-switch" data-text-label="TV">
- <input type="checkbox" checked>
- </div>
- <div class="make-switch" data-on-label="<i class='fa fa-ok fa fa-white'></i>" data-off-label="<i class='fa fa-remove'></i>">
- <input type="checkbox" checked />
- </div>
- <div class="make-switch switch-large" data-label-icon="fa fa-fullscreen" data-on-label="<i class='fa fa-ok fa fa-white'></i>" data-off-label="<i class='fa fa-remove'></i>">
- <input type="checkbox" checked>
- </div>
- <div class="make-switch switch-large" data-label-icon="fa fa-youtube fa fa-large" data-on-label="<i class='fa fa-thumbs-up fa fa-white'></i>" data-off-label="<i class='fa fa-thumbs-down'></i>">
- <input type="checkbox" checked>
- </div>
- <div class="make-switch" data-label-icon="fui-video" data-on-label="<i class='fui-check fa fa-white'></i>" data-off-label="<i class='fui-cross'></i>">
- <input type="checkbox" checked>
- </div>
- $('#mySwitch').on('switch-change', function (e, data) {
- var $el = $(data.el)
- , value = data.value;
- console.log(e, $el, value);
- });
- <label id="label-toggle-switch">Click on this Text to change the switch state</label>
- <div class="label-toggle-switch make-switch">
- <input type="checkbox" checked />
- </div>
- <script>
- $('#label-toggle-switch').on('click', function(e, data) {
- $('.label-toggle-switch').bootstrapSwitch('toggleState');
- });
- $('.label-toggle-switch').on('switch-change', function (e, data) {
- alert(data.value);
- });
- </script>
- <div id="label2-toggle-switch">
- <label class="label-change-switch">Click on this Text to change the switch state
- <div class="label2-toggle-switch make-switch">
- <input type="checkbox" checked />
- </div>
- </label>
- </div>
- <script>
- $('#label2-toggle-switch').on('switch-change', function(e, data) {
- alert(data.value);
- });
- </script>
- $('#toggle-state-switch').bootstrapSwitch('status'); // true || false
- $('#toggle-state-switch').bootstrapSwitch('toggleState');
- $('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false
- $('#destroy-switch').bootstrapSwitch('destroy');
- $('#create-switch').wrap('<div class="make-switch" />').parent().bootstrapSwitch();
- $('#disable-switch').bootstrapSwitch('isActive');
- $('#disable-switch').bootstrapSwitch('toggleActivation');
- $('#disable-switch').bootstrapSwitch('setActive', false); // true || false
- <div class="control-group">
- <div class="controls">
- <label for="option1">Option 1</label>
- <div class="make-switch radio1 radio-no-uncheck">
- <input id="option1" type="radio" name="radio1" value="option1">
- </div>
- <label for="option2">Option 2</label>
- <div class="make-switch radio1 radio-no-uncheck">
- <input id="option2" type="radio" name="radio1" value="option2">
- </div>
- <label for="option3">Option 3</label>
- <div class="make-switch radio1 radio-no-uncheck">
- <input id="option3" type="radio" name="radio1" value="option3">
- </div>
- </div>
- </div>
- <script>
- $('.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>
- <div class="control-group">
- <div class="controls">
- <label for="option11">Option 1</label>
- <div class="make-switch radio2">
- <input id="option11" type="radio" name="radio2" value="option1">
- </div>
- <label for="option12">Option 2</label>
- <div class="make-switch radio2">
- <input id="option12" type="radio" name="radio2" value="option2" checked="checked">
- </div>
- <label for="option13">Option 3</label>
- <div class="make-switch radio2">
- <input id="option13" type="radio" name="radio2" value="option3">
- </div>
- </div>
- </div>
- <script>
- $('.radio2').on('switch-change', function () {
- $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
- });
- </script>
- <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>
- <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>