hugh
/
bootstrap-switch


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap switch - by Mattia Larentis, enhanced by Peter Stein aka BdMdesigN</title>
    <meta name="description" content="Switches for radio buttons and checkboxes">
    <meta name="author" content="Mattia Larentis">
    <meta name="subauthor" content="Peter Stein">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
    <link rel="stylesheet" href="static/stylesheets/bootstrap-switch.css" />
    <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css" />
    <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/docs.css" />
    <link rel="stylesheet" href="http://bdmdesign.github.io/bootstrap-switch/static/stylesheets/styles.css" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
    <link rel="stylesheet" href="http://bdmdesign.github.io/bootstrap-switch/static/stylesheets/flat-ui-fonts.css">

        <style type="text/css">
            body {
                padding-top: 60px;
                padding-bottom: 40px;
              }
        .span4, h1 {
            text-align: center;
        }

        h1 {
            margin-bottom: 20px;
        }

        h3 {
            margin-top: 20px;
        }
        </style>
        <!-- TODO: make sure bootstrap-responsive.min.css points to BootTheme
        generated file -->
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css"
        rel="stylesheet">
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!-- Fav and touch icons -->
</head>
    
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
            <a href="https://github.com/nostalgiaz/bootstrap-switch"><img
            style="position: absolute; top: 0; right: 0; border: 0;"
            src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
            alt="Fork me on GitHub"></a>

                <div class="row-fluid" style="margin-top:10px;">
                    <div class="span12">
                        <h1>Bootstrap switch<small> - by <a href="http://larentis.eu">Mattia Larentis</a> <a href="https://twitter.com/spiritualguru">(@SpiritualGuru)</a></small></h1>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span8 offset2" style="text-align: center;">
                        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=watch&count=true"
                        allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
                        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=fork&count=true"
                        allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
                        <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&type=follow&count=true"
                        allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
                    </div>
                </div>

                <div class="container-fluid">
                      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
                      </a>

                      <div class="nav-collapse collapse">
                          <p class="navbar-text pull-right" style="padding-right:15px;">Downloads:
                              <a href="https://github.com/nostalgiaz/bootstrap-switch/zipball/master" class="navbar-link">ZIP</a>
                              <a href="https://github.com/nostalgiaz/bootstrap-switch/tarball/master" class="navbar-link">TAR</a>
                          </p>
                          <ul class="nav nav-links">
                              <li>
                                  <a href="./index.html">Home</a>
                              </li>
                              <li class="active">
                                  <a href="./examples.html">Demos</a>
                              </li>
                          </ul>
                      </div>
                      <!--/.nav-collapse -->
                </div>
            </div>
        </div>

        <div id="nav-content-container">
            <div class="container">

                <div class="wrapper">
                    <nav>
                        <ul></ul>
                    </nav>
                    <section>

                        <h2><a name="size" class="anchor" href="#size"><span class="octicon octicon-link"></span></a>Size</h2>
    <!-- SIZE -->
    <div class="row-fluid">
        <div class="span12">
            <div class="bs-docs-example">
                <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>
                <br />
                <br />
                <label>Dimensions can be changed too:</label>
                <div id="dimension-switch" class="make-switch">
                    <input type="checkbox" checked />
                </div>
                <br />
                <br />
                <button id="btn-size-large-switch" class="btn">Large</button>
                <button id="btn-size-regular-switch" class="btn">Regular</button>
                <button id="btn-size-small-switch" class="btn">Small</button>
                <button id="btn-size-mini-switch" class="btn">Mini</button>
            </div>
            <pre class="prettyprint linenums">
&lt;div class="make-switch switch-large">
    &lt;input type="checkbox" checked />
&lt;/div>

&lt;div class="make-switch">
    &lt;input type="checkbox" checked />
&lt;/div>

&lt;div class="make-switch switch-small">
    &lt;input type="checkbox" checked />
&lt;/div>

