Skip to content

B
bootstrap
Commit 6e049253 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Merge branch '3.0.0-wip' of github.com:twitter/bootstrap into 3.0.0-wip

parents e72b524d 6ec8a1e4
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 44 additions and 27 deletions
docs/assets/css/bootstrap.css
View file @ 6e049253
...@@ -3260,8 +3260,8 @@ button.close { ...@@ -3260,8 +3260,8 @@ button.close {
width: 1%; width: 1%;
} }
.btn-group[data-toggle="buttons-radio"] > .btn > input[type="radio"], .btn-group[data-toggle="buttons"] > .btn > input[type="radio"],
.btn-group[data-toggle="buttons-checkbox"] > .btn > input[type="checkbox"] { .btn-group[data-toggle="buttons"] > .btn > input[type="checkbox"] {
display: none; display: none;
} }
......
docs/assets/js/bootstrap.js
View file @ 6e049253
...@@ -196,10 +196,11 @@ ...@@ -196,10 +196,11 @@
} }
Button.prototype.toggle = function () { Button.prototype.toggle = function () {
var $parent = this.$element.closest('[data-toggle="buttons-radio"]') var $parent = this.$element.closest('[data-toggle="buttons"]')
if ($parent) { if ($parent.length) {
$parent.find('.active').removeClass('active') var $input = this.$element.find('input').prop('checked', !this.$element.hasClass('active'))
if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')
} }
this.$element.toggleClass('active') this.$element.toggleClass('active')
...@@ -243,6 +244,7 @@ ...@@ -243,6 +244,7 @@
var $btn = $(e.target) var $btn = $(e.target)
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
$btn.button('toggle') $btn.button('toggle')
e.preventDefault()
}) })
}(window.jQuery); }(window.jQuery);
......
docs/assets/js/bootstrap.min.js
View file @ 6e049253
This diff is collapsed.
docs/javascript.html
View file @ 6e049253
...@@ -1168,9 +1168,9 @@ $('#my-alert').bind('closed.bs.alert', function () { ...@@ -1168,9 +1168,9 @@ $('#my-alert').bind('closed.bs.alert', function () {
{% endhighlight %} {% endhighlight %}
<h4>Checkbox</h4> <h4>Checkbox</h4>
<p>Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.</p> <p>Add <code>data-toggle="buttons"</code> to a group of checkboxes for checkbox style toggling on btn-group.</p>
<div class="bs-example" style="padding-bottom: 24px;"> <div class="bs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-checkbox"> <div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary"> <label class="btn btn-primary">
<input type="checkbox"> Option 1 <input type="checkbox"> Option 1
</label> </label>
...@@ -1183,7 +1183,7 @@ $('#my-alert').bind('closed.bs.alert', function () { ...@@ -1183,7 +1183,7 @@ $('#my-alert').bind('closed.bs.alert', function () {
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="btn-group" data-toggle="buttons-checkbox"> <div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary"> <label class="btn btn-primary">
<input type="checkbox"> Option 1 <input type="checkbox"> Option 1
</label> </label>
...@@ -1197,9 +1197,9 @@ $('#my-alert').bind('closed.bs.alert', function () { ...@@ -1197,9 +1197,9 @@ $('#my-alert').bind('closed.bs.alert', function () {
{% endhighlight %} {% endhighlight %}
<h4>Radio</h4> <h4>Radio</h4>
<p>Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.</p> <p>Add <code>data-toggle="buttons"</code> to a group of radio inputs for radio style toggling on btn-group.</p>
<div class="bs-example" style="padding-bottom: 24px;"> <div class="bs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-radio"> <div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary"> <label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1 <input type="radio" name="options" id="option1"> Option 1
</label> </label>
...@@ -1212,7 +1212,7 @@ $('#my-alert').bind('closed.bs.alert', function () { ...@@ -1212,7 +1212,7 @@ $('#my-alert').bind('closed.bs.alert', function () {
</div> </div>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<div class="btn-group" data-toggle="buttons-radio"> <div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary"> <label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1 <input type="radio" name="options" id="option1"> Option 1
</label> </label>
......
js/button.js
View file @ 6e049253
...@@ -53,10 +53,11 @@ ...@@ -53,10 +53,11 @@
} }
Button.prototype.toggle = function () { Button.prototype.toggle = function () {
var $parent = this.$element.closest('[data-toggle="buttons-radio"]') var $parent = this.$element.closest('[data-toggle="buttons"]')
if ($parent) { if ($parent.length) {
$parent.find('.active').removeClass('active') var $input = this.$element.find('input').prop('checked', !this.$element.hasClass('active'))
if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')
} }
this.$element.toggleClass('active') this.$element.toggleClass('active')
...@@ -100,6 +101,7 @@ ...@@ -100,6 +101,7 @@
var $btn = $(e.target) var $btn = $(e.target)
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
$btn.button('toggle') $btn.button('toggle')
e.preventDefault()
}) })
}(window.jQuery); }(window.jQuery);
js/tests/unit/button.js
View file @ 6e049253
...@@ -69,7 +69,7 @@ $(function () { ...@@ -69,7 +69,7 @@ $(function () {
}) })
test("should toggle active when btn children are clicked within btn-group", function () { test("should toggle active when btn children are clicked within btn-group", function () {
var btngroup = $('<div class="btn-group" data-toggle="buttons-checkbox"></div>') var btngroup = $('<div class="btn-group" data-toggle="buttons"></div>')
, btn = $('<button class="btn">fat</button>') , btn = $('<button class="btn">fat</button>')
, inner = $('<i></i>') , inner = $('<i></i>')
btngroup btngroup
...@@ -81,22 +81,35 @@ $(function () { ...@@ -81,22 +81,35 @@ $(function () {
}) })
test("should check for closest matching toggle", function () { test("should check for closest matching toggle", function () {
var group = $("<div data-toggle='buttons-radio'></div>") var group = '<div class="btn-group" data-toggle="buttons">' +
, btn1 = $("<button class='btn active'></button>") '<label class="btn btn-primary active">' +
, btn2 = $("<button class='btn'></button>") '<input type="radio" name="options" id="option1" checked="true"> Option 1' +
, wrap = $("<div></div>") '</label>' +
'<label class="btn btn-primary">' +
'<input type="radio" name="options" id="option2"> Option 2' +
'</label>' +
'<label class="btn btn-primary">' +
'<input type="radio" name="options" id="option3"> Option 3' +
'</label>' +
'</div>'
wrap.append(btn1, btn2) group = $(group)
group var btn1 = $(group.children()[0])
.append(wrap) var btn2 = $(group.children()[1])
.appendTo($('#qunit-fixture')) var btn3 = $(group.children()[2])
group.appendTo($('#qunit-fixture'))
ok(btn1.hasClass('active'), 'btn1 has active class') ok(btn1.hasClass('active'), 'btn1 has active class')
ok(btn1.find('input').prop('checked'), 'btn1 is checked')
ok(!btn2.hasClass('active'), 'btn2 does not have active class') ok(!btn2.hasClass('active'), 'btn2 does not have active class')
btn2.click() ok(!btn2.find('input').prop('checked'), 'btn2 is not checked')
btn2.find('input').click()
ok(!btn1.hasClass('active'), 'btn1 does not have active class') ok(!btn1.hasClass('active'), 'btn1 does not have active class')
ok(!btn1.find('input').prop('checked'), 'btn1 is checked')
ok(btn2.hasClass('active'), 'btn2 has active class') ok(btn2.hasClass('active'), 'btn2 has active class')
ok(btn2.find('input').prop('checked'), 'btn2 is checked')
}) })
}) })
less/button-groups.less
View file @ 6e049253
...@@ -164,7 +164,7 @@ ...@@ -164,7 +164,7 @@
// Checkbox and radio options // Checkbox and radio options
.btn-group[data-toggle="buttons-radio"] > .btn > input[type="radio"], .btn-group[data-toggle="buttons"] > .btn > input[type="radio"],
.btn-group[data-toggle="buttons-checkbox"] > .btn > input[type="checkbox"] { .btn-group[data-toggle="buttons"] > .btn > input[type="checkbox"] {
display: none; display: none;
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment