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

merge

Mattia Larentis 11 years ago
parent
c8ceaf074e c6d79f1b0a
commit
58b75b4dde
5 changed files with 277 additions and 27 deletions
Split View Show Diff Stats
  1. 83 2
      README.md
  2. 147 2
      examples/index.html
  3. 31 21
      static/js/bootstrap-switch.js
  4. 8 1
      static/less/bootstrap-switch.less
  5. 8 1
      static/stylesheets/bootstrap-switch.css

+ 83 - 2
README.md
View File 

@@ -1,6 +1,9 @@
 
 Bootstrap-switch
 
 ========================
 
 
+You can now also use radio buttons as switches.
 
+
 
+
 
 Demo
 
 ----
 
 http://www.larentis.eu/switch/
 
@@ -10,12 +13,12 @@ Usage
 
 Just include Twitter Bootstrap, jQuery, Bootstrap Switch CSS and Javascript
 
 ``` html
 
 <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">
 
 
 <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="//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
 
@@ -31,59 +34,136 @@ I'm not going to support ancient browsers! (it works on IE8+)
 
 
 Basic Example
 
 -------------
 
+checkboxes:
 
+
 
 ``` html
 
 <div class="switch">
 
     <input type="checkbox">
 
 </div>
 
 ```
 
 
+radioboxes:
 
+
 
+``` html
 
+<div class="switch">
 
+    <input type="radio">
 
+</div>
 
+```
 
+
 
+
 
 Large, small or mini
 
 --------------------
 
+checkboxes:
 
+
 
 ``` html
 
 <div class="switch switch-large">  <!-- switch-large, switch-small or switch-mini -->
 
     <input type="checkbox">
 
 </div>
 
 ```
 
 
+radioboxes:
 
+
 
+``` html
 
+<div class="switch switch-large">  <!-- switch-large, switch-small or switch-mini -->
 
+    <input type="radio">
 
+</div>
 
+```
 
+
 
+
 
 Colors
 
 ------
 
+checkboxes:
 
+
 
 ``` html
 
 <div class="switch" data-on="danger" data-off="warning">  <!-- primary, info, success, warning, danger and default -->
 
     <input type="checkbox">
 
 </div>
 
 ```
 
 
+radioboxes:
 
+
 
+``` html
 
+<div class="switch" data-on="danger" data-off="warning">  <!-- primary, info, success, warning, danger and default -->
 
+    <input type="radio">
 
+</div>
 
+```
 
+
 
+
 
 Animation
 
 ---------
 
+checkboxes:
 
+
 
 ``` html
 
 <div class="switch" data-animated="false">
 
     <input type="checkbox">
 
 </div>
 
 ```
 
 
+radioboxes:
 
+
 
+``` html
 
+<div class="switch" data-animated="false">
 
+    <input type="radio">
 
+</div>
 
+```
 
+
 
+
 
 Text
 
 -----
 
+checkboxes:
 
+
 
 ``` html
 
 <div class="switch" data-on-label="SI" data-off-label="NO">
 
     <input type="checkbox">
 
 </div>
 
 ```
 
 
+radioboxes:
 
+
 
+``` html
 
+<div class="switch" data-on-label="SI" data-off-label="NO">
 
+    <input type="radio">
 
+</div>
 
+```
 
+
 
+
 
 HTML Text
 
 ----------
 
+checkboxes:
 
+
 
 ``` html
 
 <div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
 
     <input type="checkbox">
 
 </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
 
 --------------
 
+checkboxes:
 
+
 
 ``` html
 
 <div class="switch">
 
     <input type="checkbox" checked="checked" disabled="disabled">
 
 </div>
 
 ```
 
+radioboxes:
 
+
 
+
 
+``` html
 
+<div class="switch">
 
+    <input type="radio" checked="checked" disabled="disabled">
 
+</div>
 
+```
 
+
 
 
 Event handler
 
 -------------
 
@@ -103,6 +183,7 @@ $('#mySwitch').bootstrapSwitch('isActive');
 
 $('#mySwitch').bootstrapSwitch('setActive', false);
 
 $('#mySwitch').bootstrapSwitch('setActive', true);
 
 $('#mySwitch').bootstrapSwitch('toggleState');
 
