hugh
/
bootstrap-switch


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418
							<!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</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
    <link rel="stylesheet" href="http://bdmdesign.github.io/bootstrap-switch/static/stylesheets/flat-ui-fonts.css">
    <link rel="stylesheet" href="build/css/bootstrap3/bootstrap-switch.css" />
    <link rel="stylesheet" href="docs/lib/prism.css">
    <link rel="stylesheet" href="docs/index.css">
    <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);
    })();
    </script>
  </head>
  <body>
    <a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub">
    </a>
    <header class="navbar navbar-default navbar-fixed-top header" role="banner">
      <div class="container">
        <div class="navbar-header">
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="../" class="navbar-brand">Bootstrap Switch</a>
        </div>
        <nav id="collapse" class="collapse navbar-collapse" role="navigation">
          <ul class="nav navbar-nav">
            <li><a href="#getting-started">Getting started</a></li>
            <li class="dropdown">
              <a href="#documentation" data-toggle="dropdown">Documentation <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#sizes">Sizes</a></li>
                <li><a href="#colors">Colors</a></li>
                <li><a href="#animation">Animation</a></li>
                <li><a href="#disabled">Disabled / Readonly</a></li>
                <li><a href="#text">Text</a></li>
                <li><a href="#label-text">Label Text</a></li>
                <li><a href="#icon-label-text">Icon Label Text</a></li>
                <li><a href="#event-handler">Event Handler</a></li>
                <li><a href="#label-event-handler">Label Event Handler</a></li>
                <li><a href="#state">State</a></li>
                <li><a href="#destroy">Destroy</a></li>
                <li><a href="#disable">Disable / Readonly</a></li>
                <li><a href="#radio">Radio</a></li>
                <li><a href="#form">Form</a></li>
                <li><a href="#modal">Modal</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <main id="main" role="main">
      <div class="container">
        <h1>Bootstrap Switch <span class="small">3.0.0</span></h1>
        <p class="lead">Turn checkboxes and radio buttons in toggle switches.</p>
        <br>
        <a href="#">Download Bootstrap Switch</a>
        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="30"></iframe>
        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="30"></iframe>
        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;type=follow&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="190" height="30"></iframe>
        <iframe src="http://ghbtns.com/github-btn.html?user=LostCrew&amp;type=follow&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
        <iframe src="http://ghbtns.com/github-btn.html?user=BdMdesigN&amp;type=follow&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
        <br>
        <br>
        <p class="lead people">
          <a href="http://larentis.eu" target="_blank">Mattia Larentis</a> · <a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a> · <a href="http://www.lostcrew.it" target="_blank">Emanuele Marchi</a>
        </p>
        </div>
      </div>
    </main>
    <div class="container">
    <div class="row">
      <div class="col-sm-10 col-sm-offset-1">
        <section id="getting-started" class="section">
          <div class="page-header">
            <h2><a href="#getting-started">Getting started</a></h2>
          </div>
          <p>Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.</p>
          <pre class="language-markup"><code>[...]
&lt;link href="bootstrap.css" rel="stylesheet"&gt;
&lt;link href="bootstrap-switch.css" rel="stylesheet"&gt;
&lt;script src="jquery.js"&gt;&lt;/script&gt;
&lt;script src="bootstrap-switch.js"&gt;&lt;/script&gt;
[...]</code></pre>
          <p>Add your checkbox.</p>
          <pre class="language-markup"><code>&lt;input type="checkbox" name="my-checkbox" checked&gt;</code></pre>
          <p>Initialize Bootstrap Switch.</p>
          <pre class="language-javascript"><code>$("[name='my-checkbox']").bootstrapSwitch();</code></pre>
          <p>Enjoy.</p>
        </section>
        <div class="page-header">
          <h2><a href="#documentation">Documentation</a></h2>
        </div>
        <section id="sizes" class="section">
          <div class="page-header">
            <h3><a href="#sizes">Sizes</a></h3>
          </div>
          <input type="checkbox" checked data-size="large">
          <input type="checkbox" checked>
          <input type="checkbox" checked data-size="small">
          <input type="checkbox" checked data-size="mini">
          <br>
          <br>
          <p>Change the size programmatically:</p>
          <input type="checkbox" id="dimension-switch" checked>
          <br>
          <br>
          <button id="btn-size-large-switch" class="btn btn-default">Large</button>
          <button id="btn-size-regular-switch" class="btn btn-default">Regular</button>
          <button id="btn-size-small-switch" class="btn btn-default">Small</button>
          <button id="btn-size-mini-switch" class="btn btn-default">Mini</button>
          <br>
          <pre class="language-markup"><code>&lt;input type="checkbox" checked data-size="large">