&lt;div class="make-switch switch-mini">
    &lt;input type="checkbox" checked />
&lt;/div>

&lt;div id="dimension-switch" class="make-switch">
    &lt;input type="checkbox" checked />
&lt;/div>
            </pre>
            <pre class="prettyprint linenums">
$('#dimension-switch').bootstrapSwitch('setSizeClass', '');               // Resets to the regular style
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');    // Sets a mini switch
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');   // Sets a small switch
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');   // Sets a large switch
            </pre>
        </div>
    </div>

                        <h2><a name="colors" class="anchor" href="#colors"><span class="octicon octicon-link"></span></a>Colors</h2>
    <!-- COLORS -->
    <div class="row-fluid">
        <div class="span12">
            <div class="bs-docs-example">
                <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>
                <br />
                <br />
                <label for="change-color-switch">Colors can be changed too</label>
                <div id="change-color-switch" class="make-switch" data-on="default" data-off="primary">
                    <input type="checkbox" checked />
                </div>
                <br />
                <br />
                <button id="btn-color-on-switch" class="btn">
                    Change "On" color
                </button>
                <button id="btn-color-off-switch" class="btn">
                    Change "Off" color
                </button>
            </div>
            
            <pre class="prettyprint linenums">
&lt;div class="make-switch" data-on="primary" data-off="info">
    &lt;input type="checkbox" checked />
&lt;/div>

&lt;div class="make-switch" data-on="info" data-off="success">
    &lt;input type="checkbox" checked />
&lt;/div>

&lt;div class="make-switch" data-on="success" data-off="warning">
    &lt;input type="checkbox" checked />
&lt;/div>

&lt;div class="make-switch" data-on="warning" data-off="danger">
    &lt;input type="checkbox" checked />
&lt;/div>

&lt;div class="make-switch" data-on="danger" data-off="default">
    &lt;input type="checkbox" checked />
&lt;/div>

&lt;div class="make-switch" data-on="default" data-off="primary">
    &lt;input type="checkbox" checked />
&lt;/div>

&lt;div id="change-color-switch" class="make-switch" data-on="default" data-off="primary">
    &lt;input type="checkbox" checked />
&lt;/div>
            </pre>
            
            <pre class="prettyprint linenums">