+$('.mySwitch').bootstrapSwitch('toggleRadioState'); // the radiobuttons need a class not a ID
 
 $('#mySwitch').bootstrapSwitch('setState', true);
 
 $('#mySwitch').bootstrapSwitch('status');  // returns true or false
 
 $('#mySwitch').bootstrapSwitch('destroy');

+ 147 - 2
examples/index.html
View File 

@@ -2,11 +2,12 @@
 
 <html lang="en">
 
 <head>
 
     <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="subauthor" content="Peter Stein">
 
     <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="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">
 
@@ -312,6 +313,139 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre
 
     </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="span12">
 
         <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="../static/js/bootstrap-switch.js"></script>
 
 <script>
 
+$(document).ready(function() {
 
     window.prettyPrint && prettyPrint();
 
     $('#mySwitch').on('switch-change', function (e, data) {
 
         var $el = $(data.el)
 
@@ -475,6 +610,16 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre
 
     $('#btn-activate-switch').on('click', function () {
 
         $('#disable-switch').bootstrapSwitch('setActive', true);
 
     });
 
+
 
+    $('.radio1').on('switch-change', function () {
 
+        $('.radio1').bootstrapSwitch('toggleRadioState');
 
+    });
 
+
 
+    $('.radio2').on('switch-change', function () {
 
+        $('.radio2').bootstrapSwitch('toggleRadioState');
 
+    });
 
+
 
+});
 
 </script>
 
 </body>
 
 </html>

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

@@ -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/
 
  * ============================================================
 
  * Licensed under the Apache License, Version 2.0
 
  * http://www.apache.org/licenses/LICENSE-2.0
 
  * ============================================================ */
 
-
 
+ 
 !function ($) {
 
   "use strict";
 
 
@@ -71,7 +77,7 @@
 
               $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)
 
               $div.addClass('switch-animate').data('animated', true);
 
@@ -166,7 +172,7 @@
 
                 $this.on('click touchend', function (e) {
 
                   var $this = $(this)
 
                     , $target = $(e.target)
 
-                    , $myCheckBox = $target.siblings('input');
 
+                    , $myRadioCheckBox = $target.siblings('input');
 
 
                   e.stopImmediatePropagation();
 
                   e.preventDefault();
 
@@ -174,16 +180,17 @@
 
                   $this.unbind('mouseleave');
 
 
                   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;
 
-                  $myCheckBox.trigger('change');
 
+                  $myRadioCheckBox.trigger('change');
 
                 });
 
 
                 $this.on('mouseleave', function (e) {
 
                   var $this = $(this)
 
-                    , $myCheckBox = $this.siblings('input');
 
+                    , $myInputBox = $this.siblings('input');
 
 
                   e.preventDefault();
 
                   e.stopImmediatePropagation();
 
@@ -191,7 +198,7 @@
 
                   $this.unbind('mouseleave');
 
                   $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) {
 
@@ -239,34 +246,37 @@
 
         }
 
       },
 
       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);
 
       },
 
+      toggleRadioState: function (skipOnChange) {
 
+        $(this).find('input[type=radio]').not(':checked').trigger('change', 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 () {
 
-        return $(this).find('input:checkbox').is(':checked');
 
+        return $(this).find('input').is(':checked');
 
       },
 
       destroy: function () {
 
         var $element = $(this)
 
           , $div = $element.find('div')
 
           , $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) {
 
           $form.unbind('reset');
 
           $form.removeData('bootstrapSwitch');
 
         }
 
 
-        return $checkbox;
 
+        return $inputbox;
 
       }
 
     };
 
 
@@ -279,6 +289,6 @@
 
   };
 
 }(jQuery);
 
 
-$(function () {
 
-  $('.switch')['bootstrapSwitch']();
 
-});
 
+(function () {
 
+  jQuery('.switch')['bootstrapSwitch']();
 
+})();

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

@@ -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/
 
  * ============================================================
 
  * Licensed under the Apache License, Version 2.0
 
@@ -58,6 +64,7 @@
 
       left: 0%;
 
     }
 
   }
 
+  input[type=radio],
 
   input[type=checkbox] {
 
     //debug
 
     display: none;

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

@@ -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/
 
  * ============================================================
 
  * Licensed under the Apache License, Version 2.0
 
@@ -60,6 +66,7 @@
 
 .has-switch > div.switch-on {
 
   left: 0%;
 
 }
 
+.has-switch input[type=radio],
 
 .has-switch input[type=checkbox] {
 
   display: none;
 
 }