Mattia Larentis há 11 anos atrás
pai
commit
58b75b4dde

+ 83 - 2
README.md

@@ -1,6 +1,9 @@
 Bootstrap-switch
 Bootstrap-switch
 ========================
 ========================
 
 
+You can now also use radio buttons as switches.
+
+
 Demo
 Demo
 ----
 ----
 http://www.larentis.eu/switch/
 http://www.larentis.eu/switch/
@@ -10,12 +13,12 @@ Usage
 Just include Twitter Bootstrap, jQuery, Bootstrap Switch CSS and Javascript
 Just include Twitter Bootstrap, jQuery, Bootstrap Switch CSS and Javascript
 ``` html
 ``` html
 <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />
 <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />
-<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
+<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
 <link rel="stylesheet" href="bootstrap-switch.css">
 <link rel="stylesheet" href="bootstrap-switch.css">
 
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 <script src="bootstrap-switch.js"></script>  // master
 <script src="bootstrap-switch.js"></script>  // master
-<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/1.3/bootstrapSwitch.min.js">  // from cdnjs.com
+<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/1.4/bootstrap-switch.min.js">  // from cdnjs.com
 ```
 ```
 
 
 Less
 Less
@@ -31,59 +34,136 @@ I'm not going to support ancient browsers! (it works on IE8+)
 
 
 Basic Example
 Basic Example
 -------------
 -------------
+checkboxes:
+
 ``` html
 ``` html
 <div class="switch">
 <div class="switch">
     <input type="checkbox">
     <input type="checkbox">
 </div>
 </div>
 ```
 ```
 
 
+radioboxes:
+
+``` html
+<div class="switch">
+    <input type="radio">
+</div>
+```
+
+
 Large, small or mini
 Large, small or mini
 --------------------
 --------------------
+checkboxes:
+
 ``` html
 ``` html
 <div class="switch switch-large">  <!-- switch-large, switch-small or switch-mini -->
 <div class="switch switch-large">  <!-- switch-large, switch-small or switch-mini -->
     <input type="checkbox">
     <input type="checkbox">
 </div>
 </div>
 ```
 ```
 
 
+radioboxes:
+
+``` html
+<div class="switch switch-large">  <!-- switch-large, switch-small or switch-mini -->
+    <input type="radio">
+</div>
+```
+
+
 Colors
 Colors
 ------
 ------
+checkboxes:
+
 ``` html
 ``` html
 <div class="switch" data-on="danger" data-off="warning">  <!-- primary, info, success, warning, danger and default -->
 <div class="switch" data-on="danger" data-off="warning">  <!-- primary, info, success, warning, danger and default -->
     <input type="checkbox">
     <input type="checkbox">
 </div>
 </div>
 ```
 ```
 
 
+radioboxes:
+
+``` html
+<div class="switch" data-on="danger" data-off="warning">  <!-- primary, info, success, warning, danger and default -->
+    <input type="radio">
+</div>
+```
+
+
 Animation
 Animation
 ---------
 ---------
+checkboxes:
+
 ``` html
 ``` html
 <div class="switch" data-animated="false">
 <div class="switch" data-animated="false">
     <input type="checkbox">
     <input type="checkbox">
 </div>
 </div>
 ```
 ```
 
 
+radioboxes:
+
+``` html
+<div class="switch" data-animated="false">
+    <input type="radio">
+</div>
+```
+
+
 Text
 Text
 -----
 -----
+checkboxes:
+
 ``` html
 ``` html
 <div class="switch" data-on-label="SI" data-off-label="NO">
 <div class="switch" data-on-label="SI" data-off-label="NO">
     <input type="checkbox">
     <input type="checkbox">
 </div>
 </div>
 ```
 ```
 
 
+radioboxes:
+
+``` html
+<div class="switch" data-on-label="SI" data-off-label="NO">
+    <input type="radio">
+</div>
+```
+
+
 HTML Text
 HTML Text
 ----------
 ----------
+checkboxes:
+
 ``` html
 ``` html
 <div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
 <div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
     <input type="checkbox">
     <input type="checkbox">
 </div>
 </div>
 ```
 ```
 
 
+radioboxes:
+
+``` html
+<div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
+    <input type="radio">
+</div>
+```
+
+
 Initial values
 Initial values
 --------------
 --------------
