Merge pull request #2 from BdMdesigN/master

Update zur Version 1.5

README.md

@@ -13,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="bootstrapSwitch.css">
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 <script src="bootstrapSwitch.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.3/bootstrapSwitch.min.js">  // from cdnjs.com
 ```
 
 Less
@@ -71,7 +71,7 @@ Colors
 checkboxes:
 
 ``` html
-<div class="switch" data-on="danger" data-off="warning">  <!-- primary, info, success, warning and danger -->
+<div class="switch" data-on="danger" data-off="warning">  <!-- primary, info, success, warning, danger and default -->
     <input type="checkbox">
 </div>
 ```
@@ -79,7 +79,7 @@ checkboxes:
 radioboxes:
 
 ``` html
-<div class="switch" data-on="danger" data-off="warning">  <!-- primary, info, success, warning and danger -->
+<div class="switch" data-on="danger" data-off="warning">  <!-- primary, info, success, warning, danger and default -->
     <input type="radio">
 </div>
 ```
@@ -179,6 +179,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');

examples/index.html

@@ -7,7 +7,7 @@
     <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/bootstrapSwitch.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">
@@ -229,11 +229,13 @@ $('#mySwitch').on('switch-change', function (e, data) {
             </div>
             <br>
             <br>
+            <div id="toggle-state-switch-button-status" class="btn btn-primary">Status!</div>
             <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>
         <pre class="prettyprint linenums">
+$('#toggle-state-switch').bootstrapSwitch('status'); // true || false
 $('#toggle-state-switch').bootstrapSwitch('toggleState');
 $('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false</pre>
     </div>
@@ -312,14 +314,14 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre
         <div class="bs-docs-example">
                <div class="control-group exemple1">
                   <br /><br />
-                    <div id="radio1" class="controls radio1">
+                    <div id="radio1" class="controls">
                         <label class="control-label" for="yes">Yes</label>
-                        <div id="yes" class="switch yes" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
-                            <input type="radio" name="yes" class="check demo-1" value="1" checked="checked" />
+                        <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 no" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
-                            <input type="radio" name="no" class="check demo-1" value="0" />
+                        <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>
@@ -330,28 +332,21 @@ $('#disable-switch').bootstrapSwitch('setActive', false);  // true || false</pre
         <pre class="prettyprint linenums">
     &lt;div class="control-group exemple1">
       &lt;br />&lt;br />
-        &lt;div id="radio1" class="controls radio1">
+        &lt;div id="radio1" class="controls">
             &lt;label class="control-label" for="yes">Yes&lt;/label>
-            &lt;div id="yes" class="switch yes" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
-                &lt;input type="radio" name="yes" class="check demo-1" value="1" checked="checked" />
+            &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 no" data-on-label="Yes" data-off-label="No" data-on="success" data-off="danger">
-                &lt;input type="radio" name="no" class="check demo-1" value="0" />
+            &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() {
-    $('#yes').on('click', function () {
-        if($('input[name=yes]').val() == 1) {
-        $('.no').bootstrapSwitch('toggleState');
-        }
-    });
-    $('#no').on('click', function () {
-        if($('input[name=no]').val() == 0) {
-        $('.yes').bootstrapSwitch('toggleState');
-        }
+    $('.radio1').on('switch-change', function () {
+        $('.radio1').bootstrapSwitch('toggleRadioState');
     });
 });
 &lt;/script></pre>
@@ -370,9 +365,9 @@ $(document).ready(function() {
                     <div style="width: 10%;float: left;">
                       <label class="control-label" for="option1">Option 1</label>
                     </div>
-                    <div class="controls radio2">
-                        <div id="option1" class="switch option1">
-                            <input id="radio1" type="radio" name="radio" value="option1" />
+                    <div class="controls">
+                        <div id="option1" class="switch radio2">
+                            <input id="radio1" type="radio" name="radio2" value="option1" checked />
                         </div>
                     </div>
                 </div>
@@ -380,9 +375,9 @@ $(document).ready(function() {
                     <div style="width: 10%;float: left;">
                       <label class="control-label" for="option2">Option 2</label>
                     </div>
-                    <div class="controls radio2">
-                        <div id="option2" class="switch option2">
-                            <input id="radio2" type="radio" name="radio" value="option2" />
+                    <div class="controls">
+                        <div id="option2" class="switch radio2">
+                            <input id="radio2" type="radio" name="radio2" value="option2" />
                         </div>
                     </div>
                 </div>
@@ -390,9 +385,9 @@ $(document).ready(function() {
                     <div style="width: 10%;float: left;">
                       <label class="control-label" for="option3">Option 3</label>
                     </div>
-                    <div class="controls radio2">
-                        <div id="option3" class="switch option3">
-                            <input id="radio3" type="radio" name="radio" value="option3" />
+                    <div class="controls">
+                        <div id="option3" class="switch radio2">
+                            <input id="radio3" type="radio" name="radio2" value="option3" />
                         </div>
                     </div>
                 </div>
@@ -408,7 +403,7 @@ $(document).ready(function() {
           &lt;/div>
             &lt;div class="controls radio2">
               &lt;div id="option1" class="switch option1">
-                &lt;input id="radio1" type="radio" name="radio" value="option1" />
+                &lt;input id="radio1" type="radio" name="radio2" value="option1" checked />
               &lt;/div>
             &lt;/div>
         &lt;/div>
@@ -418,7 +413,7 @@ $(document).ready(function() {
             &lt;/div>
             &lt;div class="controls radio2">
               &lt;div id="option2" class="switch option2">
-                &lt;input id="radio2" type="radio" name="radio" value="option2" />
+                &lt;input id="radio2" type="radio" name="radio2" value="option2" />
               &lt;/div>
             &lt;/div>
         &lt;/div>
@@ -428,11 +423,18 @@ $(document).ready(function() {
             &lt;/div>
             &lt;div class="controls radio2">
               &lt;div id="option3" class="switch option3">
-                &lt;input id="radio3" type="radio" name="radio" value="option3" />
+                &lt;input id="radio3" type="radio" name="radio2" value="option3" />
               &lt;/div>
             &lt;/div>
         &lt;/div>
-    &lt;/div></pre>
+    &lt;/div>
+&lt;script>
+$(document).ready(function() {
+    $('.radio2').on('switch-change', function () {
+        $('.radio2').bootstrapSwitch('toggleRadioGroupState');
+    });
+});
+&lt;/script></pre>
     </div>
 </div>
 
@@ -561,6 +563,10 @@ $(document).ready(function() {
         $('#toggle-state-switch').bootstrapSwitch('setState', true);
     });
 
+    $('#toggle-state-switch-button-status').on('click', function () {
+        alert($('#toggle-state-switch').bootstrapSwitch('status'));
+    });
+
     $('#toggle-state-switch-button-off').on('click', function () {
         $('#toggle-state-switch').bootstrapSwitch('setState', false);
     });
@@ -591,20 +597,12 @@ $(document).ready(function() {
         $('#disable-switch').bootstrapSwitch('setActive', true);
     });
 
-    $('#yes').on('click', function () {
-
-        if($('input[name=yes]').val() == 1) {
-
-        $('.no').bootstrapSwitch('toggleState');
-        }
+    $('.radio1').on('switch-change', function () {
+        $('.radio1').bootstrapSwitch('toggleRadioState');
     });
 
-    $('#no').on('click', function () {
-
-        if($('input[name=no]').val() == 0) {
-
-        $('.yes').bootstrapSwitch('toggleState');
-        }
+    $('.radio2').on('switch-change', function () {
+        $('.radio2').bootstrapSwitch('toggleRadioState');
     });
 
 });

static/js/bootstrapSwitch-1.3.1.js

@@ -1,260 +0,0 @@
-/* ============================================================
- * bootstrapSwitch v1.3.1 by Larentis Mattia @spiritualGuru
- * http://www.larentis.eu/switch/
- * 
- * enhanced by BdMdesigN
- * http://www.bdmdesign.org
- * ============================================================
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- * ============================================================ */
-
-!function ($) {
-  "use strict";
-
-  $.fn['bootstrapSwitch'] = function (method) {
-    var methods = {
-      init: function () {
-        return this.each(function () {
-            var $element = $(this)
-              , $div
-              , $switchLeft
-              , $switchRight
-              , $label
-              , myClasses = ""
-              , classes = $element.attr('class')
-              , color
-              , moving
-              , onLabel = "ON"
-              , offLabel = "OFF"
-              , icon = false;
-
-            $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
-              if (classes.indexOf(el) >= 0)
-                myClasses = el;
-            });
-
-            $element.addClass('has-switch');
-
-            if ($element.data('on') !== undefined)
-              color = "switch-" + $element.data('on');
-
-            if ($element.data('on-label') !== undefined)
-              onLabel = $element.data('on-label');
-
-            if ($element.data('off-label') !== undefined)
-              offLabel = $element.data('off-label');
-
-            if ($element.data('icon') !== undefined)
-              icon = $element.data('icon');
-
-            $switchLeft = $('<span>')
-              .addClass("switch-left")
-              .addClass(myClasses)
-              .addClass(color)
-              .html(onLabel);
-
-            color = '';
-            if ($element.data('off') !== undefined)
-              color = "switch-" + $element.data('off');
-
-            $switchRight = $('<span>')
-              .addClass("switch-right")
-              .addClass(myClasses)
-              .addClass(color)
-              .html(offLabel);
-
-            $label = $('<label>')
-              .html("&nbsp;")
-              .addClass(myClasses)
-              .attr('for', $element.find('input').attr('id'));
-
-            if (icon) {
-              $label.html('<i class="icon icon-' + icon + '"></i>');
-            }
-
-            $div = $element.find('input[type=radio],input[type=checkbox]').wrap($('<div>')).parent().data('animated', false);
-
-            if ($element.data('animated') !== false)
-              $div.addClass('switch-animate').data('animated', true);
-
-            $div
-              .append($switchLeft)
-              .append($label)
-              .append($switchRight);
-
-            $element.find('>div').addClass(
-              $element.find('input[type=radio],input[type=checkbox]').is(':checked') ? 'switch-on' : 'switch-off'
-            );
-
-            if ($element.find('input[type=radio],input[type=checkbox]').is(':disabled'))
-              $(this).addClass('deactivate');
-
-            var changeStatus = function ($this) {
-              $this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click');
-            };
-
-            $element.on('keydown', function (e) {
-              if (e.keyCode === 32) {
-                e.stopImmediatePropagation();
-                e.preventDefault();
-                changeStatus($(e.target).find('span:first'));
-              }
-            });
-
-            $switchLeft.on('click', function (e) {
-              changeStatus($(this));
-            });
-
-            $switchRight.on('click', function (e) {
-              changeStatus($(this));
-            });
-
-            $element.find('input[type=radio],input[type=checkbox]').on('change', function (e, skipOnChange) {
-              var $this = $(this)
-                , $element = $this.parent()
-                , thisState = $this.is(':checked')
-                , state = $element.is('.switch-off');
-
-              e.preventDefault();
-
-              $element.css('left', '');
-
-              if (state === thisState) {
-
-                if (thisState)
-                  $element.removeClass('switch-off').addClass('switch-on');
-                else $element.removeClass('switch-on').addClass('switch-off');
-
-                if ($element.data('animated') !== false)
-                  $element.addClass("switch-animate");
-
-                if (typeof skipOnChange === 'boolean' && skipOnChange)
-                  return;
-
-                $element.parent().trigger('switch-change', {'el': $this, 'value': thisState})
-              }
-            });
-
-            $element.find('label').on('mousedown touchstart', function (e) {
-              var $this = $(this);
-              moving = false;
-
-              e.preventDefault();
-              e.stopImmediatePropagation();
-
-              $this.closest('div').removeClass('switch-animate');
-
-              if ($this.closest('.has-switch').is('.deactivate'))
-                $this.unbind('click');
-              else {
-                $this.on('mousemove touchmove', function (e) {
-                  var $element = $(this).closest('.switch')
-                    , relativeX = (e.pageX || e.originalEvent.targetTouches[0].pageX) - $element.offset().left
-                    , percent = (relativeX / $element.width()) * 100
-                    , left = 25
-                    , right = 75;
-
-                  moving = true;
-
-                  if (percent < left)
-                    percent = left;
-                  else if (percent > right)
-                    percent = right;
-
-                  $element.find('>div').css('left', (percent - right) + "%")
-                });
-
-                $this.on('click touchend', function (e) {
-                  var $this = $(this)
-                    , $target = $(e.target)
-                    , $myRadioCheckBox = $target.siblings('input[type=radio],input[type=checkbox]');
-
-                  e.stopImmediatePropagation();
-                  e.preventDefault();
-
-                  $this.unbind('mouseleave');
-
-                  if (moving)
-
-                    $myRadioCheckBox.prop('checked', !(parseInt($this.parent().css('left')) < -25));
-
-                  else
-                    $myRadioCheckBox.prop("checked", !$myRadioCheckBox.is(":checked"));
-
-                  moving = false;
-                  $myRadioCheckBox.trigger('change');
-                });
-
-                $this.on('mouseleave', function (e) {
-                  var $this = $(this)
-                    , $myInputBox = $this.siblings('input[type=radio],input[type=checkbox]');
-
-                  e.preventDefault();
-                  e.stopImmediatePropagation();
-
-                  $this.unbind('mouseleave');
-                  $this.trigger('mouseup');
-
-                  $myInputBox.prop('checked', !(parseInt($this.parent().css('left')) < -25)).trigger('change');
-                });
-
-                $this.on('mouseup', function (e) {
-                  e.stopImmediatePropagation();
-                  e.preventDefault();
-
-                  $(this).unbind('mousemove');
-                });
-              }
-            });
-          }
-        );
-      },
-      toggleActivation: function () {
-        $(this).toggleClass('deactivate');
-      },
-      isActive: function () {
-        return !$(this).hasClass('deactivate');
-      },
-      setActive: function (active) {
-        if (active)
-          $(this).removeClass('deactivate');
-        else $(this).addClass('deactivate');
-      },
-      toggleState: function (skipOnChange) {
-        var $input = $(this).find('input[type=radio],input[type=checkbox]');
-        $input.prop('checked', !$input.is(':checked')).trigger('change', skipOnChange);
-      },
-      setState: function (value, skipOnChange) {
-        $(this).find('input[type=radio],input[type=checkbox]').prop('checked', value).trigger('change', skipOnChange);
-      },
-      status: function () {
-        return $(this).find('input[type=radio],input[type=checkbox]').is(':checked');
-      },
-      destroy: function () {
-        var $div = $(this).find('div')
-          , $inputbox;
-
-        $div.find(':not(input:radio),:not(input:checkbox').remove();
-
-        $inputbox = $div.children();
-        $inputbox.unwrap().unwrap();
-
-        $inputbox.unbind('change');
-
-        return $inputbox;
-      }
-    };
-
-    if (methods[method])
-      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
-    else if (typeof method === 'object' || !method)
-      return methods.init.apply(this, arguments);
-    else
-      $.error('Method ' + method + ' does not exist!');
-  };
-}(jQuery);
-
-$(function () {
-  $('.switch')['bootstrapSwitch']();
-});

static/js/bootstrapSwitch.js

@@ -1,10 +1,8 @@
 /* ============================================================
- * bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru
+ * bootstrapSwitch v1.5 by Larentis Mattia @spiritualGuru
  * http://www.larentis.eu/switch/
  * 
- * bootstrapSwitch v1.3.1 by Stein, Peter @BdMdesigN
- * 
- * enhanced by BdMdesigN
+ * enhanced for radiobuttons by Stein, Peter @BdMdesigN
  * http://www.bdmdesign.org
  * ============================================================
  * Licensed under the Apache License, Version 2.0
@@ -75,7 +73,7 @@
               $label.html('<i class="icon icon-' + icon + '"></i>');
             }
 
-            $div = $element.find('input[type=radio],input[type=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);
@@ -86,10 +84,10 @@
               .append($switchRight);
 
             $element.find('>div').addClass(
-              $element.find('input[type=radio],input[type=checkbox]').is(':checked') ? 'switch-on' : 'switch-off'
+              $element.find('input').is(':checked') ? 'switch-on' : 'switch-off'
             );
 
-            if ($element.find('input[type=radio],input[type=checkbox]').is(':disabled'))
+            if ($element.find('input').is(':disabled'))
               $(this).addClass('deactivate');
 
             var changeStatus = function ($this) {
@@ -112,7 +110,7 @@
               changeStatus($(this));
             });
 
-            $element.find('input[type=radio],input[type=checkbox]').on('change', function (e, skipOnChange) {
+            $element.find('input').on('change', function (e, skipOnChange) {
               var $this = $(this)
                 , $element = $this.parent()
                 , thisState = $this.is(':checked')
@@ -170,7 +168,7 @@
                 $this.on('click touchend', function (e) {
                   var $this = $(this)
                     , $target = $(e.target)
-                    , $myRadioCheckBox = $target.siblings('input[type=radio],input[type=checkbox]');
+                    , $myRadioCheckBox = $target.siblings('input');
 
                   e.stopImmediatePropagation();
                   e.preventDefault();
@@ -188,7 +186,7 @@
 
                 $this.on('mouseleave', function (e) {
                   var $this = $(this)
-                    , $myInputBox = $this.siblings('input[type=radio],input[type=checkbox]');
+                    , $myInputBox = $this.siblings('input');
 
                   e.preventDefault();
                   e.stopImmediatePropagation();
@@ -222,20 +220,23 @@
         else $(this).addClass('deactivate');
       },
       toggleState: function (skipOnChange) {
-        var $input = $(this).find('input[type=radio],input[type=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[type=radio],input[type=checkbox]').prop('checked', value).trigger('change', skipOnChange);
+        $(this).find('input').prop('checked', value).trigger('change', skipOnChange);
       },
       status: function () {
-        return $(this).find('input[type=radio],input[type=checkbox]').is(':checked');
+        return $(this).find('input').is(':checked');
       },
       destroy: function () {
         var $div = $(this).find('div')
           , $inputbox;
 
-        $div.find(':not(input:radio),:not(input:checkbox').remove();
+        $div.find(':not(input)').remove();
 
         $inputbox = $div.children();
         $inputbox.unwrap().unwrap();

static/less/bootstrapSwitch.less

@@ -1,10 +1,8 @@
 /* ============================================================
- * bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru
+ * bootstrapSwitch v1.5 by Larentis Mattia @spiritualGuru
  * http://www.larentis.eu/switch/
  * 
- * bootstrapSwitch v1.3.1 by Stein, Peter @BdMdesigN
- * 
- * enhanced by BdMdesigN
+ * enhanced for radiobuttons by Stein, Peter @BdMdesigN
  * http://www.bdmdesign.org
  * ============================================================
  * Licensed under the Apache License, Version 2.0

static/stylesheets/bootstrapSwitch.css

@@ -1,10 +1,8 @@
 /* ============================================================
- * bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru
+ * bootstrapSwitch v1.5 by Larentis Mattia @spiritualGuru
  * http://www.larentis.eu/switch/
  * 
- * bootstrapSwitch v1.3.1 by Stein, Peter @BdMdesigN
- * 
- * enhanced by BdMdesigN
+ * enhanced for radiobuttons by Stein, Peter @BdMdesigN
  * http://www.bdmdesign.org
  * ============================================================
  * Licensed under the Apache License, Version 2.0