&lt;input type="checkbox" checked>
&lt;input type="checkbox" checked data-size="small">
&lt;input type="checkbox" checked data-size="mini">
&lt;input id="dimension-switch" type="checkbox" checked></code></pre>
          <pre class="language-javascript"><code>// Resets to the regular style
$('#dimension-switch').bootstrapSwitch('size', '');

// Sets a mini switch
$('#dimension-switch').bootstrapSwitch('size', 'mini');

// Sets a small switch
$('#dimension-switch').bootstrapSwitch('size', 'small');

// Sets a large switch
$('#dimension-switch').bootstrapSwitch('size', 'large');</code></pre>
        </section>
        <section id="colors" class="section">
          <div class="page-header">
            <h3><a href="#colors">Colors</a></h3>
          </div>
          <input type="checkbox" checked data-on-color="primary" data-off-color="info">
          <input type="checkbox" checked data-on-color="info" data-off-color="success">
          <input type="checkbox" checked data-on-color="success" data-off-color="warning">
          <input type="checkbox" checked data-on-color="warning" data-off-color="danger">
          <input type="checkbox" checked data-on-color="danger" data-off-color="default">
          <input type="checkbox" checked data-on-color="default" data-off-color="primary">
          <br>
          <br>
          <span>Change the colors programmatically:</span>
          <input type="checkbox" id="change-color-switch" checked data-on-color="default" data-off-color="primary">
          <br>
          <br>
          <button id="btn-color-on-switch" class="btn btn-success">Change ON color</button>
          <button id="btn-color-off-switch" class="btn btn-danger">Change OFF color</button>
          <pre class="language-markup"><code>&lt;input type="checkbox" checked data-on-color="primary" data-off-color="info">
&lt;input type="checkbox" checked data-on-color="info" data-off-color="success">
&lt;input type="checkbox" checked data-on-color="success" data-off-color="warning">
&lt;input type="checkbox" checked data-on-color="warning" data-off-color="danger">
&lt;input type="checkbox" checked data-on-color="danger" data-off-color="default">
&lt;input type="checkbox" checked data-on-color="default" data-off-color="primary">
&lt;input type="checkbox" id="change-color-switch" checked data-on-color="default" data-off-color="primary"></code></pre>
          <pre class="language-javascript"><code>$('#change-color-switch').bootstrapSwitch('onColor', 'success');
$('#change-color-switch').bootstrapSwitch('offColor', 'danger');</code></pre>
        </section>
        <section id="animation" class="section">
          <div class="page-header">
            <h3><a name="animation" class="anchor" href="#animation">Animation <small>JavaScript</small></a></h3>
          </div>
          <input type="checkbox" id="animated-switch" checked data-animated="false">
          <br>
          <br>
          <button id="btn-animate-switch" class="btn btn-default">Animate</button>
          <button id="btn-dont-animate-switch" class="btn btn-default">Don't animate</button>
          <pre class="language-markup"><code>&lt;input type="checkbox" checked data-animate="false"></code></pre>
          <pre class="language-javascript"><code>// Enables animation for the selected item
$('#animated-switch').bootstrapSwitch('animate', true);

// Disables animation for the selected item
$('#animated-switch').bootstrapSwitch('animate', false);</code></pre>
        </section>
        <section id="disabled" class="section">
          <div class="page-header">
            <h3><a name="disabled" class="anchor" href="#disabled">Disabled / Readonly</a></h3>
          </div>
          <input type="checkbox" checked disabled>
          <input type="checkbox" checked readonly>
          <pre class="language-markup"><code>&lt;input type="checkbox" checked disabled>
&lt;input type="checkbox" checked readonly></code></pre>
        </section>
        <section id="text" class="section">
          <div class="page-header">
            <h3><a name="text" class="anchor" href="#text">Text</a></h3>
          </div>
          <input type="checkbox" id="label-switch" checked data-on-text="SI" data-off-text="NO">
          <br>
          <br>
          <button id="btn-label-on-switch" class="btn btn-default">Change "On" label</button>
          <button id="btn-label-off-switch" class="btn btn-default">Change "Off" label</button>
          <pre class="language-markup"><code>&lt;input type="checkbox" checked data-on-text="SI" data-off-text="NO"></code></pre>
          <pre class="language-javascript"><code>$('#label-switch').bootstrapSwitch('onText', 'I');