+checkboxes:
+
 ``` html
 ``` html
 <div class="switch">
 <div class="switch">
     <input type="checkbox" checked="checked" disabled="disabled">
     <input type="checkbox" checked="checked" disabled="disabled">
 </div>
 </div>
 ```
 ```
+radioboxes:
+
+
+``` html
+<div class="switch">
+    <input type="radio" checked="checked" disabled="disabled">
+</div>
+```
+
 
 
 Event handler
 Event handler
 -------------
 -------------
@@ -103,6 +183,7 @@ $('#mySwitch').bootstrapSwitch('isActive');
 $('#mySwitch').bootstrapSwitch('setActive', false);
 $('#mySwitch').bootstrapSwitch('setActive', false);
 $('#mySwitch').bootstrapSwitch('setActive', true);
 $('#mySwitch').bootstrapSwitch('setActive', true);
 $('#mySwitch').bootstrapSwitch('toggleState');
 $('#mySwitch').bootstrapSwitch('toggleState');
+$('.mySwitch').bootstrapSwitch('toggleRadioState'); // the radiobuttons need a class not a ID
 $('#mySwitch').bootstrapSwitch('setState', true);
 $('#mySwitch').bootstrapSwitch('setState', true);
 $('#mySwitch').bootstrapSwitch('status');  // returns true or false
 $('#mySwitch').bootstrapSwitch('status');  // returns true or false
 $('#mySwitch').bootstrapSwitch('destroy');
 $('#mySwitch').bootstrapSwitch('destroy');

+ 147 - 2
examples/index.html

@@ -2,11 +2,12 @@
 <html lang="en">
 <html lang="en">
 <head>
 <head>
     <meta charset="utf-8">
     <meta charset="utf-8">
-    <title>Bootstrap switch - by Mattia Larentis</title>
+    <title>Bootstrap switch - by Mattia Larentis, enhanced by BdMdesigN aka Peter Stein</title>
     <meta name="author" content="Mattia Larentis">
     <meta name="author" content="Mattia Larentis">
+    <meta name="subauthor" content="Peter Stein">
     <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />
     <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />
 
 
-    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
+    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
     <link rel="stylesheet" href="../static/stylesheets/bootstrap-switch.css">
     <link rel="stylesheet" href="../static/stylesheets/bootstrap-switch.css">
     <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css">
     <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css">
     <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/docs.css">
     <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/docs.css">
@@ -312,6 +313,139 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre
     </div>
     </div>
 </div>
 </div>
 
 