$('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
$('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');
            </pre>
        </div>
    </div>

                        <h2><a name="animation" class="anchor" href="#animation"><span class="octicon octicon-link"></span></a>Animation <small>javascript</small></h2>
    <!-- ANIMATION -->
    <div class="row-fluid">
        <div class="span12">
            <div class="bs-docs-example">
                <div id="animated-switch" class="make-switch" data-animated="false">
                    <input type="checkbox" checked />
                </div>
                <br />
                <br />
                <button id="btn-animate-switch" class="btn">
                    Animate
                </button>
                <button id="btn-dont-animate-switch" class="btn">
                    Don't animate
                </button>
            </div>
            <pre class="prettyprint linenums">
&lt;div id="animated-switch" class="make-switch" data-animated="false">
    &lt;input type="checkbox" checked />
&lt;/div>
             </pre>

            <pre class="prettyprint linenums">
$('#animated-switch').bootstrapSwitch('setAnimated', true);     // Enables animation for the selected item
$('#animated-switch').bootstrapSwitch('setAnimated', false);    // Disables animation for the selected item
            </pre>
        </div>
    </div>

                        <h2><a name="disabled" class="anchor" href="#disabled"><span class="octicon octicon-link"></span></a>Disabled</h2>
    <!-- DISABLED -->
    <div class="row-fluid">
        <div class="span12">
            <div class="bs-docs-example">
                <div class="make-switch">
                    <input type="checkbox" checked disabled />
                </div>
            </div>
            <pre class="prettyprint linenums">
&lt;div class="make-switch">
   &lt;input type="checkbox" checked disabled />
&lt;/div>
            </pre>
        </div>
    </div>

                        <h2><a name="text" class="anchor" href="#text"><span class="octicon octicon-link"></span></a>Text</h2>
    <!-- TEXT -->
    <div class="row-fluid">
        <div class="span12">
            <div class="bs-docs-example">
                <div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
                    <input type="checkbox" checked />
                </div>
                <br />
                <br />
                <button id="btn-label-on-switch" class="btn">
                    Change "On" label
                </button>
                <button id="btn-label-off-switch" class="btn">
                    Change "Off" label
                </button>
            </div>
            <pre class="prettyprint linenums">
&lt;div id="label-switch" class="make-switch" data-on-label="SI" data-off-label="NO">
    &lt;input type="checkbox" checked />
&lt;/div>
            </pre>
            <pre class="prettyprint linenums">
$('#label-switch').bootstrapSwitch('setOnLabel', 'I');
$('#label-switch').bootstrapSwitch('setOffLabel', 'O');
            </pre>
        </div>
    </div>

                        <h2><a name="label-text" class="anchor" href="#label-text"><span class="octicon octicon-link"></span></a>Label Text</h2>
    <!-- LABEL TEXT -->
    <div class="row-fluid">
        <div class="span12">
            <div class="bs-docs-example">
                <div class="make-switch" data-text-label="My TV">
                    <input type="checkbox" checked />
                </div>
            </div>
            <pre class="prettyprint linenums">
&lt;div class="make-switch" data-text-label="My TV">
    &lt;input type="checkbox" checked />
&lt;/div>
            </pre>
        </div>
    </div>

                        <h2><a name="html-text" class="anchor" href="#html-text"><span class="octicon octicon-link"></span></a>HTML text</h2>
    <!-- HTML TEXT -->
    <div class="row-fluid">
        <div class="span12">
            <div class="bs-docs-example">
                <div class="make-switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
                    <input type="checkbox" checked />
                </div>
            </div>
            <pre class="prettyprint linenums">
&lt;div class="make-switch" data-on-label="&lt;i class='icon-ok icon-white'>&lt;/i>" data-off-label="&lt;i class='icon-remove'>&lt;/i>">
    &lt;input type="checkbox" checked />
&lt;/div>
            </pre>
        </div>
    </div>

                        <h2><a name="html-text-label-icon" class="anchor" href="#html-text-label-icon"><span class="octicon octicon-link"></span></a>HTML text Label Icon</h2>
    <!-- HTML TEXT LABEL ICON STANDARD -->
    <div class="row-fluid">
        <div class="span12">
            <div class="bs-docs-example">
            <h3>Standard</h3>
                <div class="make-switch switch-large" data-label-icon="icon-fullscreen" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
                    <input type="checkbox" checked />
                </div>
            <!-- HTML TEXT LABEL ICON FONT AWESOME -->
            <h3>Font Awesome</h3>
                <div class="make-switch switch-large" data-label-icon="icon-youtube icon-large" data-on-label="<i class='icon-thumbs-up icon-white'></i>" data-off-label="<i class='icon-thumbs-down'></i>">
                    <input type="checkbox" checked />
                </div>
            <!-- HTML TEXT LABEL ICON FLAT UI -->
            <h3>Flat UI</h3>
                <div class="make-switch" data-label-icon="fui-video" data-on-label="<i class='fui-check icon-white'></i>" data-off-label="<i class='fui-cross'></i>">
                    <input type="checkbox" checked />
                </div>
            </div>
            <!-- HTML TEXT LABEL ICON STANDARD -->
            <h3>Standard</h3>
            <pre class="prettyprint linenums">
&lt;div class="make-switch switch-large" data-label-icon="icon-fullscreen" data-on-label="&lt;i class='icon-ok icon-white'>&lt;/i>" data-off-label="&lt;i class='icon-remove'>&lt;/i>">
    &lt;input type="checkbox" checked />
&lt;/div>
            </pre>
            <!-- HTML TEXT LABEL ICON FONT AWESOME -->
            <h3>Font Awesome</h3>
            <pre class="prettyprint linenums">
&lt;div class="make-switch switch-large" data-label-icon="icon-youtube icon-large" data-on-label="&lt;i class='icon-thumbs-up icon-white'>&lt;/i>" data-off-label="&lt;i class='icon-thumbs-down'>&lt;/i>">
    &lt;input type="checkbox" checked />
&lt;/div>
            </pre>
            <!-- HTML TEXT LABEL ICON FLAT UI -->
            <h3>Flat UI</h3>
            <pre class="prettyprint linenums">
&lt;div class="make-switch" data-label-icon="fui-video" data-on-label="&lt;i class='fui-check icon-white'>&lt;/i>" data-off-label="&lt;i class='fui-cross'>&lt;/i>">
    &lt;input type="checkbox" checked />
&lt;/div>
            </pre>
        </div>
    </div>

                        <h2><a name="html-text-mini-switch" class="anchor" href="#html-text-mini-switch"><span class="octicon octicon-link"></span></a>HTML text (mini-switch)</h2>
    <!-- HTML TEXT MINI SWITCH STANDARD -->
    <div class="row-fluid">
        <div class="span12">
            <div class="bs-docs-example">
            <h3>Standard</h3>
                <div class="make-switch switch-mini" data-on-label="<i class='switch-mini-icons icon-ok icon-white'></i>" data-off-label="<i class='switch-mini-icons icon-remove'></i>">
                    <input type="checkbox" checked />
                </div>
            <!-- HTML TEXT MINI SWITCH FONT AWESOME -->
            <h3>Font Awesome</h3>
                <div class="make-switch switch-mini" data-on-label="<i class='switch-mini-font-icons icon-thumbs-up icon-white'></i>" data-off-label="<i class='switch-mini-font-icons icon-thumbs-down'></i>">
                    <input type="checkbox" checked />
                </div>
            <!-- HTML TEXT MINI SWITCH FLAT UI -->
            <h3>Flat UI</h3>
                <div class="make-switch switch-mini" data-on-label="<i class='switch-mini-font-icons fui-check icon-white'></i>" data-off-label="<i class='switch-mini-font-icons fui-cross'></i>">
                    <input type="checkbox" checked />
                </div>
            </div>
            <h3>Standard</h3>
            <pre class="prettyprint linenums">
&lt;div class="make-switch switch-mini" data-on-label="&lt;i class='switch-mini-icons icon-ok icon-white'>&lt;/i>" data-off-label="&lt;i class='switch-mini-icons icon-remove'>&lt;/i>">
    &lt;input type="checkbox" checked />
&lt;/div>
            </pre>
            <!-- HTML TEXT MINI SWITCH FONT AWESOME -->
            <h3>Font Awesome</h3>
            <pre class="prettyprint linenums">
&lt;div class="make-switch switch-mini" data-on-label="&lt;i class='switch-mini-font-icons icon-thumbs-up icon-white'>&lt;/i>" data-off-label="&lt;i class='switch-mini-font-icons icon-thumbs-down'>&lt;/i>">
    &lt;input type="checkbox" checked />
&lt;/div>
            </pre>
            <!-- HTML TEXT MINI SWITCH FLAT UI -->
            <h3>Flat UI</h3>
            <pre class="prettyprint linenums">
&lt;div class="make-switch switch-mini" data-on-label="&lt;i class='switch-mini-font-icons fui-check icon-white'>&lt;/i>" data-off-label="&lt;i class='switch-mini-font-icons fui-cross'>&lt;/i>">
    &lt;input type="checkbox" checked />
&lt;/div>
            </pre>
        </div>
    </div>

                        <h2><a name="event-handler-javascript" class="anchor" href="#event-handler-javascript"><span class="octicon octicon-link"></span></a>Event handler <small>javascript</small></h2>
    <!-- EVENT HANDLER -->
    <div class="row-fluid">
        <div class="span12">
            <div class="bs-docs-example">
                <div id="mySwitch" class="make-switch">
                    <input type="checkbox" checked />
                </div>
            </div>
            <pre class="prettyprint linenums">
$('#mySwitch').on('switch-change', function (e, data) {
    var $el = $(data.el)
      , value = data.value;
    console.log(e, $el, value);
});
            </pre>
        </div>
    </div>

                        <h2><a name="label-event-handler-javascript" class="anchor" href="#label-event-handler-javascript"><span class="octicon octicon-link"></span></a>Label Event handler <small>javascript</small></h2>
    <!-- LABEL EVENT HANDLER -->
    <div class="row-fluid">
        <div class="span12">
            <div class="bs-docs-example">
            <h3>Label 1</h3>
              <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>
            <h3>Label 2</h3>
                <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>
            </div>
           <h3>Label 1</h3>
            <pre class="prettyprint linenums">
&lt;label id="label-toggle-switch">Click on this Text to change the switch state&lt;/label>
    &lt;div class="label-toggle-switch make-switch">
        &lt;input type="checkbox" checked />
    &lt;/div>
&lt;script>
    $(document).ready(function() {
        $('#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);
        });
    });
