Home Explore Help
Sign In
hugh
/
bootstrap-switch
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

update documentation

Mattia Larentis 11 years ago
parent
cdffdc8c7c
commit
840c04a2fc
3 changed files with 25 additions and 405 deletions
Split View Show Diff Stats
  1. 0 382
      index.html
  2. 22 18
      static/js/bootstrap-switch.js
  3. 3 5
      static/stylesheets/bootstrap-switch.css

+ 0 - 382
index.html
View File 

@@ -1,382 +0,0 @@
 
-<!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="viewport" content="width=device-width, initial-scale=1.0">
 
-        <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;" />
 
-        <!-- Le styles -->
 
-        <!-- TODO: make sure bootstrap.min.css points to BootTheme generated file
 
-        -->
 
-        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
 
-        <link href="http://bdmdesign.github.io/bootstrap-switch/static/stylesheets/styles.css" rel="stylesheet" type="text/css" />
 
-        <link href="http://bdmdesign.github.io/bootstrap-switch/static/stylesheets/pygment_trac.css" rel="stylesheet" type="text/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 -->
 
-        <!-- 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 class="active">
 
-                                  <a href="./index.html">Home</a>
 
-                              </li>
 
-                              <li>
 
-                                  <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>
 
-                        <h1><a name="bootstrap-switch" class="anchor" href="#bootstrap-switch"><span class="octicon octicon-link"></span></a>Bootstrap-switch v1.8 (preview)</h1>
 
-
 
-                        <p>You can now also use radio buttons and checkboxes as switches.</p>
 
-
 
-                        <h2><a name="usage" class="anchor" href="#usage"><span class="octicon octicon-link"></span></a>Usage</h2>
 
-
 
-                        <p>Just include Twitter Bootstrap, jQuery, Bootstrap Switch CSS and Javascript</p>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=9; IE=8;"</span> <span class="nt">/&gt;</span>
 
-<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"</span><span class="nt">&gt;</span>
 
-<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"bootstrap-switch.css"</span><span class="nt">&gt;</span>
 
-
 
-<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
 
-<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"bootstrap-switch.js"</span><span class="nt">&gt;&lt;/script&gt;</span>  // master
 
-<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"http://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/1.7/bootstrap-switch.min.js"</span><span class="nt">&gt;</span><span class="err">  // from cdnjs.com</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <h2><a name="less" class="anchor" href="#less"><span class="octicon octicon-link"></span></a>Less</h2>
 
-
 
-                        <p>If you want to use your bootstrap vars edit bootstrapSwitch.less and then compile the less file</p>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nt">lessc static/less/bootstrap-switch.less static/stylesheets/bootstrap-switch.css</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <h2><a name="supported-browsers" class="anchor" href="#supported-browsers"><span class="octicon octicon-link"></span></a>Supported browsers</h2>
 
-
 
-                        <p>I'm not going to support ancient browsers! (it works on IE8+)</p>
 
-
 
-                        <h2><a name="basic-example" class="anchor" href="#basic-example"><span class="octicon octicon-link"></span></a>Basic Example</h2>
 
-
 
-                        <p>checkboxes:</p>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span><span class="nt">&gt;</span>
 
-    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
 
-<span class="nt">&lt;/div&gt;</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <p>radioboxes:</p>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span><span class="nt">&gt;</span>
 
-    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
 
-<span class="nt">&lt;/div&gt;</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <h2><a name="large-small-or-mini" class="anchor" href="#large-small-or-mini"><span class="octicon octicon-link"></span></a>Large, small or mini</h2>
 
-
 
-                        <p>checkboxes:</p>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch switch-large"</span><span class="nt">&gt;</span>  <span class="c">&lt;!-- switch-large, switch-small or switch-mini --&gt;</span>
 
-    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
 
-<span class="nt">&lt;/div&gt;</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <p>radioboxes:</p>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch switch-large"</span><span class="nt">&gt;</span>  <span class="c">&lt;!-- switch-large, switch-small or switch-mini --&gt;</span>
 
-    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
 
-<span class="nt">&lt;/div&gt;</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <h2><a name="colors" class="anchor" href="#colors"><span class="octicon octicon-link"></span></a>Colors</h2>
 
-
 
