Button groups, toggle buttons and radio buttons

bootstrap.css

@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sun Sep 18 14:19:52 PDT 2011
+ * Date: Sun 25 Sep 2011 16:29:58 PDT
  */
 /* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here	that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -1888,6 +1888,56 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
+.toggle.active {
+  background-color: #bfbfbf;
+  background-repeat: repeat-x;
+  background-image: -khtml-gradient(linear, left top, left bottom, from(#bfbfbf), to(#bfbfbf));
+  background-image: -moz-linear-gradient(top, #bfbfbf, #bfbfbf);
+  background-image: -ms-linear-gradient(top, #bfbfbf, #bfbfbf);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bfbfbf), color-stop(100%, #bfbfbf));
+  background-image: -webkit-linear-gradient(top, #bfbfbf, #bfbfbf);
+  background-image: -o-linear-gradient(top, #bfbfbf, #bfbfbf);
+  background-image: linear-gradient(top, #bfbfbf, #bfbfbf);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfbfbf', endColorstr='#bfbfbf', GradientType=0);
+  color: #333;
+  text-decoration: none;
+  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.radio .active {
+  color: #ffffff;
+  background-color: #0064cd;
+  background-repeat: repeat-x;
+  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
+  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
+  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
+  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
+  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
+  background-image: linear-gradient(top, #049cdb, #0064cd);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  border-color: #0064cd #0064cd #003f81;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
+.btngroup {
+  display: inline-block;
+  vertical-align: bottom;
+}
+.btngroup .btn {
+  float: left;
+  border-radius: 0;
+}
+.btngroup .btn:nth-child(n+2) {
+  border-left: none;
+}
+.btngroup .btn:first-child {
+  border-radius: 4px 0 0 4px;
+}
+.btngroup .btn:last-child {
+  border-radius: 0px 4px 4px 0px;
+}
 .close {
   float: right;
   color: #000000;

docs/assets/js/application.js

@@ -26,6 +26,10 @@ $(document).ready(function(){
     e.preventDefault()
   })
 
+  // radios and toggles
+  $('.radio .btn').radio()
+  $('.toggle.btn').toggleBtn();
+
   // Copy code blocks in docs
   $(".copy-code").focus(function () {
     var el = this;

docs/index.html

@@ -24,6 +24,7 @@
     <script src="../js/bootstrap-dropdown.js"></script>
     <script src="../js/bootstrap-twipsy.js"></script>
     <script src="../js/bootstrap-scrollspy.js"></script>
+    <script src="../js/bootstrap-radiotoggle.js"></script>
     <script src="assets/js/application.js"></script>
 
     <!-- Le fav and touch icons -->
@@ -1291,6 +1292,50 @@ <h4>Buttons</h4>
       </div>
     </div>
   </div><!-- /row -->
+
+  <div class="row">
+    <div class="span4">
+      <h2>Button Groups</h2>
+      <p>Three flavours: regular, radios and toggles. First, wrap your buttons in a <code>.btngroup</code>.</p>
+      <p>For radios, apply <code>.radio</code> to the wrapper. For toggles, apply <code>.toggle</code> to each button in the group.</p>
+      <p><a class="btn js-btn" href="./javascript.html#radiotoggle">Get the javascript &raquo;</a></p>
+    </div>
+    <div class="span12">
+        <h4>Groups</h4>
+        <div class="well">
+            <div class="btngroup">
+                <a class="btn" href="#">Left</a>
+                <a class="btn" href="#">Right</a>
+            </div>
+            <div class="btngroup">
+                <a class="btn" href="#">1</a>
+                <a class="btn" href="#">2</a>
+                <a class="btn" href="#">3</a>
+                <a class="btn" href="#">4</a>
+            </div>
+        </div>
+      <h4>Radios</h4>
+      <p>In a radio group, only one button may be active at a time. Add the class <code>.radio</code> to the button group.</p>
+        <div class="well">
+            <div class="radio btngroup">
+                <a class="btn active" href="#">Left</a>
+                <a class="btn" href="#">Middle</a>
+                <a class="btn" href="#">Right</a>
+            </div>
+        </div>
+        <h4>Toggles</h4>
+        <p>Toggles work like radios, but each button in the group can be set independently. Add <code>.toggle</code> to each button in the button group. Lone buttons can also be toggles.</p>
+        <div class="well">
+            <div class="btngroup">
+                <a class="btn toggle active" href="#">Left</a>
+                <a class="btn toggle" href="#">Middle</a>
+                <a class="btn toggle" href="#">Right</a>
+            </div>
+
+            <a class="btn toggle" href="#">Toggle</a>
+        </div>
+    </div>
+  </div><!-- /row -->
 </section>
 
 
@@ -1742,6 +1787,10 @@ <h3>What's included</h3>
              <td><a href="./javascript.html#popover">bootstrap-popover.js</a></td>
              <td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td>
            </tr>
+           <tr>
+             <td><a href="./javascript.html#radiotoggle">bootstrap-radiotoggle.js</a></td>
+             <td>This plugin adds interaction to radio and toggle button groups.</td>
+           </tr>
          </tbody>
        </table>
        <h3>Is javascript necessary?</h3>

docs/javascript.html

@@ -22,6 +22,7 @@
     <script src="../js/bootstrap-dropdown.js"></script>
     <script src="../js/bootstrap-scrollspy.js"></script>
     <script src="../js/bootstrap-tabs.js"></script>
+    <script src="../js/bootstrap-radiotoggle.js"></script>
 
     <!-- Le styles -->
     <link href="../bootstrap.css" rel="stylesheet">
@@ -52,6 +53,7 @@ <h3><a href="#">Bootstrap JS</a></h3>
             <li><a href="#twipsy">Twipsy</a></li>
             <li><a href="#popover">Popover</a></li>
             <li><a href="#alerts">Alerts</a></li>
+            <li><a href="#radiotoggle">Toggles</a></li>
           </ul>
         </div>
       </div>
@@ -658,6 +660,73 @@ <h3>Demo</h3>
         </div>
       </div>
     </section>
+
+    <section id="radiotoggle">
+        <div class="page-header">
+            <h1>Toggles <small>radiotoggle.js</small></h1>
+        </div>
+        <div class="row">
+            <div class="span4">
+                <p>Toggle buttons and radio buttons in button groups.</p>
+              <a href="../js/bootstrap-radiotoggle.js" target="_blank" class="btn primary">Download</a>
+            </div>
+            <div class="span12">
+                <h3>Using bootstrap-radiotoggle.js</h3>
+                <pre class="prettyprint linenums">
+$('.radio .btn').radio()
+
+$('.toggle.btn').toggleBtn()</pre>
+                <h3>Markup</h3>
+                <p>For radio buttons:</p>
+                <pre class="prettyprint linenums">
+&lt;div class="btngroup radio"&gt;
+  &lt;a class="btn"&gt;Left&lt;/a&gt;
+  &lt;a class="btn"&gt;Middle&lt;/a&gt;
+  &lt;a class="btn"&gt;Right&lt;/a&gt;
+&lt;/div&gt;</pre>
+                <p>For toggle buttons:</p>
+                <pre class="prettyprint linenums">
+&lt;div class="btngroup"&gt;
+  &lt;a class="btn toggle"&gt;Left&lt;/a&gt;
+  &lt;a class="btn toggle"&gt;Right&lt;/a&gt;
+&lt;/div&gt;</pre>
+                <p>Toggles need not be in a button group:</p>
+                <pre class="prettyprint linenums">
+&lt;a class="btn toggle"&gt;Toggle&lt;/a&gt;</pre>
+                <h3>Methods</h3>
+                <h4>$().radio()</h4>
+                <p>Adds radio button functionality to selected buttons.</p>
+                <h4>$().toggleBtn()</h4>
+                <p>Adds toggle button functionality to selected buttons.</p>
+                <h3>Demo</h3>
+                <div class="well">
+                    <div class="radio btngroup">
+                        <a class="btn active" href="#">Left</a>
+                        <a class="btn" href="#">Middle</a>
+                        <a class="btn" href="#">Right</a>
+                    </div>
+                </div>
+                <div class="well">
+                    <div class="btngroup">
+                        <a class="btn toggle active" href="#">Left</a>
+                        <a class="btn toggle" href="#">Middle</a>
+                        <a class="btn toggle" href="#">Right</a>
+                    </div>
+
+                    <a class="btn toggle" href="#">Toggle</a>
+                </div>
+                <script>
+                $('.radio .btn').radio()
+                $('.toggle.btn').toggleBtn()
+
+                // for demonstration purposes only
+                $('#radiotoggle .btn[href=#]').click(function (e) { 
+                    e.preventDefault()
+                });
+                </script>
+            </div>
+        </div>
+    </section>
 
 
     </div><!-- /container -->

js/bootstrap-radiotoggle.js

@@ -0,0 +1,29 @@
+/* Radio and toggle buttons */
+
+!function( $ ) {
+
+    function activate( element, container ) {
+        container.find( '.active' ).removeClass( 'active' )
+        element.addClass('active')
+    }
+
+    jQuery.fn.radio = function() {
+
+        return this.each( function() {
+            var $this = $(this)
+            $this.click( function() {
+                activate( $this, $this.parent() )
+            })
+        })
+    }
+
+    jQuery.fn.toggleBtn = function() {
+        return this.each( function() {
+            var $this = $(this)
+            $this.click( function() {
+                $this.toggleClass('active')
+            })
+        })
+    }
+
+}( window.jQuery || window.ender );