$('#label-switch').bootstrapSwitch('offText', 'O');</code></pre>
        </section>
        <section id="label-text" class="section">
          <div class="page-header">
            <h3><a href="#label-text">Label Text</a></h3>
          </div>
          <input type="checkbox" checked data-label-text="TV">
          <pre class="language-markup"><code>&lt;input type="checkbox" checked data-label-text="TV"></code></pre>
        </section>
        <section id="icon-label-text" class="section">
          <div class="page-header">
            <h3><a name="icon-label-text" class="anchor" href="#html-text-label-icon">Icon Label Text</a></h3>
          </div>

          Standard <input type="checkbox" checked data-size="large" data-label-text="<span class='glyphicon glyphicon-fullscreen'></span>" data-on-text="<span class='glyphicon glyphicon-ok'></span>" data-off-text="<span class='glyphicon glyphicon-remove'></span>"> &nbsp;&nbsp;

          Font Awesome <input type="checkbox" checked data-size="large" data-label-text="<span class='fa fa-youtube fa-lg'></span>" data-on-text="<span class='fa fa-thumbs-up fa-lg'></span>" data-off-text="<span class='fa fa-thumbs-down fa-lg'></span>"> &nbsp;&nbsp;

          Flat UI <input type="checkbox" data-size="large" checked data-label-text="<span class='fui-video'></span>" data-on-text="<span class='fui-check'></span>" data-off-text="<span class='fui-cross'></span>">

          <pre class="language-markup"><code>&lt;input type="checkbox" checked data-size="large" data-label-text="&lt;span class='glyphicon glyphicon-fullscreen'>&lt;/span>" data-on-text="&lt;span class='glyphicon glyphicon-ok'>&lt;/span>" data-off-text="&lt;span class='glyphicon glyphicon-remove'>&lt;/span>">
&lt;input type="checkbox" checked data-size="large" data-label-text="&lt;span class='fa fa-youtube fa-lg'>&lt;/span>" data-on-text="&lt;span class='fa fa-thumbs-up fa-lg'>&lt;/span>" data-off-text="&lt;span class='fa fa-thumbs-down fa-lg'>&lt;/span>">
&lt;input type="checkbox" data-size="large" checked data-label-text="&lt;span class='fui-video'>&lt;/span>" data-on-text="&lt;span class='fui-check'>&lt;/span>" data-off-text="&lt;span class='fui-cross'>&lt;/span>"></code></pre>
        </section>
        <section id="event-handler" class="section">
          <div class="page-header">
            <h3><a name="event-handler" class="anchor" href="#event-handler">Event Handler <small>JavaScript</small></a></h3>
          </div>
          <input type="checkbox" id="switch-change" checked>
          <pre class="language-javascript"><code>$('#switch-change').on('switchChange', function (e, data) {
  var $element = $(data.el),
      value = data.value;

  console.log(e, $element, value);
});</code></pre>
        </section>
        <section id="label-event-handler" class="section">
          <div class="page-header">
            <h3><a name="label-event-handler" class="anchor" href="#label-event-handler">Label Event Handler <small>JavaScript</small></a></h3>
          </div>
          <label id="label-toggle-switch">Click on this Text to change the switch state</label>
          <input type="checkbox" checked class="label-toggle-switch">
          <pre class="language-markup"><code>&lt;label id="label-toggle-switch">Click on this Text to change the switch state&lt;/label>
&lt;input type="checkbox" checked></code></pre>
          <pre class="language-javascript"><code>$('#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);
});</code></pre>
        </section>
        <section id="state" class="section">
          <div class="page-header">
            <h3><a name="state" class="anchor" href="#state">State <small>JavaScript</small></a></h3>
          </div>
          <input type="checkbox" id="toggle-state-switch" checked>
          <br>
          <br>
          <div id="toggle-state-switch-button-state" class="btn btn-default">State!</div>
          <div id="toggle-state-switch-button-on" class="btn btn-default">On</div>
          <div id="toggle-state-switch-button" class="btn btn-default">Toggle</div>
          <div id="toggle-state-switch-button-off" class="btn btn-default">Off</div>
          <pre class="language-javascript"><code>$('#toggle-state-switch').bootstrapSwitch('state'); // true || false
$('#toggle-state-switch').bootstrapSwitch('toggleState');
$('#toggle-state-switch').bootstrapSwitch('state', false); // true || false</code></pre>
        </section>
        <section id="destroy" class="section">
          <div class="page-header">
            <h3><a name="destroy" class="anchor" href="#destroy">Destroy <small>JavaScript</small></a></h3>
          </div>
          <input type="checkbox" id="destroy-switch" checked>
          <br>
          <br>
          <button id="btn-destroy-switch" class="btn btn-default">Destroy me!</button>
          <pre class="language-javascript"><code>$('#destroy-switch').bootstrapSwitch('destroy');</code></pre>
        </section>
        <section id="disable" class="section">
          <div class="page-header">
            <h3><a name="disable" class="anchor" href="#disable">Disable / Readonly <small>JavaScript</small></a></h3>
          </div>
          <label for="disable-switch">Disable controls</label>
          <input type="checkbox" id="disable-switch" checked>
          <br>
          <br>
          <button id="btn-disable-is" class="btn btn-default">Is disabled?</button>
          <button id="btn-disable-toggle" class="btn btn-default">Toggle Disable</button>
          <button id="btn-disable-set" class="btn btn-default">Set Disable</button>
          <button id="btn-disable-remove" class="btn btn-default">Remove Disable</button>
          <br>
          <br>
          <label for="readonly-switch">Readonly controls</label>
          <input type="checkbox" id="readonly-switch" checked>
          <br>
          <br>
          <button id="btn-readonly-is" class="btn btn-default">Is readonly?</button>
          <button id="btn-readonly-toggle" class="btn btn-default">Toggle readonly</button>
          <button id="btn-readonly-set" class="btn btn-default">Set readonly</button>
          <button id="btn-readonly-remove" class="btn btn-default">Remove readonly</button>
          <pre class="language-javascript"><code>$('#disable-switch').bootstrapSwitch('disabled');
