diff --git a/Gruntfile.js b/Gruntfile.js index 48dcf7fea5..33eaa11da1 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -341,7 +341,8 @@ module.exports = function (grunt) { relaxerror: [ 'Bad value X-UA-Compatible for attribute http-equiv on element meta.', 'Element img is missing required attribute src.', - 'Attribute autocomplete not allowed on element input at this point.' + 'Attribute autocomplete not allowed on element input at this point.', + 'Attribute autocomplete not allowed on element button at this point.' ] }, files: { diff --git a/docs/_includes/js/buttons.html b/docs/_includes/js/buttons.html index a8f2ffc267..f07e716c8a 100644 --- a/docs/_includes/js/buttons.html +++ b/docs/_includes/js/buttons.html @@ -1,169 +1,134 @@
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
- -Add data-loading-text="Loading..."
to use a loading state on a button.
Add data-toggle="button"
to activate toggling on a single button.
Add data-toggle="buttons"
to a group of checkboxes for checkbox style toggling on btn-group.
.active
For pre-checked options, you must add the .active
class to the input's label
yourself.
If the checked state of a checkbox button is updated without firing a click
event on the button (e.g. via <input type="reset">
or via setting the checked
property of the input), you will need to toggle the .active
class on the input's label
yourself.
Add data-toggle="buttons"
to a group of radio inputs for radio style toggling on btn-group.
.active
For preselected options, you must add the .active
class to the input's label
yourself.
If the checked state of a radio button is updated without firing a click
event on the button (e.g. via <input type="reset">
or via setting the checked
property of the input), you will need to toggle the .active
class on the input's label
yourself.
Enable buttons via JavaScript:
-{% highlight js %} -$('.btn').button() -{% endhighlight %} - -Data attributes are integral to the button plugin. Check out the example code below for the various markup types.
- -None
- -Toggles push state. Gives the button the appearance that it has been activated.
-You can enable auto toggling of a button by using the data-toggle
attribute.
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
.
-
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
Firefox persists form control states (disabledness and checkedness) across page loads. A workaround for this is to use autocomplete="off"
.
Add data-loading-text="Loading..."
to use a loading state on a button.
For the sake of this demonstration, we are using data-loading-text
and $().button('loading')
, but that's not the only state you can use. See more on this below in the $().button(string)
documentation.
Add data-toggle="button"
to activate toggling on a single button.
Add data-toggle="buttons"
to a .btn-group
containing checkbox or radio inputs to enable toggling in their respective styles.
.active
For preselected options, you must add the .active
class to the input's label
yourself.
If the checked state of a checkbox button is updated without firing a click
event on the button (e.g. via <input type="reset">
or via setting the checked
property of the input), you will need to toggle the .active
class on the input's label
yourself.
Toggles push state. Gives the button the appearance that it has been activated.
+Resets button state - swaps text to original text.
Resets button state - swaps text to any data defined text state.
+Swaps text to any data defined text state.
{% highlight html %} - + + {% endhighlight %}