hugh
/
bootstrap-switch


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509
							<!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 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="dist/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);
      })();
    </script>
  </head>
  <body>
    <header role="banner" class="navbar navbar-default navbar-fixed-top top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><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" role="navigation" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="dropdown"><a href="#" data-toggle="dropdown">Download<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/3.0.zip">3 (Release candidate)</a></li>
                <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">2.0.1</a></li>
              </ul>
            </li>
            <li><a href="#getting-started">Getting Started</a></li>
            <li class="dropdown"><a href="#documentation-3" data-toggle="dropdown">Documentation 3<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#options">Options</a></li>
                <li><a href="#methods">Methods</a></li>
                <li><a href="#additional-methods">Additional Methods</a></li>
                <li><a href="#events">Events</a></li>
              </ul>
            </li>
            <li class="dropdown"><a href="#documentation-2" data-toggle="dropdown">Documentation 2.0.1<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#options">Options</a></li>
                <li><a href="#methods">Methods</a></li>
                <li><a href="#events">Events</a></li>
              </ul>
            </li>
            <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="container">
      <div class="header">
        <h2 class="title">Bootstrap Switch</h2>
        <p class="lead">Turn checkboxes and radio buttons in toggle switches.</p>
        <p>Download your version:</p>
        <p>
          <input type="checkbox" name="download-version" checked data-size="large" data-on-text="3 RC" data-off-text="2.0.1">
        </p>
        <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><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" id="download-2" class="btn btn-lg btn-primary">Download 2.0.1 (Stable)</a></p>
      </div>
      <div id="getting-started">
        <h1 class="page-header">Getting Started</h1>
        <p>Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.</p>
        <pre><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><code>&lt;input type="checkbox" name="my-checkbox" checked&gt;</code></pre>
        <p>Initialize Bootstrap Switch.</p>
        <pre><code>$("[name='my-checkbox']").bootstrapSwitch();</code></pre>
        <p>Enjoy.</p>
      </div>
      <div id="documentation-3">
        <h1 class="page-header">Documentation 3</h1>
        <div id="options">
          <h2>Options</h2>
          <table class="table table-bordered table-striped table-responsive">
            <thead>
              <tr>
                <th>Name</th>
                <th>Type</th>
                <th>Description</th>
                <th>Values</th>
                <th>Default</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>state</td>
                <td>Boolean</td>
                <td>The checkbox state</td>
                <td>true, false</td>
                <td>'checked' attribute or true</td>
              </tr>
              <tr>
                <td>size</td>
                <td>String</td>
                <td>The checkbox state</td>
                <td>'mini', 'small', 'normal', 'large'</td>
                <td>'normal'</td>
              </tr>
              <tr>
                <td>animate</td>
                <td>Boolean</td>
                <td>Animate the switch</td>
                <td>true, false</td>
                <td>true</td>
              </tr>
              <tr>
                <td>disabled</td>
                <td>Boolean</td>
                <td>Disable state</td>
                <td>true, false</td>
                <td>'disabled' attribute or false</td>
              </tr>
              <tr>
                <td>readonly</td>
                <td>Boolean</td>
                <td>Readonly state</td>
                <td>true, false</td>
                <td>'readonly' attribute or false</td>
              </tr>
              <tr>
                <td>onColor</td>
                <td>String</td>
                <td>Color of the left side of the switch</td>
                <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
                <td>'primary'</td>
              </tr>
              <tr>
                <td>offColor</td>
                <td>String</td>
                <td>Color of the right side of the switch</td>
                <td>'primary', 'info', 'success', 'warning', 'danger', 'default'</td>
                <td>'default'</td>
              </tr>
              <tr>
                <td>onText</td>
                <td>String</td>
                <td>Text of the left side of the switch</td>
                <td>String</td>
                <td>'ON'</td>
              </tr>
              <tr>
                <td>offText</td>
                <td>String</td>
                <td>Text of the right side of the switch</td>
                <td>String</td>
                <td>'OFF'</td>
              </tr>
              <tr>
                <td>labelText</td>
                <td>String</td>
                <td>Text of the center handle of the switch</td>
                <td>String</td>
                <td>'&amp;nbsp;'</td>
              </tr>
              <tr>
                <td>baseClass</td>
                <td>String</td>
                <td>Prefix of every other used class</td>
                <td>String</td>
                <td>'bootstrap-switch'</td>
              </tr>
              <tr>
                <td>wrapperClass</td>
                <td>String | Array</td>
                <td>Container element class(es)</td>
                <td>String | Array</td>
                <td>'wrapper'</td>
              </tr>
              <tr>
                <td>onModifierClass</td>
                <td>String</td>
                <td>On Modifier class, used when the switch state is true</td>
                <td>String</td>
                <td>'on'</td>
              </tr>
              <tr>
                <td>offModifierClass</td>
                <td>String</td>
                <td>Off Modifier class, used when the switch state is false</td>
                <td>String</td>
                <td>'off'</td>
              </tr>
              <tr>
                <td>focusedModifierClass</td>
                <td>String</td>
                <td>Focused Modifier class, used when the switch is focused</td>
                <td>String</td>
                <td>'focused'</td>
              </tr>
              <tr>
                <td>animateModifierClass</td>
                <td>String</td>
                <td>Animate Modifier class, used to apply CSS animation to the switch</td>
                <td>String</td>
                <td>'animate'</td>
              </tr>
              <tr>
                <td>disabledModifierClass</td>
                <td>String</td>
                <td>Disabled Modifier class, used the switch is disabled</td>
                <td>String</td>
                <td>'disabled'</td>
              </tr>
              <tr>
                <td>readonlyModifierClass</td>
                <td>String</td>
                <td>Readonly Modifier class, used the switch is readonly</td>
                <td>String</td>
                <td>'readonly'</td>
              </tr>
              <tr>
                <td>onInit</td>
                <td>Function</td>
                <td>Callback function to execute on initialization</td>
                <td>Function</td>
                <td>
                  <pre><code class="javascript">function(event, state) {}</code></pre>
                </td>
              </tr>
              <tr>
                <td>onSwitchChange</td>
                <td>Function</td>
                <td>Callback function to execute on switch state change</td>
                <td>Function</td>
                <td>
                  <pre><code class="javascript">function(event, state) {}</code></pre>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div id="methods">
          <h2>Methods</h2>
          <p>In Bootstrap Switch, every option is also a method.</p>
          <p>You can call a method in this way:</p>
          <pre><code>$('input[name="my-checkbox"]').bootstrapSwitch('state'[, true][, true]);</code></pre>
          <p>If the second parameter is not specified, the current option is returned.</p>
          <p>Pass 'true' to 'state' as third parameter, or to 'toggleState' as second parameter in order to avoid the `switchChange` event execution.</p>
        </div>
        <div id="additional-methods">
          <h2>Additional Methods</h2>
          <table class="table table-bordered table-striped table-responsive">
            <thead>
              <tr>
                <th>Name</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>toggleState</td>
                <td>Toggle the switch state</td>
              </tr>
              <tr>
                <td>toggleDisabled</td>
                <td>Toggle the disabled state</td>
              </tr>
              <tr>
                <td>toggleReadonly</td>
                <td>Toggle the readonly state</td>
              </tr>
              <tr>
                <td>destroy</td>
                <td>Destroy the instance of Bootstrap Switch</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div id="events">
          <h2>Events</h2>
          <p>You can register to the emitted events as follow:</p>
          <pre><code>$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
  console.log(this); // DOM element
  console.log(event); // jQuery event
  console.log(state); // true | false
});</code></pre>
          <table class="table table-bordered table-striped table-responsive">
            <thead>
              <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Parameters</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>init</td>
                <td>Triggered on initialization. 'this' refers to the DOM element.</td>
                <td>event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>)</td>
              </tr>
              <tr>
                <td>switchChange</td>
                <td>Triggered on switch state change. 'this' refers to the DOM element.</td>
                <td>
                  event (<a href="https://api.jquery.com/category/events/event-object/" target="_blank">jQuery Event object</a>),
                  state (true | false)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div id="examples">
          <h2>Examples<small>To be included</small></h2>
          <!--
          h3 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
                &nbsp;
                button(type='button', id='state-switch-on', class='btn btn-default') Set On
                &nbsp;
                button(type='button', id='state-switch-off', class='btn btn-default') Set Off
                &nbsp;
                button(type='button', id='state-switch-toggle', class='btn btn-default') Toggle State
                
          -->
        </div>
      </div>
      <div id="documentation-2">
        <h1 class="page-header">Documentation 2.0.1<small>To be included</small></h1>
        <!--
        #options
          h2 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: '&amp;nbsp;'
              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) {}
                
        -->
      </div>
    </div>
    <script src="docs/lib/js/jquery.min.js"></script>
    <script src="docs/lib/js/bootstrap.min.js"></script>
    <script src="docs/lib/js/highlight.js"></script>
    <script src="dist/js/bootstrap-switch.js"></script>
    <script src="docs/index.js"></script>
  </body>
</html>