$('#disable-switch').bootstrapSwitch('toggleDisabled');
$('#disable-switch').bootstrapSwitch('disabled', true);  // true || false

$('#readonly-switch').bootstrapSwitch('readonly');
$('#readonly-switch').bootstrapSwitch('toggleReadonly');
$('#readonly-switch').bootstrapSwitch('readonly', true);  // true || false</code></pre>
        </section>
        <section id="radio" class="section">
          <div class="page-header">
            <h3><a name="radio" class="anchor" href="#radio">Radio <small>JavaScript</small></a></h3>
          </div>
          <div class="form-group">
            <label for="option1">Option 1</label>
            <input id="option1" type="radio" name="radio1" value="option1"> &nbsp;&nbsp;
            <label for="option2">Option 2</label>
            <input id="option2" type="radio" name="radio1" value="option2"> &nbsp;&nbsp;
            <label for="option3">Option 3</label>
            <input id="option3" type="radio" name="radio1" value="option3">
          </div>
          <pre class="language-markup"><code>&lt;div class="form-group">
  &lt;label for="option1">Option 1&lt;/label>
  &lt;input id="option1" type="radio" name="radio1" value="option1">
  &lt;label for="option2">Option 2&lt;/label>
  &lt;input id="option2" type="radio" name="radio1" value="option2">
  &lt;label for="option3">Option 3&lt;/label>
  &lt;input id="option3" type="radio" name="radio1" value="option3">
&lt;/div></code></pre>
        </section>
        <section id="form" class="section">
          <div class="page-header">
            <h3><a name="form" class="anchor" href="#form">Form</a></h3>
          </div>
          <form class="clearfix" role="form">
            <div class="form-group">
              <label class="control-label" for="inputEmail">Email</label>
              <input type="text" id="inputEmail" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <label class="control-label" for="notification1">Notification 1</label>
              <input id="notification1" type="checkbox">
            </div>
            <div class="form-group">
              <label class="control-label" for="notification2">Notification 2</label>
              <input id="notification2" type="checkbox">
            </div>
            <div class="form-actions">
              <button type="reset" class="btn btn-default btn-warning">Reset</button>
            </div>
          </form>
          <pre class="language-markup"><code>&lt;form class="form-horizontal">
  &lt;div class="form-group">
    &lt;label class="control-label" for="inputEmail">Email&lt;/label>
    &lt;input type="text" id="inputEmail" placeholder="Email">
  &lt;/div>
  &lt;div class="form-group">
    &lt;label class="control-label" for="notification1">Notification 1&lt;/label>
    &lt;input id="notification1" type="checkbox">
  &lt;/div>
  &lt;div class="form-group">
    &lt;label class="control-label" for="notification2">Notification 2&lt;/label>
    &lt;input id="notification2" type="checkbox">
  &lt;/div>
  &lt;div class="form-actions">
    &lt;button type="reset" class="btn btn-inverse">Reset&lt;/button>
  &lt;/div>
&lt;/form></code></pre>
        </section>
        <section id="modal" class="section">
          <div class="page-header">
            <h3><a name="modal" class="anchor" href="#modal">Modal</a></h3>
          </div>
          <a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal</a>
          <pre class="language-markup"><code>&lt;a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Modal&lt;/a>

&lt;div class="modal-body">
  &lt;input type="checkbox" checked>
&lt;/div></code></pre>
        </section>
        <footer class="footer">
          <p>&copy; by <a href="http://larentis.eu" target="_blank">Mattia Larentis</a> (<a href="https://twitter.com/SpiritualGuru">@SpiritualGuru</a>), <a href="http://www.bdmdesign.org/" target="_blank">Peter Stein</a> and <a href="http://www.lostcrew.it/" target="_blank">Emanuele Marchi</a></p>
        </footer>
      </div>
    </div>
  </div>
  <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h3>Modal</h3>
        </div>
        <div class="modal-body">
          <input type="checkbox" checked>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
      </div>
    </div>
  </div>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <script src="build/js/bootstrap-switch.js"></script>
  <script src="docs/lib/prism.js"></script>
  <script src="docs/index.js"></script>
  </body>
</html>