&lt;/script>
            </pre>
            <h3>Label 2</h3>
            <pre class="prettyprint linenums">
&lt;div id="label2-toggle-switch">
    &lt;label class="label-change-switch">Click on this Text to change the switch state
    &lt;div class="label2-toggle-switch make-switch">
        &lt;input type="checkbox" checked />
    &lt;/div>
    &lt;/label>
&lt;/div>
&lt;script>
    $(document).ready(function() {
        $('#label2-toggle-switch').on('switch-change', function(e, data) {
            alert(data.value);
        });
    });
&lt;/script>
            </pre>
        </div>
    </div>

                        <h2><a name="toggle-state " class="anchor" href="#toggle-state"><span class="octicon octicon-link"></span></a>Toggle State <small>javascript</small></h2>
    <!-- TOGGLE -->
    <div class="row-fluid">
        <div class="span12">
            <div class="bs-docs-example">
                <div id="toggle-state-switch" class="make-switch">
                    <input type="checkbox" checked />
                </div>
                <br />
                <br />
                <div id="toggle-state-switch-button-status" class="btn btn-primary">Status!</div>
                <div id="toggle-state-switch-button-on" class="btn btn-primary">ON!</div>
                <div id="toggle-state-switch-button" class="btn btn-primary">Toggle me!</div>
                <div id="toggle-state-switch-button-off" class="btn btn-primary">OFF!</div>
            </div>
            <pre class="prettyprint linenums">
