buttons-radio-optional: just like buttons-radio but a clicked button …

…can be un-clicked
twbs · Jul 4, 2012 · c191522 · c191522
1 parent 857b8fb
commit c191522
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 20 deletions.
diff --git a/docs/assets/js/bootstrap-button.js b/docs/assets/js/bootstrap-button.js
@@ -51,13 +51,21 @@
   }
 
   Button.prototype.toggle = function () {
-    var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
-
-    $parent && $parent
-      .find('.active')
-      .removeClass('active')
+    var $parent = this.$element.parent('[data-toggle="buttons-radio"], [data-toggle="buttons-radio-optional"]')
 
     this.$element.toggleClass('active')
+
+    if ($parent && $parent.attr('data-toggle') == 'buttons-radio') {
+      $parent
+        .find('.active')
+        .removeClass('active');
+      this.$element.toggleClass('active')
+    } else if ($parent) {
+      $parent
+        .find('.active')
+        .not(this.$element)
+        .removeClass('active');
+    }
   }
 
 
@@ -93,4 +101,4 @@
     })
   })
 
-}(window.jQuery);
+}(window.jQuery);
diff --git a/docs/assets/js/bootstrap.js b/docs/assets/js/bootstrap.js
@@ -200,13 +200,21 @@
   }
 
   Button.prototype.toggle = function () {
-    var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
-
-    $parent && $parent
-      .find('.active')
-      .removeClass('active')
+    var $parent = this.$element.parent('[data-toggle="buttons-radio"], [data-toggle="buttons-radio-optional"]')
 
     this.$element.toggleClass('active')
+
+    if ($parent && $parent.attr('data-toggle') == 'buttons-radio') {
+      $parent
+        .find('.active')
+        .removeClass('active');
+      this.$element.toggleClass('active')
+    } else if ($parent) {
+      $parent
+        .find('.active')
+        .not(this.$element)
+        .removeClass('active');
+    }
   }
 
 
@@ -242,7 +250,8 @@
     })
   })
 
-}(window.jQuery);/* ==========================================================
+}(window.jQuery);
+/* ==========================================================
  * bootstrap-carousel.js v2.0.4
  * http://twitter.github.com/bootstrap/javascript.html#carousel
  * ==========================================================

diff --git a/docs/assets/js/bootstrap.min.js b/docs/assets/js/bootstrap.min.js
diff --git a/docs/javascript.html b/docs/javascript.html
@@ -1060,6 +1060,16 @@ <h2>Example uses</h2>
                   </div>
                </td>
              </tr>
+             <tr>
+               <td>Optional Radio</td>
+               <td>
+                  <div class="btn-group" data-toggle="buttons-radio-optional">
+                    <button class="btn btn-primary">Left</button>
+                    <button class="btn btn-primary">Middle</button>
+                    <button class="btn btn-primary">Right</button>
+                  </div>
+               </td>
+             </tr>
             </tbody>
           </table>
           <hr>
@@ -1482,6 +1492,7 @@ <h4>.typeahead(options)</h4>
       </div>
     </section>
 
+
      <!-- Footer
       ================================================== -->
       <footer class="footer">

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
@@ -982,6 +982,16 @@ $('#my-alert').bind('closed', function () {
                   </div>
                </td>
              </tr>
+             <tr>
+               <td>{{_i}}Optional Radio{{/i}}</td>
+               <td>
+                  <div class="btn-group" data-toggle="buttons-radio-optional">
+                    <button class="btn btn-primary">{{_i}}Left{{/i}}</button>
+                    <button class="btn btn-primary">{{_i}}Middle{{/i}}</button>
+                    <button class="btn btn-primary">{{_i}}Right{{/i}}</button>
+                  </div>
+               </td>
+             </tr>
             </tbody>
           </table>
           <hr>
@@ -1402,4 +1412,4 @@ $('.carousel').carousel({
           <p>{{_i}}Initializes an input with a typeahead.{{/i}}</p>
         </div>
       </div>
-    </section>
+    </section>
diff --git a/js/bootstrap-button.js b/js/bootstrap-button.js
@@ -51,13 +51,21 @@
   }
 
   Button.prototype.toggle = function () {
-    var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
-
-    $parent && $parent
-      .find('.active')
-      .removeClass('active')
+    var $parent = this.$element.parent('[data-toggle="buttons-radio"], [data-toggle="buttons-radio-optional"]')
 
     this.$element.toggleClass('active')
+
+    if ($parent && $parent.attr('data-toggle') == 'buttons-radio') {
+      $parent
+        .find('.active')
+        .removeClass('active');
+      this.$element.toggleClass('active')
+    } else if ($parent) {
+      $parent
+        .find('.active')
+        .not(this.$element)
+        .removeClass('active');
+    }
   }
 
 
@@ -93,4 +101,4 @@
     })
   })
 
-}(window.jQuery);
+}(window.jQuery);