Merge pull request #105 from BdMdesigN/v.1.8

V.1.8

examples/index.html

@@ -12,7 +12,9 @@
     <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://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
+    <link rel="stylesheet" href="../static/stylesheets/flat-ui-fonts.css">
+    
     <style>
         .span4, h1 {
             text-align: center;
@@ -292,19 +294,90 @@ $('#label-switch').bootstrapSwitch('setOffLabel', 'O');
         </div>
     </div>
 
+    <!-- HTML TEXT LABEL ICON -->
+    <div class="row-fluid">
+        <div class="span12">
+            <h3>HTML text Label Icon</h3>
+
+            <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>
+
     <!-- HTML TEXT MINI SWITCH -->
     <div class="row-fluid">
         <div class="span12">
             <h3>HTML text (mini-switch)</h3>
 
             <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>
@@ -742,7 +815,8 @@ $(document).ready(function() {
         $('.radio1').bootstrapSwitch('toggleRadioState');
     });
     $('.radio2').on('switch-change', function () {
-        $('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);
+        $('.radio2')
+                .bootstrapSwitch('toggleRadioStateAllowUncheck', true);
     });
 
 });
@@ -750,4 +824,3 @@ $(document).ready(function() {
 
 </body>
 </html>
-).on(

static/js/bootstrap-switch.js

@@ -50,8 +50,8 @@
             if ($element.data('off-label') !== undefined)
               offLabel = $element.data('off-label');
 
-            if ($element.data('icon') !== undefined)
-              icon = $element.data('icon');
+            if ($element.data('label-icon') !== undefined)
+              icon = $element.data('label-icon');
 
             $switchLeft = $('<span>')
               .addClass("switch-left")
@@ -75,7 +75,7 @@
               .attr('for', $element.find(inputSelector).attr('id'));
 
             if (icon) {
-              $label.html('<i class="icon icon-' + icon + '"></i>');
+              $label.html('<i class="icon ' + icon + '"></i>');
             }
 
             $div = $element.find(inputSelector).wrap($('<div>')).parent().data('animated', false);
@@ -302,7 +302,7 @@
         }
       },
       setAnimated: function(value) {
-        var $element = $(this).find('inputSelector').parent();
+        var $element = $(this).find(inputSelector).parent();
         if (value === undefined) value = false;
         $element.data('animated', value);
         $element.attr('data-animated', value);

static/stylesheets/flat-ui-fonts.css

@@ -0,0 +1,153 @@
+@import url("https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,400italic,300");
+@font-face {
+  font-family: 'Flat-UI-Icons';
+  src: url('../fonts/Flat-UI-Icons.eot');
+  src: url('../fonts/Flat-UI-Icons.eot?#iefix') format('embedded-opentype'), url('../fonts/Flat-UI-Icons.woff') format('woff'), url('../fonts/Flat-UI-Icons.ttf') format('truetype'), url('../fonts/Flat-UI-Icons.svg#Flat-UI-Icons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* Use the following CSS code if you want to use data attributes for inserting your icons */
+[data-icon]:before {
+  font-family: 'Flat-UI-Icons';
+  content: attr(data-icon);
+  speak: none;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  -webkit-font-smoothing: antialiased;
+}
+/* Use the following CSS code if you want to have a class per icon */
+/*
+Instead of a list of all class selectors,
+you can use the generic selector below, but it's slower:
+[class*="fui-"] {
+*/
+.fui-arrow-right,
+.fui-arrow-left,
+.fui-cmd,
+.fui-check-inverted,
+.fui-heart,
+.fui-location,
+.fui-plus,
+.fui-check,
+.fui-cross,
+.fui-list,
+.fui-new,
+.fui-video,
+.fui-photo,
+.fui-volume,
+.fui-time,
+.fui-eye,
+.fui-chat,
+.fui-search,
+.fui-user,
+.fui-mail,
+.fui-lock,
+.fui-gear,
+.fui-radio-unchecked,
+.fui-radio-checked,
+.fui-checkbox-unchecked,
+.fui-checkbox-checked,
+.fui-calendar-solid,
+.fui-pause,
+.fui-play,
+.fui-check-inverted-2 {
+  display: inline-block;
+  font-family: 'Flat-UI-Icons';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  -webkit-font-smoothing: antialiased;
+}
+.fui-arrow-right:before {
+  content: "\e02c";
+}
+.fui-arrow-left:before {
+  content: "\e02d";
+}
+.fui-cmd:before {
+  content: "\e02f";
+}
+.fui-check-inverted:before {
+  content: "\e006";
+}
+.fui-heart:before {
+  content: "\e007";
+}
+.fui-location:before {
+  content: "\e008";
+}
+.fui-plus:before {
+  content: "\e009";
+}
+.fui-check:before {
+  content: "\e00a";
+}
+.fui-cross:before {
+  content: "\e00b";
+}
+.fui-list:before {
+  content: "\e00c";
+}
+.fui-new:before {
+  content: "\e00d";
+}
+.fui-video:before {
+  content: "\e00e";
+}
+.fui-photo:before {
+  content: "\e00f";
+}
+.fui-volume:before {
+  content: "\e010";
+}
+.fui-time:before {
+  content: "\e011";
+}
+.fui-eye:before {
+  content: "\e012";
+}
+.fui-chat:before {
+  content: "\e013";
+}
+.fui-search:before {
+  content: "\e01c";
+}
+.fui-user:before {
+  content: "\e01d";
+}
+.fui-mail:before {
+  content: "\e01e";
+}
+.fui-lock:before {
+  content: "\e01f";
+}
+.fui-gear:before {
+  content: "\e024";
+}
+.fui-radio-unchecked:before {
+  content: "\e02b";
+}
+.fui-radio-checked:before {
+  content: "\e032";
+}
+.fui-checkbox-unchecked:before {
+  content: "\e033";
+}
+.fui-checkbox-checked:before {
+  content: "\e034";
+}
+.fui-calendar-solid:before {
+  content: "\e022";
+}
+.fui-pause:before {
+  content: "\e03b";
+}
+.fui-play:before {
+  content: "\e03c";
+}
+.fui-check-inverted-2:before {
+  content: "\e000";
+}