rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

get button js working with actual form elements p cooll

Browse Source
This commit is contained in:
fat 2013-07-18 00:59:31 -07:00
parent 2a4a0f70ef
commit 37e899d766
7 changed files with 52 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/assets/css/bootstrap.css vendored
View File

@ -3269,8 +3269,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;
} }

23
docs/assets/js/bootstrap.js vendored
View File

@ -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')
@ -241,6 +242,7 @@
$(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) { $(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) {
var $btn = $(e.target) var $btn = $(e.target)
if ($btn.has('input').length) return // throw away double event for inputs
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
$btn.button('toggle') $btn.button('toggle')
}) })
@ -604,21 +606,22 @@
// ================= // =================
$(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) { $(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {
var $this = $(this), href var $this = $(this), href
var target = $this.attr('data-target') var target = $this.attr('data-target')
|| e.preventDefault() || e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7 || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
var data = $(target).data('bs.collapse') var $target = $(target)
var option = data ? 'toggle' : $this.data() var data = $target.data('bs.collapse')
var parent = $this.attr('data-parent') var option = data ? 'toggle' : $this.data()
var parent = $this.attr('data-parent')
var $parent = parent && $(parent) var $parent = parent && $(parent)
if (!data || !data.transitioning) { if (!data || !data.transitioning) {
if ($parent) $parent.find('[data-toggle=collapse][data-parent=' + parent + ']').not($this).addClass('collapsed') if ($parent) $parent.find('[data-toggle=collapse][data-parent=' + parent + ']').not($this).addClass('collapsed')
$this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed') $this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
} }
$(target).collapse(option) $target.collapse(option)
}) })
}(window.jQuery); }(window.jQuery);

2
docs/assets/js/bootstrap.min.js vendored
View File

File diff suppressed because one or more lines are too long

12
docs/javascript.html
View File

@ -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 () {
</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 () {
{% 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 () {
</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>

8
js/button.js
View File

@ -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')
@ -98,6 +99,7 @@
$(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) { $(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) {
var $btn = $(e.target) var $btn = $(e.target)
if ($btn.has('input').length) return // throw away double event for inputs
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
$btn.button('toggle') $btn.button('toggle')
}) })

33
js/tests/unit/button.js
View File

@ -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 () {
}) })
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) var 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')
}) })
}) })

4
less/button-groups.less
View File

@ -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;
} }