-                        <p>checkboxes:</p>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-on=</span><span class="s">"danger"</span> <span class="na">data-off=</span><span class="s">"warning"</span><span class="nt">&gt;</span>  <span class="c">&lt;!-- primary, info, success, warning, danger and default --&gt;</span>
 
-    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
 
-<span class="nt">&lt;/div&gt;</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <p>radioboxes:</p>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-on=</span><span class="s">"danger"</span> <span class="na">data-off=</span><span class="s">"warning"</span><span class="nt">&gt;</span>  <span class="c">&lt;!-- primary, info, success, warning, danger and default --&gt;</span>
 
-    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
 
-<span class="nt">&lt;/div&gt;</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <h2><a name="animation" class="anchor" href="#animation"><span class="octicon octicon-link"></span></a>Animation</h2>
 
-
 
-                        <p>checkboxes:</p>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-animated=</span><span class="s">"false"</span><span class="nt">&gt;</span>
 
-    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
 
-<span class="nt">&lt;/div&gt;</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <p>radioboxes:</p>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-animated=</span><span class="s">"false"</span><span class="nt">&gt;</span>
 
-    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
 
-<span class="nt">&lt;/div&gt;</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <h2><a name="text" class="anchor" href="#text"><span class="octicon octicon-link"></span></a>Text</h2>
 
-
 
-                        <p>checkboxes:</p>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-on-label=</span><span class="s">"SI"</span> <span class="na">data-off-label=</span><span class="s">"NO"</span><span class="nt">&gt;</span>
 
-    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
 
-<span class="nt">&lt;/div&gt;</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <p>radioboxes:</p>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-on-label=</span><span class="s">"SI"</span> <span class="na">data-off-label=</span><span class="s">"NO"</span><span class="nt">&gt;</span>
 
-    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
 
-<span class="nt">&lt;/div&gt;</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <h2><a name="text-label" class="anchor" href="#text-label"><span class="octicon octicon-link"></span></a>Text Label</h2>
 
-
 
-                        <p>checkboxes:</p>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-text-label=</span><span class="s">"My Slider Text"</span><span class="nt">&gt;</span>
 
-    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
 
-<span class="nt">&lt;/div&gt;</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <p>radioboxes:</p>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-text-label=</span><span class="s">"My Slider Text"</span><span class="nt">&gt;</span>
 
-    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
 
-<span class="nt">&lt;/div&gt;</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <h2><a name="html-text" class="anchor" href="#html-text"><span class="octicon octicon-link"></span></a>HTML Text</h2>
 
-
 
-                        <p>checkboxes:</p>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-on-label=</span><span class="s">"&lt;i class='icon-ok icon-white'&gt;&lt;/i&gt;"</span> <span class="na">data-off-label=</span><span class="s">"&lt;i class='icon-remove'&gt;&lt;/i&gt;"</span><span class="nt">&gt;</span>
 
-    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
 
-<span class="nt">&lt;/div&gt;</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <p>radioboxes:</p>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-on-label=</span><span class="s">"&lt;i class='icon-ok icon-white'&gt;&lt;/i&gt;"</span> <span class="na">data-off-label=</span><span class="s">"&lt;i class='icon-remove'&gt;&lt;/i&gt;"</span><span class="nt">&gt;</span>
 
-    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
 
-<span class="nt">&lt;/div&gt;</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <h2><a name="initial-values" class="anchor" href="#initial-values"><span class="octicon octicon-link"></span></a>Initial values</h2>
 
-
 
-                        <p>checkboxes:</p>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span><span class="nt">&gt;</span>
 
-    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked=</span><span class="s">"checked"</span> <span class="na">disabled=</span><span class="s">"disabled"</span><span class="nt">&gt;</span>
 
-<span class="nt">&lt;/div&gt;</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <p>radioboxes:</p>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"make-switch"</span><span class="nt">&gt;</span>
 
-    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">checked=</span><span class="s">"checked"</span> <span class="na">disabled=</span><span class="s">"disabled"</span><span class="nt">&gt;</span>
 
-<span class="nt">&lt;/div&gt;</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <h2><a name="event-handler" class="anchor" href="#event-handler"><span class="octicon octicon-link"></span></a>Event handler</h2>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'switch-change'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
 
