Merge pull request #10 from t3chn0r/patch-2

Update examples/index.html

examples/index.html

@@ -32,235 +32,259 @@
         alt="Fork me on GitHub"></a>
 
 <div class="container-fluid">
-    <div class="row-fluid">
-        <div class="span12">
-            <h1>Bootstrap switch
-                <small>- by Mattia Larentis</small>
-            </h1>
-        </div>
+<div class="row-fluid">
+    <div class="span12">
+        <h1>Bootstrap switch
+            <small>- by Mattia Larentis</small>
+        </h1>
     </div>
+</div>
 
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Large</h3>
-            <hr>
-        </div>
+<div class="row-fluid">
+    <div class="span12">
+        <h3>Large</h3>
+        <hr>
     </div>
+</div>
 
 
-    <div class="row-fluid">
+<div class="row-fluid">
 
-        <div class="span4">
-            <div id="mySwitch" class="switch switch-large" data-on="danger"
-                 data-off="warning">
-                <input type="checkbox" checked="checked">
-            </div>
+    <div class="span4">
+        <div id="mySwitch" class="switch switch-large" data-on="danger"
+             data-off="warning">
+            <input type="checkbox" checked="checked">
         </div>
-        <div class="span8">
+    </div>
+    <div class="span8">
 
-            <h4>Html:</h4>
+        <h4>Html:</h4>
                 <pre class="prettyprint linenums">
 &lt;div id="mySwitch" class="switch switch-large" data-on="danger" data-off="warning">
     &lt;input type="checkbox" checked="checked">
 &lt;/div></pre>
-            <h4>Js:</h4>
+        <h4>Js:</h4>
                 <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>
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Normal</h3>
-            <hr>
-        </div>
+</div>
+<div class="row-fluid">
+    <div class="span12">
+        <h3>Normal</h3>
+        <hr>
     </div>
-    <div class="row-fluid">
+</div>
+<div class="row-fluid">
 
-        <div class="span4">
-            <div class="switch" data-animated="false">
-                <input type="checkbox">
-            </div>
+    <div class="span4">
+        <div class="switch" data-animated="false">
+            <input type="checkbox">
         </div>
-        <div class="span8">
+    </div>
+    <div class="span8">
 
-            <h4>Html:</h4>
+        <h4>Html:</h4>
                 <pre class="prettyprint linenums">
 &lt;div class="switch" data-animated="false">
     &lt;input type="checkbox">
 &lt;/div></pre>
-        </div>
     </div>
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Small</h3>
-            <hr>
-        </div>
+</div>
+<div class="row-fluid">
+    <div class="span12">
+        <h3>Small</h3>
+        <hr>
     </div>
-    <div class="row-fluid">
+</div>
+<div class="row-fluid">
 
-        <div class="span4">
-            <div class="switch switch-small">
-                <input type="checkbox" checked="checked" disabled="disabled">
-            </div>
+    <div class="span4">
+        <div class="switch switch-small">
+            <input type="checkbox" checked="checked" disabled="disabled">
         </div>
-        <div class="span8">
+    </div>
+    <div class="span8">
 
-            <h4>Html:</h4>
+        <h4>Html:</h4>
                 <pre class="prettyprint linenums">
 &lt;div class="switch switch-small">
     &lt;input type="checkbox" checked="checked" disabled="disabled">
 &lt;/div></pre>
-        </div>
     </div>
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Mini</h3>
-            <hr>
-        </div>
+</div>
+<div class="row-fluid">
+    <div class="span12">
+        <h3>Mini</h3>
+        <hr>
     </div>
-    <div class="row-fluid">
+</div>
+<div class="row-fluid">
 
-        <div class="span4">
-            <div class="switch switch-mini">
-                <input type="checkbox" checked="checked">
-            </div>
+    <div class="span4">
+        <div class="switch switch-mini">
+            <input type="checkbox" checked="checked">
         </div>
-        <div class="span8">
+    </div>
+    <div class="span8">
 
-            <h4>Html:</h4>
+        <h4>Html:</h4>
                 <pre class="prettyprint linenums">
 &lt;div class="switch switch-mini">
     &lt;input type="checkbox" checked="checked">
 &lt;/div></pre>
-        </div>
     </div>
+</div>
 
 
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Toggle State</h3>
-            <hr>
-        </div>
+<div class="row-fluid">
+    <div class="span12">
+        <h3>Toggle State</h3>
+        <hr>
     </div>
-    <div class="row-fluid">
-
-        <div class="span4">
-            <div id="toggle-state-switch" class="switch">
-                <input type="checkbox" checked="checked">
-            </div>
-            <br>
-            <br>
-
-            <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>
+<div class="row-fluid">
+
+    <div class="span4">
+        <div id="toggle-state-switch" class="switch">
+            <input type="checkbox" checked="checked">
         </div>
-        <div class="span8">
+        <br>
+        <br>
 
-            <h4>Html:</h4>
+        <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>
+    <div class="span8">
+
+        <h4>Html:</h4>
 <pre class="prettyprint linenums">
 &lt;div id="toggle-state-switch" class="switch">
     &lt;input type="checkbox" checked="checked">
 &lt;/div></pre>