$('#toggle-state-switch').bootstrapSwitch('status'); // true || false
$('#toggle-state-switch').bootstrapSwitch('toggleState');
$('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false
            </pre>
        </div>
    </div>

                        <h2><a name="destroy" class="anchor" href="#destroy"><span class="octicon octicon-link"></span></a>Destroy <small>javascript</small></h2>
    <!-- DESTROY -->
<div class="row-fluid">
    <div class="span12">
        <div class="bs-docs-example">
            <div id="destroy-switch" class="make-switch">
                <input type="checkbox" checked />
            </div>
            <br />
            <br />
            <button id="btn-destroy-switch" class="btn btn-danger">
                Destroy me!
            </button>
        </div>
        <pre class="prettyprint linenums">
$('#destroy-switch').bootstrapSwitch('destroy');</pre>
    </div>
</div>

                        <h2><a name="create" class="anchor" href="#create"><span class="octicon octicon-link"></span></a>Create <small>javascript</small></h2>
    <!-- CREATE -->
    <div class="row-fluid">
        <div class="span12">
            <div class="bs-docs-example">
                <input id="create-switch" type="checkbox" checked />
                <br />
                <br />
                <div id="btn-create" class="btn">Create</div>
            </div>
            <pre class="prettyprint linenums">
$('#create-switch').wrap('&lt;div class="make-switch" />').parent().bootstrapSwitch();
            </pre>
        </div>
    </div>

                        <h2><a name="disabled-javascript" class="anchor" href="#disabled-javascript"><span class="octicon octicon-link"></span></a>Disabled <small>javascript</small></h2>
    <!-- DISABLED -->
    <div class="row-fluid">
        <div class="span12">
            <div class="bs-docs-example">
                <label for="disable-switch-input">amazing label</label>
                <div id="disable-switch" class="make-switch">
                    <input id="disable-switch-input" type="checkbox" checked />
                </div>
                <br />
                <br />
                <button id="btn-is-active-switch" class="btn">
                    Is active?
                </button>
                <button id="btn-toggle-activation-switch" class="btn">
                    Toggle activation!
                </button>
                <button id="btn-disable-switch" class="btn">
                    Disable!
                </button>
                <button id="btn-activate-switch" class="btn">
                    Activate!
                </button>
            </div>
            <pre class="prettyprint linenums">
$('#disable-switch').bootstrapSwitch('isActive');
$('#disable-switch').bootstrapSwitch('toggleActivation');
$('#disable-switch').bootstrapSwitch('setActive', false);  // true || false
            </pre>
        </div>
    </div>

                        <h2><a name="radio-javascript" class="anchor" href="#radio-javascript"><span class="octicon octicon-link"></span></a>Radio <small>javascript</small></h2>
    <!-- RADIO -->
    <div class="row-fluid">
        <div class="span12">
            <div class="bs-docs-example">
                <div class="control-group">
                     <div class="controls">
                        <label class="control-label" for="option1">Option 1</label>
                            <div id="option1" class="make-switch radio1 radio-no-uncheck">
                                <input type="radio" name="radio1" value="option1" />
                            </div>
                        <label class="control-label" for="option2">Option 2</label>
                            <div id="option2" class="make-switch radio1 radio-no-uncheck">
                                <input type="radio" name="radio1" value="option2" />
                            </div>
                        <label class="control-label" for="option3">Option 3</label>
                            <div id="option3" class="make-switch radio1 radio-no-uncheck">
                                <input type="radio" name="radio1" value="option3" />
                            </div>
                     </div>
                </div>
            </div>
            <pre class="prettyprint linenums">
&lt;div class="control-group">
    &lt;div class="controls">
        &lt;label class="control-label" for="option1">Option 1&lt;/label>
            &lt;div id="option1" class="make-switch radio1 radio-no-uncheck">
                &lt;input type="radio" name="radio1" value="option1" />
            &lt;/div>
        &lt;label class="control-label" for="option2">Option 2&lt;/label>
            &lt;div id="option2" class="make-switch radio1 radio-no-uncheck">
                &lt;input type="radio" name="radio1" value="option2" />
            &lt;/div>
        &lt;label class="control-label" for="option3">Option 3&lt;/label>
            &lt;div id="option3" class="make-switch radio1 radio-no-uncheck">
                &lt;input type="radio" name="radio1" value="option3" />
            &lt;/div>
    &lt;/div>
&lt;/div>            
&lt;script>
    $(document).ready(function() {
        $('.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);
        });
    });
