blob: b577479aad0763e6887da5a273562117620ef8b2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
---
layout: page
title: Buttons
---
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
## Uses
#### Stateful
Add `data-loading-text="Loading..."` to use a loading state on a button.
{% example html %}
<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
Loading state
</button>
<script>
$('#loading-example-btn').click(function () {
var btn = $(this)
btn.button('loading')
$.ajax(...).always(function () {
btn.button('reset')
});
});
</script>
{% endexample %}
#### Single toggle
Add `data-toggle="button"` to activate toggling on a single button.
{% example html %}
<button type="button" class="btn btn-primary" data-toggle="button">
Single toggle
</button>
{% endexample %}
#### Checkbox
Add `data-toggle="buttons"` to a group of checkboxes for checkbox style toggling on btn-group.
<div class="bs-callout bs-callout-warning">
<h4>Pre-checked options need <code>.active</code></h4>
<p>For pre-checked options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
</div>
<div class="bs-callout bs-callout-warning">
<h4>Visual checked state only updated on click</h4>
<p>If the checked state of a checkbox button is updated without firing a <code>click</code> event on the button (e.g. via <code><input type="reset"></code> or via setting the <code>checked</code> property of the input), you will need to toggle the <code>.active</code> class on the input's <code>label</code> yourself.</p>
</div>
{% example html %}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Option 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Option 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Option 3
</label>
</div>
{% endexample %}
#### Radio
Add `data-toggle="buttons"` to a group of radio inputs for radio style toggling on btn-group.
<div class="bs-callout bs-callout-warning">
<h4>Preselected options need <code>.active</code></h4>
<p>For preselected options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
</div>
<div class="bs-callout bs-callout-warning">
<h4>Visual checked state only updated on click</h4>
<p>If the checked state of a checkbox button is updated without firing a <code>click</code> event on the button (e.g. via <code><input type="reset"></code> or via setting the <code>checked</code> property of the input), you will need to toggle the <code>.active</code> class on the input's <code>label</code> yourself.</p>
</div>
{% highlight html %}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Option 3
</label>
</div>
{% endhighlight %}
## Usage
Enable buttons via JavaScript:
{% highlight js %}
$('.btn').button()
{% endhighlight %}
### Markup
Data attributes are integral to the button plugin. Check out the example code below for the various markup types.
### Options
*None.*
### Methods
#### $().button('toggle')
Toggles push state. Gives the button the appearance that it has been activated.
<div class="bs-callout bs-callout-info">
<h4>Auto toggling</h4>
<p>You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
</div>
{% highlight html %}
<button type="button" class="btn btn-primary" data-toggle="button">...</button>
{% endhighlight %}
#### $().button('loading')</h4>
Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute `data-loading-text`.
{% highlight html %}
<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
<script>
$('#loading-example-btn').click(function () {
var btn = $(this)
btn.button('loading')
$.ajax(...).always(function () {
btn.button('reset')
});
});
</script>
{% endhighlight %}
<div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states (disabledness and checkedness) across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
</div>
#### $().button('reset')
Resets button state - swaps text to original text.
#### $().button(string)
Resets button state - swaps text to any data defined text state.
{% highlight html %}
<button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button>
<script>
$('.btn').button('complete')
</script>
{% endhighlight %}
|
