update version and Inverted background colour as the skeu suggests

gijs · Oct 6, 2012 · fb4b6a7 · fb4b6a7
1 parent 66496c9
commit fb4b6a7
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -102,4 +102,11 @@ HTML
 JS
 ``` javascript
 $('#data-attribute-toggle-button').toggleButtons();
+```
+
+Toggle state
+------------
+JS
+``` javascript
+$('#my-toggle-button').toggleButtons('toggleState');
 ```
diff --git a/examples/index.html b/examples/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
-    <title>Bootstrap toggle buttons 2.3</title>
+    <title>Bootstrap toggle buttons 2.5</title>
     <meta name="author" content="Mattia Larentis">
     <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />
     <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"
@@ -43,7 +43,7 @@
 <div class="container-fluid">
 <div class="row-fluid">
     <div class="span12">
-        <h1>Bootstrap toggle buttons 2.3
+        <h1>Bootstrap toggle buttons 2.5
             <small>- by Mattia Larentis</small>
         </h1>
     </div>
@@ -509,6 +509,36 @@ <h4>Js:</h4>
 </pre>
     </div>
 </div>
+<div class="row-fluid">
+    <div class="span12">
+        <h3>Toggle State</h3>
+        <hr>
+    </div>
+</div>
+<div class="row-fluid">
+
+    <div class="span4">
+        <div id="toggle-state-toggle-button">
+            <input type="checkbox" checked="checked">
+        </div>
+        <br>
+        <div id="toggle-state-toggle-button-button" class="btn btn-primary">Toggle me!</div>
+    </div>
+    <div class="span8">
+
+        <h4>Html:</h4>
+<pre class="prettyprint linenums">
+&lt;div id="toggle-state-toggle-button">
+    &lt;input type="checkbox" checked="checked">
+&lt;/div></pre>
+        <h4>Js:</h4>
+<pre class="prettyprint linenums">
+$('#toggle-state-toggle-button').toggleButtons();
+
+$('#toggle-state-toggle-button').toggleButtons('toggleState');  // to toggle the state of the toggle button
+</pre>
+    </div>
+</div>
 
 <p class="pull-right">
     <a href="https://twitter.com/SpiritualGuru">follow me</a> -
@@ -633,6 +663,12 @@ <h4>Js:</h4>
     });
 
     $('#data-attribute-toggle-button').toggleButtons();
+
+    $('#toggle-state-toggle-button').toggleButtons();
+
+    $('#toggle-state-toggle-button-button').on('click', function () {
+        $('#toggle-state-toggle-button').toggleButtons('toggleState');
+    });
 </script>
 
 </body>