&lt;/script>
            </pre>
        </div>
    </div>

                        <h2><a name="radio-javascript-allow-uncheck" class="anchor" href="#radio-javascript-allow-uncheck"><span class="octicon octicon-link"></span></a>Radio <small>javascript (allow radios uncheck)</small></h2>
    <!-- RADIO ALLOW UNCHECK -->
    <div class="row-fluid">
        <div class="span12">
            <div class="bs-docs-example">
                <div class="control-group">
                     <div class="controls">
                        <label class="control-label" for="option1">Option 1</label>
                            <div id="option1" class="make-switch radio2">
                                <input type="radio" name="radio2" value="option1" />
                            </div>
                        <label class="control-label" for="option2">Option 2</label>
                            <div id="option2" class="make-switch radio2">
                                <input type="radio" name="radio2" value="option2" checked="checked" />
                            </div>
                        <label class="control-label" for="option3">Option 3</label>
                            <div id="option3" class="make-switch radio2">
                                <input type="radio" name="radio2" value="option3" />
                            </div>
                     </div>
                </div>
            </div>
            <pre class="prettyprint linenums">
&lt;div class="control-group">
    &lt;div class="controls">
        &lt;label class="control-label" for="option1">Option 1&lt;/label>
            &lt;div id="option1" class="make-switch radio2">
                &lt;input type="radio" name="radio2" value="option1" />
            &lt;/div>
        &lt;label class="control-label" for="option2">Option 2&lt;/label>
            &lt;div id="option2" class="make-switch radio2">
                &lt;input type="radio" name="radio2" value="option2" checked="checked" />
            &lt;/div>
        &lt;label class="control-label" for="option3">Option 3&lt;/label>
            &lt;div id="option3" class="make-switch radio2">
                &lt;input type="radio" name="radio2" value="option3" />
            &lt;/div>
    &lt;/div>