+
+<div class="row-fluid">
+    <div class="span12">
+        <h3>Radio <small>- radioboxes 1</small></h3>
+
+        <div class="bs-docs-example">
+               <div class="control-group exemple1">
+                  <br /><br />
+                    <div id="radio1" class="controls">
+                        <label class="control-label" for="yes">Yes</label>
+                        <div id="yes" class="switch radio1" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
+                            <input type="radio" name="radio1" class="check demo-1" value="1" checked />
+                        </div>
+                        <label class="control-label" for="no">No</label>
+                        <div id="no" class="switch radio1" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
+                            <input type="radio" name="radio1" class="check demo-1" value="0" />
+                        </div>
+                    </div>
+                </div>
+
+            <div class="clearfix"></div>
+
+        </div>
+        <pre class="prettyprint linenums">
+    &lt;div class="control-group exemple1">
+      &lt;br />&lt;br />
+        &lt;div id="radio1" class="controls">
+            &lt;label class="control-label" for="yes">Yes&lt;/label>
+            &lt;div id="yes" class="switch radio1" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
+                &lt;input type="radio" name="radio1" class="check demo-1" value="1" checked />
+            &lt;/div>
+            &lt;label class="control-label" for="no">No&lt;/label>
+            &lt;div id="no" class="switch radio1" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
+                &lt;input type="radio" name="radio1" class="check demo-1" value="0" />
+            &lt;/div>
+        &lt;/div>
+    &lt;/div>
+&lt;script>
+$(document).ready(function() {
+    $('.radio1').on('switch-change', function () {
+        $('.radio1').bootstrapSwitch('toggleRadioState');
+    });
+});
+&lt;/script></pre>
+    </div>
+</div>
+
+
+<div class="row-fluid">
+    <div class="span12">
+        <h3>Radio <small>- radioboxes 2</small></h3>
+
+        <div class="bs-docs-example">
+            <div id="exemple2" class="control-group exemple2">
+              <br /><br />
+                <div class="control-group" style="margin-bottom: 2%;">
+                    <div style="width: 10%;float: left;">
+                      <label class="control-label" for="option1">Option 1</label>
+                    </div>
+                    <div class="controls">
+                        <div id="option1" class="switch radio2">
+                            <input id="radio1" type="radio" name="radio2" value="option1" checked />
+                        </div>
+                    </div>
+                </div>
+                <div class="control-group" style="margin-bottom: 2%;">
+                    <div style="width: 10%;float: left;">
+                      <label class="control-label" for="option2">Option 2</label>
+                    </div>
+                    <div class="controls">
+                        <div id="option2" class="switch radio2">
+                            <input id="radio2" type="radio" name="radio2" value="option2" />
+                        </div>
+                    </div>
+                </div>
+                <div class="control-group" style="margin-bottom: 2%;">
+                    <div style="width: 10%;float: left;">
+                      <label class="control-label" for="option3">Option 3</label>
+                    </div>
+                    <div class="controls">
+                        <div id="option3" class="switch radio2">
+                            <input id="radio3" type="radio" name="radio2" value="option3" />
+                        </div>
+                    </div>
+                </div>
+            <div class="clearfix"></div>
+
+        </div>
+        <pre class="prettyprint linenums">
+    &lt;div id="exemple2" class="control-group exemple2">
+        &lt;br />&lt;br />
+        &lt;div class="control-group" style="margin-bottom: 2%;">
+          &lt;div style="width: 10%;float: left;">
+              &lt;label class="control-label" for="option1">Option 1</label>
+          &lt;/div>
+            &lt;div class="controls radio2">
+              &lt;div id="option1" class="switch option1">
+                &lt;input id="radio1" type="radio" name="radio2" value="option1" checked />
+              &lt;/div>
+            &lt;/div>
+        &lt;/div>
+        &lt;div class="control-group" style="margin-bottom: 2%;">
+            &lt;div style="width: 10%;float: left;">
+              &lt;label class="control-label" for="option2">Option 2&lt;/label>
+            &lt;/div>
+            &lt;div class="controls radio2">
+              &lt;div id="option2" class="switch option2">
+                &lt;input id="radio2" type="radio" name="radio2" value="option2" />
+              &lt;/div>
+            &lt;/div>
+        &lt;/div>
+        &lt;div class="control-group" style="margin-bottom: 2%;">
+            &lt;div style="width: 10%;float: left;">
+              &lt;label class="control-label" for="option3">Option 3&lt;/label>
+            &lt;/div>
+            &lt;div class="controls radio2">
+              &lt;div id="option3" class="switch option3">
+                &lt;input id="radio3" type="radio" name="radio2" value="option3" />
+              &lt;/div>
+            &lt;/div>
+        &lt;/div>
+    &lt;/div>
+&lt;script>
+$(document).ready(function() {
+    $('.radio2').on('switch-change', function () {
+        $('.radio2').bootstrapSwitch('toggleRadioGroupState');
+    });
+});
+&lt;/script></pre>
+    </div>
+</div>
+
+
 <div class="row-fluid">
 <div class="row-fluid">
     <div class="span12">
     <div class="span12">
         <h3>Form <small>- try to use tab, space and reset button</small></h3>
         <h3>Form <small>- try to use tab, space and reset button</small></h3>
@@ -427,6 +561,7 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre
 <script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
 <script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
 <script src="../static/js/bootstrap-switch.js"></script>
 <script src="../static/js/bootstrap-switch.js"></script>
 <script>
 <script>
