2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-02 16:04:07 +03:00

get button js working with actual form elements p cooll

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
+2 -2
View File
@@ -3269,8 +3269,8 @@ button.close {
width: 1%;
}
.btn-group[data-toggle="buttons-radio"] > .btn > input[type="radio"],
.btn-group[data-toggle="buttons-checkbox"] > .btn > input[type="checkbox"] {
.btn-group[data-toggle="buttons"] > .btn > input[type="radio"],
.btn-group[data-toggle="buttons"] > .btn > input[type="checkbox"] {
display: none;
}
+13 -10
View File
@@ -196,10 +196,11 @@
}
Button.prototype.toggle = function () {
var $parent = this.$element.closest('[data-toggle="buttons-radio"]')
var $parent = this.$element.closest('[data-toggle="buttons"]')
if ($parent) {
$parent.find('.active').removeClass('active')
if ($parent.length) {
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')
@@ -241,6 +242,7 @@
$(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) {
var $btn = $(e.target)
if ($btn.has('input').length) return // throw away double event for inputs
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
$btn.button('toggle')
})
@@ -604,21 +606,22 @@
// =================
$(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {
var $this = $(this), href
var target = $this.attr('data-target')
var $this = $(this), href
var target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
var data = $(target).data('bs.collapse')
var option = data ? 'toggle' : $this.data()
var parent = $this.attr('data-parent')
var $target = $(target)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $this.data()
var parent = $this.attr('data-parent')
var $parent = parent && $(parent)
if (!data || !data.transitioning) {
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);
+1 -1
View File
File diff suppressed because one or more lines are too long
+6 -6
View File
@@ -1168,9 +1168,9 @@ $('#my-alert').bind('closed.bs.alert', function () {
{% endhighlight %}
<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="btn-group" data-toggle="buttons-checkbox">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> Option 1
</label>
@@ -1183,7 +1183,7 @@ $('#my-alert').bind('closed.bs.alert', function () {
</div>
</div><!-- /example -->
{% highlight html %}
<div class="btn-group" data-toggle="buttons-checkbox">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> Option 1
</label>
@@ -1197,9 +1197,9 @@ $('#my-alert').bind('closed.bs.alert', function () {
{% endhighlight %}
<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="btn-group" data-toggle="buttons-radio">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
</label>
@@ -1212,7 +1212,7 @@ $('#my-alert').bind('closed.bs.alert', function () {
</div>
</div><!-- /example -->
{% highlight html %}
<div class="btn-group" data-toggle="buttons-radio">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
</label>