&lt;/div>            
&lt;script>
    $(document).ready(function() {
        $('.radio2').on('switch-change', function () {
            $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
        });
    });
&lt;/script>
            </pre>
        </div>
    </div>

                        <h2><a name="form" class="anchor" href="#form"><span class="octicon octicon-link"></span></a>Form <small>- try to use tab, space and reset button</small></h2>
    <!-- FORM -->
    <div class="row-fluid">
        <div class="span12">
            <div class="bs-docs-example">
                <form class="form-horizontal span8 offset2">
                    <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>
                <div class="clearfix"></div>
            </div>
            
            <pre class="prettyprint linenums">
&lt;form class="form-horizontal">
    &lt;div class="control-group">
        &lt;label class="control-label" for="inputEmail">Email&lt;/label>
        &lt;div class="controls">
            &lt;input type="text" id="inputEmail" placeholder="Email">
        &lt;/div>
    &lt;/div>
    &lt;div class="control-group">
        &lt;label class="control-label" for="notification1">Notification 1&lt;/label>
        &lt;div class="controls">
            &lt;div class="make-switch" tabindex="0">
                &lt;input id="notification1" type="checkbox" />
            &lt;/div>
        &lt;/div>
    &lt;/div>
    &lt;div class="control-group">
        &lt;label class="control-label" for="notification2">Notification 2&lt;/label>
        &lt;div class="controls">
            &lt;div class="make-switch" tabindex="0">
                &lt;input id="notification2" type="checkbox" />
            &lt;/div>
        &lt;/div>
    &lt;/div>
    &lt;div class="form-actions">
        &lt;button type="reset" class="btn btn-inverse">Reset&lt;/button>
    &lt;/div>
&lt;/form>
            </pre>
        </div>
    </div>

                        <h2><a name="modal" class="anchor" href="#modal"><span class="octicon octicon-link"></span></a>Modal</h2>
    <!-- MODAL -->
    <div class="row-fluid">
    <div class="span12">
        <div class="bs-docs-example">
            <a href="#myModal" role="button" class="btn" data-toggle="modal">Modal</a>
        </div>
        <pre class="prettyprint linenums">
&lt;a href="#myModal" role="button" class="btn" data-toggle="modal">Modal&lt;/a>
-----
&lt;div class="modal-body">
    &lt;div class="make-switch">
        &lt;input type="checkbox" checked />
    &lt;/div>
&lt;/div></pre>
    </div>