+$(document).ready(function() {
     window.prettyPrint && prettyPrint();
     window.prettyPrint && prettyPrint();
     $('#mySwitch').on('switch-change', function (e, data) {
     $('#mySwitch').on('switch-change', function (e, data) {
         var $el = $(data.el)
         var $el = $(data.el)
@@ -475,6 +610,16 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre
     $('#btn-activate-switch').on('click', function () {
     $('#btn-activate-switch').on('click', function () {
         $('#disable-switch').bootstrapSwitch('setActive', true);
         $('#disable-switch').bootstrapSwitch('setActive', true);
     });
     });
+
+    $('.radio1').on('switch-change', function () {
+        $('.radio1').bootstrapSwitch('toggleRadioState');
+    });
+
+    $('.radio2').on('switch-change', function () {
+        $('.radio2').bootstrapSwitch('toggleRadioState');
+    });
+
+});
 </script>
 </script>
 </body>
 </body>
 </html>
 </html>

+ 31 - 21
static/js/bootstrap-switch.js

@@ -1,11 +1,17 @@
 /* ============================================================
 /* ============================================================
- * bootstrapSwitch v1.4 by Larentis Mattia @spiritualGuru
+ * bootstrapSwitch v1.5 by Larentis Mattia @SpiritualGuru
+ * http://www.larentis.eu/
+ * 
+ * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
+ * http://www.bdmdesign.org/
+ *
+ * Project site:
  * http://www.larentis.eu/switch/
  * http://www.larentis.eu/switch/
  * ============================================================
  * ============================================================
  * Licensed under the Apache License, Version 2.0
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  * ============================================================ */
  * ============================================================ */
-
+ 
 !function ($) {
 !function ($) {
   "use strict";
   "use strict";
 
 
@@ -71,7 +77,7 @@
               $label.html('<i class="icon icon-' + icon + '"></i>');
               $label.html('<i class="icon icon-' + icon + '"></i>');
             }
             }
 
 
-            $div = $element.find(':checkbox').wrap($('<div>')).parent().data('animated', false);
+            $div = $element.find('input').wrap($('<div>')).parent().data('animated', false);
 
 
             if ($element.data('animated') !== false)
             if ($element.data('animated') !== false)
               $div.addClass('switch-animate').data('animated', true);
               $div.addClass('switch-animate').data('animated', true);
@@ -166,7 +172,7 @@
                 $this.on('click touchend', function (e) {
                 $this.on('click touchend', function (e) {
                   var $this = $(this)
                   var $this = $(this)
                     , $target = $(e.target)
                     , $target = $(e.target)
-                    , $myCheckBox = $target.siblings('input');
+                    , $myRadioCheckBox = $target.siblings('input');
 
 
                   e.stopImmediatePropagation();
                   e.stopImmediatePropagation();
                   e.preventDefault();
                   e.preventDefault();
@@ -174,16 +180,17 @@
                   $this.unbind('mouseleave');
                   $this.unbind('mouseleave');
 
 
                   if (moving)
                   if (moving)
-                    $myCheckBox.prop('checked', !(parseInt($this.parent().css('left')) < -25));
-                  else $myCheckBox.prop("checked", !$myCheckBox.is(":checked"));
+                    $myRadioCheckBox.prop('checked', !(parseInt($this.parent().css('left')) < -25));
+                  else
+                    $myRadioCheckBox.prop("checked", !$myRadioCheckBox.is(":checked"));
 
 
                   moving = false;
                   moving = false;
-                  $myCheckBox.trigger('change');
+                  $myRadioCheckBox.trigger('change');
                 });
                 });
 
 
                 $this.on('mouseleave', function (e) {
                 $this.on('mouseleave', function (e) {
                   var $this = $(this)
                   var $this = $(this)
-                    , $myCheckBox = $this.siblings('input');
+                    , $myInputBox = $this.siblings('input');
 
 
                   e.preventDefault();
                   e.preventDefault();
                   e.stopImmediatePropagation();
                   e.stopImmediatePropagation();
@@ -191,7 +198,7 @@
                   $this.unbind('mouseleave');
                   $this.unbind('mouseleave');
                   $this.trigger('mouseup');
                   $this.trigger('mouseup');
 
 
-                  $myCheckBox.prop('checked', !(parseInt($this.parent().css('left')) < -25)).trigger('change');
+                  $myInputBox.prop('checked', !(parseInt($this.parent().css('left')) < -25)).trigger('change');
                 });
                 });
 
 
                 $this.on('mouseup', function (e) {
                 $this.on('mouseup', function (e) {
@@ -239,34 +246,37 @@
         }
         }
       },
       },
       toggleState: function (skipOnChange) {
       toggleState: function (skipOnChange) {
-        var $input = $(this).find('input:checkbox');
+        var $input = $(this).find('input[type=checkbox]');
         $input.prop('checked', !$input.is(':checked')).trigger('change', skipOnChange);
         $input.prop('checked', !$input.is(':checked')).trigger('change', skipOnChange);
       },
       },
+      toggleRadioState: function (skipOnChange) {
+        $(this).find('input[type=radio]').not(':checked').trigger('change', skipOnChange);
+      },
       setState: function (value, skipOnChange) {
       setState: function (value, skipOnChange) {
-        $(this).find('input:checkbox').prop('checked', value).trigger('change', skipOnChange);
+        $(this).find('input').prop('checked', value).trigger('change', skipOnChange);
       },
       },
       status: function () {
       status: function () {
-        return $(this).find('input:checkbox').is(':checked');
+        return $(this).find('input').is(':checked');
       },
       },
       destroy: function () {
       destroy: function () {
         var $element = $(this)
         var $element = $(this)
           , $div = $element.find('div')
           , $div = $element.find('div')
           , $form = $element.closest('form')
           , $form = $element.closest('form')
-          , $checkbox;
+          , $inputbox;
 
 
-        $div.find(':not(input:checkbox)').remove();
+        $div.find(':not(input)').remove();
 
 
-        $checkbox = $div.children();
-        $checkbox.unwrap().unwrap();
+        $inputbox = $div.children();
+        $inputbox.unwrap().unwrap();
 
 
-        $checkbox.unbind('change');
+        $inputbox.unbind('change');
 
 
         if ($form) {
         if ($form) {
           $form.unbind('reset');
           $form.unbind('reset');
           $form.removeData('bootstrapSwitch');
           $form.removeData('bootstrapSwitch');
         }
         }
 
 
-        return $checkbox;
+        return $inputbox;
       }
       }
     };
     };
 
 
@@ -279,6 +289,6 @@
   };
   };
 }(jQuery);
 }(jQuery);
 
 