-            <h4>Js:</h4>
+        <h4>Js:</h4>
 <pre class="prettyprint linenums">
 $('#toggle-state-switch').switch('toggleState');
 $('#toggle-state-switch').switch('setState', false); // true || false
 </pre>
-        </div>
     </div>
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Destroy</h3>
-            <hr>
-        </div>
+</div>
+<div class="row-fluid">
+    <div class="span12">
+        <h3>Destroy</h3>
+        <hr>
     </div>
-    <div class="row-fluid">
-
-        <div class="span4">
-            <div id="destroy-switch" class="switch">
-                <input type="checkbox" checked="checked">
-            </div>
-            <br>
-            <br>
-            <button id="btn-destroy-switch" class="btn btn-danger">
-                Destroy me!
-            </button>
+</div>
+<div class="row-fluid">
+
+    <div class="span4">
+        <div id="destroy-switch" class="switch">
+            <input type="checkbox" checked="checked">
         </div>
-        <div class="span8">
+        <br>
+        <br>
+        <button id="btn-destroy-switch" class="btn btn-danger">
+            Destroy me!
+        </button>
+    </div>
+    <div class="span8">
 
-            <h4>Html:</h4>
+        <h4>Html:</h4>
 <pre class="prettyprint linenums">
 &lt;div id="destroy-switch" class="switch">
     &lt;input type="checkbox" checked="checked">
 &lt;/div></pre>
-            <h4>Js:</h4>
+        <h4>Js:</h4>
 <pre class="prettyprint linenums">
 $('#destroy-switch').switch('destroy');
 </pre>
-        </div>
     </div>
-    <div class="row-fluid">
-        <div class="span12">
-            <h3>Disabled</h3>
-            <hr>
-        </div>
+</div>
+<div class="row-fluid">
+    <div class="span12">
+        <h3>Disabled</h3>
+        <hr>
     </div>
-    <div class="row-fluid">
-
-        <div class="span4">
-            <div id="disable-switch" class="switch">
-                <input type="checkbox" checked="checked">
-            </div>
-            <br>
-            <br>
-            <button id="btn-disable-switch" class="btn">
-                Disable!
-            </button>
+</div>
+<div class="row-fluid">
+
+    <div class="span4">
+        <div id="disable-switch" class="switch">
+            <input type="checkbox" checked="checked">
         </div>
-        <div class="span8">
+        <br>
+        <br>
+        <button id="btn-disable-switch" class="btn">
+            Disable!
+        </button>
+    </div>
+    <div class="span8">
 
-            <h4>Html:</h4>
+        <h4>Html:</h4>
 <pre class="prettyprint linenums">
 &lt;div id="disable-switch" class="switch">
     &lt;input type="checkbox" checked="checked">
 &lt;/div></pre>
-            <h4>Js:</h4>
+        <h4>Js:</h4>
 <pre class="prettyprint linenums">
 $('#disable-switch').switch('toggleActivation');
 </pre>
-        </div>
     </div>
+</div>
 <div class="row-fluid">
-        <div class="span12">
-            <h3>Label</h3>
-            <hr>
-        </div>
+    <div class="span12">
+        <h3>Label</h3>
+        <hr>
     </div>
-    <div class="row-fluid">
+</div>
+<div class="row-fluid">
 
-        <div class="span4">
-            <div class="switch" data-on-label="SI" data-off-label="NO">
-                <input type="checkbox" checked="checked">
-            </div>
+    <div class="span4">
+        <div class="switch" data-on-label="SI" data-off-label="NO">
+            <input type="checkbox" checked="checked">
         </div>
-        <div class="span8">
+    </div>
+    <div class="span8">
 
-            <h4>Html:</h4>
+        <h4>Html:</h4>
 <pre class="prettyprint linenums">
 &lt;div class="switch" data-on-label="SI" data-off-label="NO">
     &lt;input type="checkbox" checked="checked">
 &lt;/div></pre>
+    </div>
+</div>
+<div class="row-fluid">
+    <div class="span12">
+        <h3>HTML Label</h3>
+        <hr>
+    </div>
+</div>
+<div class="row-fluid">
+
+    <div class="span4">
+        <div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
+            <input type="checkbox" checked="checked">
         </div>
     </div>
-    <p class="pull-right">
-        <a href="https://twitter.com/SpiritualGuru">follow me</a> -
-        <a href="http://www.larentis.eu">my site</a>
-    </p>
+    <div class="span8">
+
+        <h4>Html:</h4>
+<pre class="prettyprint linenums">
+&lt;div class="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="checked">
+&lt;/div></pre>
+    </div>
+</div>
+<p class="pull-right">
+    <a href="https://twitter.com/SpiritualGuru">follow me</a> -
+    <a href="http://www.larentis.eu">my site</a>
+</p>
 </div>
 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
@@ -270,7 +294,7 @@ $('#disable-switch').switch('toggleActivation');
     window.prettyPrint && prettyPrint();
     $('#mySwitch').on('switch-change', function (e, data) {
         var $el = $(data.el)
-          , value = data.value;
+                , value = data.value;
         console.log(e, $el, value);
     });