-    <span class="kd">var</span> <span class="nx">$el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">el</span><span class="p">)</span>
 
-      <span class="p">,</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
 
-    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">$el</span><span class="p">,</span> <span class="nx">value</span><span class="p">);</span>
 
-<span class="p">});</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <h2><a name="methods" class="anchor" href="#methods"><span class="octicon octicon-link"></span></a>Methods</h2>
 
-
 
-                        <div class="highlight">
 
-                            <pre>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'toggleActivation'</span><span class="p">);</span>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'isActive'</span><span class="p">);</span>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setActive'</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setActive'</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'toggleState'</span><span class="p">);</span>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'.mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'toggleRadioState'</span><span class="p">);</span> <span class="c1">// the radiobuttons need a class not a ID, don't allow uncheck radio switch</span>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'.mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'toggleRadioStateAllowUncheck'</span><span class="p">);</span> <span class="c1">// don't allow uncheck radio switch</span>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'.mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'toggleRadioStateAllowUncheck'</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span> <span class="c1">// don't allow uncheck radio switch</span>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'.mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'toggleRadioStateAllowUncheck'</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span> <span class="c1">// allow uncheck radio switch</span>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setState'</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setOnLabel'</span><span class="p">,</span> <span class="kc">onValue</span><span class="p">);</span> <span class="c1">// sets the text of the "on" label</span>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setOffLabel'</span><span class="p">,</span> <span class="kc">offValue</span><span class="p">);</span> <span class="c1">// sets the text of the "off" label</span>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setOnClass'</span><span class="p">,</span> <span class="kc">onClass</span><span class="p">);</span> <span class="c1">// sets the left color class</span>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setOffClass'</span><span class="p">,</span> <span class="kc">offClass</span><span class="p">);</span> <span class="c1">// sets the right color class</span>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setAnimated'</span><span class="p">,</span> <span class="kc">animated</span><span class="p">);</span> <span class="c1">// sets true or false for animation</span>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setSizeClass'</span><span class="p">,</span> <span class="kc">size</span><span class="p">);</span> <span class="c1">// sets 'switch-mini', 'switch-small' or 'switch-large'</span>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'status'</span><span class="p">);</span>  <span class="c1">// returns true or false</span>
 
-<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'destroy'</span><span class="p">);</span>
 
-                            </pre>
 
-                        </div>
 
-
 
-                        <h2><a name="license" class="anchor" href="#license"><span class="octicon octicon-link"></span></a>License</h2>
 
-
 
-                        <p>Licensed under the Apache License, Version 2.0<a href="http://www.apache.org/licenses/LICENSE-2.0"> http://www.apache.org/licenses/LICENSE-2.0</a></p>
 
-                    </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://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
 
-        <script src="http://bdmdesign.github.io/bootstrap-switch/static/js/main.js"></script>
 
-  </body>
 
-
 
-</html>

+ 22 - 18
static/js/bootstrap-switch.js
View File 

@@ -86,6 +86,10 @@
 
               $label.html('' + textLabel + '');
 
             }
 
 
+            if (textLabel) {
 
+              $label.html('' + textLabel + '');
 
+            }
 
+
 
             $div = $element.find(inputSelector).wrap($('<div>')).parent().data('animated', false);
 
 
             if ($element.data('animated') !== false)
 
@@ -103,13 +107,13 @@
 
             if ($element.find(inputSelector).is(':disabled'))
 
               $(this).addClass('deactivate');
 
 