diff --git a/static/js/jquery.toggle.buttons.js b/static/js/jquery.toggle.buttons.js
@@ -1,6 +1,6 @@
 !function ($) {
   "use strict";
-  // version: 2.4
+  // version: 2.5
   // by Mattia Larentis - follow me on twitter! @SpiritualGuru
 
   var addToAttribute = function (obj, array, value) {

diff --git a/static/sass/bootstrap-toggle-buttons.scss b/static/sass/bootstrap-toggle-buttons.scss
@@ -1,6 +1,6 @@
 @import "compass/css3";
 
-// version: 2.4
+// version: 2.5
 // by Mattia Larentis - follow me on twitter! @SpiritualGuru
 
 $border: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
@@ -81,10 +81,10 @@ $border-radius: 4px;
       padding-left: 3px;
     }
     &.labelRight {
-      @include border-top-right-radius($border-radius);
+      @include border-bottom-right-radius($border-radius);
       @include border-bottom-right-radius($border-radius);
       color: black;
-      @include background-image(linear-gradient(top, $white, #E6E6E6));
+      @include background-image(linear-gradient(bottom, $white, #E6E6E6));
       padding-right: 3px;
     }
 
@@ -97,25 +97,25 @@ $border-radius: 4px;
       $startColor: #5BC0DE;
       color: $white;
       background: $startColor;
-      @include background-image(linear-gradient(top, $startColor, #2F96B4));
+      @include background-image(linear-gradient(bottom, $startColor, #2F96B4));
     }
     &.success {
       $startColor: #62C462;
       color: $white;
       background: $startColor;
-      @include background-image(linear-gradient(top, $startColor, #51A351));
+      @include background-image(linear-gradient(bottom, $startColor, #51A351));
     }
     &.warning {
       $startColor: #DBB450;
       color: $white;
       background: $startColor;
-      @include background-image(linear-gradient(top, $startColor, #F89406));
+      @include background-image(linear-gradient(bottom, $startColor, #F89406));
     }
     &.danger {
       $startColor: #EE5f5B;
       color: $white;
       background: $startColor;
-      @include background-image(linear-gradient(top, $startColor, #BD362F));
+      @include background-image(linear-gradient(bottom, $startColor, #BD362F));
     }
   }
 }
diff --git a/static/stylesheets/bootstrap-toggle-buttons.css b/static/stylesheets/bootstrap-toggle-buttons.css
@@ -63,7 +63,6 @@
   background-image: -webkit-linear-gradient(top, #fefefe, #e6e6e6);
   background-image: -moz-linear-gradient(top, #fefefe, #e6e6e6);
   background-image: -o-linear-gradient(top, #fefefe, #e6e6e6);
-  background-image: -ms-linear-gradient(top, #fefefe, #e6e6e6);
   background-image: linear-gradient(top, #fefefe, #e6e6e6);
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
@@ -82,35 +81,26 @@
 .toggle-button span.labelLeft {
   -moz-border-radius-topleft: 4px;
   -webkit-border-top-left-radius: 4px;
-  -ms-border-top-left-radius: 4px;
-  -o-border-top-left-radius: 4px;
   border-top-left-radius: 4px;
   -moz-border-radius-bottomleft: 4px;
   -webkit-border-bottom-left-radius: 4px;
-  -ms-border-bottom-left-radius: 4px;
-  -o-border-bottom-left-radius: 4px;
   border-bottom-left-radius: 4px;
   padding-left: 3px;
 }
 /* line 83, ../sass/bootstrap-toggle-buttons.scss */
 .toggle-button span.labelRight {
-  -moz-border-radius-topright: 4px;
-  -webkit-border-top-right-radius: 4px;
-  -ms-border-top-right-radius: 4px;
-  -o-border-top-right-radius: 4px;
-  border-top-right-radius: 4px;
   -moz-border-radius-bottomright: 4px;
   -webkit-border-bottom-right-radius: 4px;
-  -ms-border-bottom-right-radius: 4px;
-  -o-border-bottom-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -webkit-border-bottom-right-radius: 4px;
   border-bottom-right-radius: 4px;
   color: black;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(100%, #e6e6e6));
-  background-image: -webkit-linear-gradient(top, #fefefe, #e6e6e6);
-  background-image: -moz-linear-gradient(top, #fefefe, #e6e6e6);
-  background-image: -o-linear-gradient(top, #fefefe, #e6e6e6);
-  background-image: -ms-linear-gradient(top, #fefefe, #e6e6e6);
-  background-image: linear-gradient(top, #fefefe, #e6e6e6);
+  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #fefefe), color-stop(100%, #e6e6e6));
+  background-image: -webkit-linear-gradient(bottom, #fefefe, #e6e6e6);
+  background-image: -moz-linear-gradient(bottom, #fefefe, #e6e6e6);
+  background-image: -o-linear-gradient(bottom, #fefefe, #e6e6e6);
+  background-image: linear-gradient(bottom, #fefefe, #e6e6e6);
   padding-right: 3px;
 }
 /* line 91, ../sass/bootstrap-toggle-buttons.scss */
@@ -121,50 +111,45 @@
   background-image: -webkit-linear-gradient(bottom, #0088cc, #0055cc);
   background-image: -moz-linear-gradient(bottom, #0088cc, #0055cc);
   background-image: -o-linear-gradient(bottom, #0088cc, #0055cc);
-  background-image: -ms-linear-gradient(bottom, #0088cc, #0055cc);
   background-image: linear-gradient(bottom, #0088cc, #0055cc);
 }
 /* line 96, ../sass/bootstrap-toggle-buttons.scss */
 .toggle-button span.info {
   color: #fefefe;
   background: #5bc0de;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5bc0de), color-stop(100%, #2f96b4));
-  background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
-  background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
-  background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
-  background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
-  background-image: linear-gradient(top, #5bc0de, #2f96b4);
+  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #5bc0de), color-stop(100%, #2f96b4));
+  background-image: -webkit-linear-gradient(bottom, #5bc0de, #2f96b4);
+  background-image: -moz-linear-gradient(bottom, #5bc0de, #2f96b4);
+  background-image: -o-linear-gradient(bottom, #5bc0de, #2f96b4);
+  background-image: linear-gradient(bottom, #5bc0de, #2f96b4);
 }
 /* line 102, ../sass/bootstrap-toggle-buttons.scss */
 .toggle-button span.success {
   color: #fefefe;
   background: #62c462;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #62c462), color-stop(100%, #51a351));
-  background-image: -webkit-linear-gradient(top, #62c462, #51a351);
-  background-image: -moz-linear-gradient(top, #62c462, #51a351);
-  background-image: -o-linear-gradient(top, #62c462, #51a351);
-  background-image: -ms-linear-gradient(top, #62c462, #51a351);
-  background-image: linear-gradient(top, #62c462, #51a351);
+  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #62c462), color-stop(100%, #51a351));
+  background-image: -webkit-linear-gradient(bottom, #62c462, #51a351);
+  background-image: -moz-linear-gradient(bottom, #62c462, #51a351);
+  background-image: -o-linear-gradient(bottom, #62c462, #51a351);
+  background-image: linear-gradient(bottom, #62c462, #51a351);
 }
 /* line 108, ../sass/bootstrap-toggle-buttons.scss */
 .toggle-button span.warning {
   color: #fefefe;
   background: #dbb450;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dbb450), color-stop(100%, #f89406));
-  background-image: -webkit-linear-gradient(top, #dbb450, #f89406);
-  background-image: -moz-linear-gradient(top, #dbb450, #f89406);
-  background-image: -o-linear-gradient(top, #dbb450, #f89406);
-  background-image: -ms-linear-gradient(top, #dbb450, #f89406);
-  background-image: linear-gradient(top, #dbb450, #f89406);
+  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #dbb450), color-stop(100%, #f89406));
+  background-image: -webkit-linear-gradient(bottom, #dbb450, #f89406);
+  background-image: -moz-linear-gradient(bottom, #dbb450, #f89406);
+  background-image: -o-linear-gradient(bottom, #dbb450, #f89406);
+  background-image: linear-gradient(bottom, #dbb450, #f89406);
 }
 /* line 114, ../sass/bootstrap-toggle-buttons.scss */
 .toggle-button span.danger {
   color: #fefefe;
   background: #ee5f5b;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ee5f5b), color-stop(100%, #bd362f));
-  background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
-  background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
-  background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
-  background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f);
-  background-image: linear-gradient(top, #ee5f5b, #bd362f);
+  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #ee5f5b), color-stop(100%, #bd362f));
+  background-image: -webkit-linear-gradient(bottom, #ee5f5b, #bd362f);
+  background-image: -moz-linear-gradient(bottom, #ee5f5b, #bd362f);
+  background-image: -o-linear-gradient(bottom, #ee5f5b, #bd362f);
+  background-image: linear-gradient(bottom, #ee5f5b, #bd362f);
 }