-$(function () {
-  $('.switch')['bootstrapSwitch']();
-});
+(function () {
+  jQuery('.switch')['bootstrapSwitch']();
+})();

+ 8 - 1
static/less/bootstrap-switch.less

@@ -1,5 +1,11 @@
 /* ============================================================
 /* ============================================================
- * bootstrapSwitch v1.4 by Larentis Mattia @spiritualGuru
+ * bootstrapSwitch v1.5 by Larentis Mattia @SpiritualGuru
+ * http://www.larentis.eu/
+ *
+ * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
+ * http://www.bdmdesign.org/
+ *
+ * Project site:
  * http://www.larentis.eu/switch/
  * http://www.larentis.eu/switch/
  * ============================================================
  * ============================================================
  * Licensed under the Apache License, Version 2.0
  * Licensed under the Apache License, Version 2.0
@@ -58,6 +64,7 @@
       left: 0%;
       left: 0%;
     }
     }
   }
   }
+  input[type=radio],
   input[type=checkbox] {
   input[type=checkbox] {
     //debug
     //debug
     display: none;
     display: none;

+ 8 - 1
static/stylesheets/bootstrap-switch.css

@@ -1,5 +1,11 @@
 /* ============================================================
 /* ============================================================
- * bootstrapSwitch v1.4 by Larentis Mattia @spiritualGuru
+ * bootstrapSwitch v1.5 by Larentis Mattia @SpiritualGuru
+ * http://www.larentis.eu/
+ *
+ * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
+ * http://www.bdmdesign.org/
+ *
+ * Project site:
  * http://www.larentis.eu/switch/
  * http://www.larentis.eu/switch/
  * ============================================================
  * ============================================================
  * Licensed under the Apache License, Version 2.0
  * Licensed under the Apache License, Version 2.0
@@ -60,6 +66,7 @@
 .has-switch > div.switch-on {
 .has-switch > div.switch-on {
   left: 0%;
   left: 0%;
 }
 }
+.has-switch input[type=radio],
 .has-switch input[type=checkbox] {
 .has-switch input[type=checkbox] {
   display: none;
   display: none;
 }
 }