-              var changeStatus = function ($this) {
 
-                if ($element.parent('label').is('.label-change-switch')) {
 
+            var changeStatus = function ($this) {
 
+              if ($element.parent('label').is('.label-change-switch')) {
 
 
-                } else {
 
-                    $this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click');
 
-                }
 
-              };
 
+              } else {
 
+                $this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click');
 
+              }
 
+            };
 
 
             $element.on('keydown', function (e) {
 
               if (e.keyCode === 32) {
 
@@ -164,7 +168,7 @@
 
 
               if ($this.closest('.has-switch').is('.deactivate')) {
 
                 $this.unbind('click');
 
-              } else if ( $this.closest('.switch-on').parent().is('.radio-no-uncheck') ) {
 
+              } else if ($this.closest('.switch-on').parent().is('.radio-no-uncheck')) {
 
                 $this.unbind('click');
 
               } else {
 
                 $this.on('mousemove touchmove', function (e) {
 
@@ -267,7 +271,7 @@
 
       },
 
       toggleRadioState: function (skipOnChange) {
 
         var $radioinput = $(this).find(':radio');
 
-          $radioinput.not(':checked').prop('checked', !$radioinput.is(':checked')).trigger('change', skipOnChange);
 
+        $radioinput.not(':checked').prop('checked', !$radioinput.is(':checked')).trigger('change', skipOnChange);
 
       },
 
       toggleRadioStateAllowUncheck: function (uncheck, skipOnChange) {
 
         var $radioinput = $(this).find(':radio');
 
@@ -281,15 +285,15 @@
 
       setState: function (value, skipOnChange) {
 
         $(this).find(inputSelector).prop('checked', value).trigger('change', skipOnChange);
 
       },
 
-      setOnLabel: function(value) {
 
+      setOnLabel: function (value) {
 
         var $switchLeft = $(this).find(".switch-left");
 
         $switchLeft.html(value);
 
       },
 
-      setOffLabel: function(value) {
 
+      setOffLabel: function (value) {
 
         var $switchRight = $(this).find(".switch-right");
 
         $switchRight.html(value);
 
       },
 
-      setOnClass: function(value) {
 
+      setOnClass: function (value) {
 
         var $switchLeft = $(this).find(".switch-left");
 
         var color = '';
 
         if (value !== undefined) {
 
@@ -301,7 +305,7 @@
 
           $switchLeft.addClass(color);
 
         }
 
       },
 
-      setOffClass: function(value) {
 
+      setOffClass: function (value) {
 
         var $switchRight = $(this).find(".switch-right");
 
         var color = '';
 
         if (value !== undefined) {
 
@@ -313,7 +317,7 @@
 
           $switchRight.addClass(color);
 
         }
 
       },
 
-      setAnimated: function(value) {
 
+      setAnimated: function (value) {
 
         var $element = $(this).find(inputSelector).parent();
 
         if (value === undefined) value = false;
 
         $element.data('animated', value);
 
@@ -325,7 +329,7 @@
 
           $element.removeClass("switch-animate");
 
         }
 
       },
 
-      setSizeClass: function(value) {
 
+      setSizeClass: function (value) {
 
         var $element = $(this);
 
         var $switchLeft = $element.find(".switch-left");
 
         var $switchRight = $element.find(".switch-right");
 
@@ -376,8 +380,8 @@
 
   };
 
 }(jQuery);
 
 
-(function($) {  // creates scope for $ sign assigned to jQuery
 
-    $(function () { // on dom ready
 
-        $('.make-switch')['bootstrapSwitch'](); // attach bootstrapswitch
 
-    });
 
+(function ($) {
 
+  $(function () {
 
+    $('.make-switch')['bootstrapSwitch']();
 
+  });
 
 })(jQuery);

+ 3 - 5
static/stylesheets/bootstrap-switch.css
View File 

@@ -28,6 +28,7 @@
 
   -ms-user-select: none;
 
   -o-user-select: none;
 
   user-select: none;
 
+  vertical-align: middle;
 
   min-width: 100px;
 
 }
 
 .has-switch.switch-mini {
 
@@ -42,9 +43,6 @@
 
   margin-top: -1px;
 
   margin-bottom: -1px;
 
 }
 
-.has-switch.switch-mini i.switch-mini-font-icons {
 
-  line-height: 9px;
 
-}
 
 .has-switch.switch-small {
 
   min-width: 80px;
 
 }
 
@@ -125,7 +123,7 @@
 
   width: 34%;
 
   border-left: 1px solid #cccccc;
 
   border-right: 1px solid #cccccc;
 
-  color: #000000;
 
+  color: #333333;
 
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 
   background-color: #f5f5f5;
 
   background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
 
@@ -148,7 +146,7 @@
 
 .has-switch label.active,
 
 .has-switch label.disabled,
 
 .has-switch label[disabled] {
 
-  color: #000000;
 
+  color: #333333;
 
   background-color: #e6e6e6;
 
   *background-color: #d9d9d9;
 
 }