Explorar el Código

add switch without animation

Mattia Larentis hace 12 años
padre
commit
0039a4c3b3
Se han modificado 3 ficheros con 15 adiciones y 10 borrados
  1. 1 1
      README.md
  2. 3 3
      examples/index.html
  3. 11 6
      static/js/jquery.switch.js

+ 1 - 1
README.md

@@ -39,7 +39,7 @@ Data attributes
 ---------------
 
 ``` 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"  data-animated="false">  <!-- primary, info, success, warning and danger -->
     <input type="checkbox">
 </div>
 ```

+ 3 - 3
examples/index.html

@@ -81,7 +81,7 @@ $('#mySwitch').on('switch-change', function (e, data) {
     <div class="row-fluid">
 
         <div class="span4">
-            <div class="switch">
+            <div class="switch" data-animated="false">
                 <input type="checkbox">
             </div>
         </div>
@@ -89,7 +89,7 @@ $('#mySwitch').on('switch-change', function (e, data) {
 
             <h4>Html:</h4>
                 <pre class="prettyprint linenums">
-&lt;div class="switch">
+&lt;div class="switch" data-animated="false">
     &lt;input type="checkbox">
 &lt;/div></pre>
         </div>
@@ -104,7 +104,7 @@ $('#mySwitch').on('switch-change', function (e, data) {
 
         <div class="span4">
             <div class="switch switch-small">
-                <input type="checkbox" checked="checked">
+                <input type="checkbox" checked="checked" disabled="disabled">
             </div>
         </div>
         <div class="span8">

+ 11 - 6
static/js/jquery.switch.js

@@ -20,7 +20,7 @@
         if ($element.data('on') !== undefined)
           color = "switch-" + $element.data('on');
 
-        $switchLeft = $('<span></span>')
+        $switchLeft = $('<span>')
           .addClass("switch-left")
           .addClass(myClasses)
           .addClass(color)
@@ -29,18 +29,22 @@
         if ($element.data('off') !== undefined)
           color = "switch-" + $element.data('off');
 
-        $switchRight = $('<span></span>')
+        $switchRight = $('<span>')
           .addClass("switch-right")
           .addClass(myClasses)
           .addClass(color)
           .text("OFF");
 
-        $label = $('<label></label>')
+        $label = $('<label>')
           .html("&nbsp;")
           .addClass(myClasses)
           .attr('for', $element.find('input').attr('id'));
 
-        $div = $element.find('input').wrap($('<div></div>')).parent().addClass('switch-animate');
+        $div = $element.find('input').wrap($('<div>')).parent().data('animated', false);
+
+        if($element.data('animated') !== false)
+          $div.addClass('switch-animate').data('animated', true);
+
         $div.append($switchLeft);
         $div.append($label);
         $div.append($switchRight);
@@ -75,7 +79,8 @@
             $element.removeClass('switch-off').addClass('switch-on');
           else $element.removeClass('switch-on').addClass('switch-off');
 
-          $element.addClass("switch-animate");
+          if($element.data('animated') !== false)
+            $element.addClass("switch-animate");
 
           $element.parent().trigger('switch-change', {'el': $(this), 'value': $(this).is(':checked')})
         });
@@ -151,7 +156,7 @@
       }
     );
   };
-}($);
+}(jQuery);
 
 $(function () {
   $('.switch').switch();