</div>
</div>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Modal</h3>
    </div>
    <div class="modal-body">
        <div class="make-switch">
            <input type="checkbox" checked />
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
    window.prettyPrint && prettyPrint();
    $('#mySwitch').on('switch-change', function (e, data) {
        var $el = $(data.el)
            , value = data.value;
        console.log(e, $el, value);
    });
    
    // DIMENSION
    $('#btn-size-regular-switch').on('click', function () {
        $('#dimension-switch').bootstrapSwitch('setSizeClass', '');
    });
    $('#btn-size-mini-switch').on('click', function () {
        $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');
    });
    $('#btn-size-small-switch').on('click', function () {
        $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');
    });
    $('#btn-size-large-switch').on('click', function () {
        $('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');
    });

    // STATE
    $('#toggle-state-switch-button').on('click', function () {
        $('#toggle-state-switch').bootstrapSwitch('toggleState');
    });
    $('#toggle-state-switch-button-on').on('click', function () {
        $('#toggle-state-switch').bootstrapSwitch('setState', true);
    });
    $('#toggle-state-switch-button-off').on('click', function () {
        $('#toggle-state-switch').bootstrapSwitch('setState', false);
    });
    $('#toggle-state-switch-button-status').on('click', function () {
        alert($('#toggle-state-switch').bootstrapSwitch('status'));
    });    

    // DESTROY
    $('#btn-destroy-switch').on('click', function () {
        $('#destroy-switch').bootstrapSwitch('destroy');
        $(this).remove();
    });
    // CREATE
    $('#btn-create').on('click', function () {
        $('#create-switch').wrap('<div class="make-switch" />').parent().bootstrapSwitch();
        $(this).remove()
    });

    // ACTIVATION
    $('#btn-is-active-switch').on('click', function () {
        alert($('#disable-switch').bootstrapSwitch('isActive'));
    });
    $('#btn-toggle-activation-switch').on('click', function () {
        $('#disable-switch').bootstrapSwitch('toggleActivation');
    });
    $('#btn-disable-switch').on('click', function () {
        $('#disable-switch').bootstrapSwitch('setActive', false);
    });
    $('#btn-activate-switch').on('click', function () {
        $('#disable-switch').bootstrapSwitch('setActive', true);
    });
    
    // LABEL
    $('#btn-label-on-switch').on('click', function() {
        $('#label-switch').bootstrapSwitch('setOnLabel', 'I');
    });
    $('#btn-label-off-switch').on('click', function() {
        $('#label-switch').bootstrapSwitch('setOffLabel', 'O');
    });

    $('#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);
    });
    $('#label2-toggle-switch').on('switch-change', function(e, data) {
        alert(data.value);
    });

    // COLOR
    $('#btn-color-on-switch').on('click', function() {
        $('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
    });
    $('#btn-color-off-switch').on('click', function() {
        $('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');
    });
    
    // ANIMATION
    $('#btn-animate-switch').on('click', function() {
        $('#animated-switch').bootstrapSwitch('setAnimated', true);
    });
    $('#btn-dont-animate-switch').on('click', function() {
        $('#animated-switch').bootstrapSwitch('setAnimated', false);
    });    
    
    // RADIO
    $('.radio1').on('switch-change', function () {
        $('.radio1').bootstrapSwitch('toggleRadioState');
    });
    $('.radio2').on('switch-change', function () {
        $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
    });
});
</script>
                    </section>
                </div>
            </div>

        </div>

        <footer>
            <div class="navbar navbar-fixed-bottom" style="height:30px;">

                <div class="navbar-inner">
                    <div class="container-fluid">
                        <p style="float:left; padding-top: 5px;">
                            &copy; by            
                        Mattia Larentis 2012 - 2013, enhanced by Peter Stein (BdMdesigN) 
                            <i class="icon-asterisk"> </i> design by BdMdesigN
                        </p>
                        <p class="pull-right" style="padding-top: 5px;">
                            <a href="https://twitter.com/SpiritualGuru">follow me</a> -
                            <a href="http://www.larentis.eu">my site</a>
                        </p>
                    </div>
                </div>
            </div>
        </footer>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
        <script src="static/js/bootstrap-switch.js"></script>
        <script src="http://bdmdesign.github.io/bootstrap-switch/static/js/main.js"></script>
  </body>

</html>