js/tests/index.html

@@ -17,6 +17,7 @@
   <script src="../../js/bootstrap-tabs.js"></script>
   <script src="../../js/bootstrap-twipsy.js"></script>
   <script src="../../js/bootstrap-popover.js"></script>
+  <script src="../../js/bootstrap-radiotoggle.js"></script>
 
   <!-- unit tests -->
   <script src="unit/bootstrap-alerts.js"></script>
@@ -25,6 +26,8 @@
   <script src="unit/bootstrap-popover.js"></script>
   <script src="unit/bootstrap-tabs.js"></script>
   <script src="unit/bootstrap-twipsy.js"></script>
+  <script src="unit/bootstrap-radiotoggle.js"></script>
+
 
 <body>
   <div>

js/tests/unit/bootstrap-radiotoggle.js

@@ -0,0 +1,39 @@
+$(function () {
+
+    module("bootstrap-radiotoggle")
+
+    test("should be defined on jquery object", function () {
+        ok($(document.body).radio, 'radio method is defined')
+        ok($(document.body).toggleBtn, 'toggleBtn method is defined')
+    })
+
+    test("should return element", function () {
+        ok($(document.body).radio()[0] == document.body, 'radio method returned document.body' )
+        ok($(document.body).toggleBtn()[0] == document.body, 'toggleBtn method returned document.body')
+    })
+
+    test("should toggle element on click (toggleBtn)", function () {
+        var toggleHTML = '<a class="btn toggle" href="#">Toggle</a>'
+        , toggle = $(toggleHTML).toggleBtn()
+
+        toggle.click()
+
+        ok(toggle.hasClass('active'), 'add .active on click')
+
+        toggle.click()
+
+        ok(!toggle.hasClass('active'), 'remove .active on next click')
+    })
+
+    test("should activate focused radio on click (radio)", function () {
+        var radioHTML = '<div class="btngroup radio">'
+        + '<a class="btn">One</a><a class="btn active">Two</a>'
+        + '</div>'
+        , radio = $(radioHTML).find('a').radio()
+
+        radio.eq(0).click()
+
+        ok(radio.eq(0).hasClass('active'), 'add .active to focused button')
+        ok(!radio.eq(1).hasClass('active'), 'remove .active from other buttons') 
+    })
+})

lib/patterns.less

@@ -591,6 +591,7 @@ footer {
     font-size: @basefont - 2px;
   }
 }
+
 // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
 :root .alert-message,
 :root .btn {
@@ -606,6 +607,40 @@ input[type=submit].btn {
   }
 }
 
+// RADIO, TOGGLE AND GROUPED BUTTONS
+// ---------------------------------
+
+// active state for radio and toggle buttons
+.toggle.active {
+    #gradient > .vertical(darken(#ffffff, 25%), darken(#ffffff, 25%));
+    color: #333;
+    text-decoration: none;
+    @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
+    .box-shadow(@shadow);
+}
+.radio .active {
+    color: @white;
+    .gradientBar(@blue, @blueDark)
+}
+
+// Classes for button groups
+.btngroup {
+    display: inline-block;
+    vertical-align: bottom;
+}
+.btngroup .btn {
+    float: left;
+    border-radius: 0;
+}
+.btngroup .btn:nth-child(n+2) {
+    border-left: none;
+}
+.btngroup .btn:first-child {
+    border-radius: 4px 0 0 4px;
+}
+.btngroup .btn:last-child {
+    border-radius: 0px 4px 4px 0px;
+}
 
 // CLOSE ICONS
 // -----------