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

Buttons button.js

-

Example uses

-

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

- -

Stateful

-

Add data-loading-text="Loading..." to use a loading state on a button.

-
- -
-{% highlight html %} - - -{% endhighlight %} - -

Single toggle

-

Add data-toggle="button" to activate toggling on a single button.

-
- -
-{% highlight html %} - -{% endhighlight %} - -

Checkbox

-

Add data-toggle="buttons" to a group of checkboxes for checkbox style toggling on btn-group.

-
-

Pre-checked options need .active

-

For pre-checked options, you must add the .active class to the input's label yourself.

-
-
-

Visual checked state only updated on click

-

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.

-
-
-
- - - -
-
-{% highlight html %} -
- - - -
-{% endhighlight %} - -

Radio

-

Add data-toggle="buttons" to a group of radio inputs for radio style toggling on btn-group.

-
-

Preselected options need .active

-

For preselected options, you must add the .active class to the input's label yourself.

-
-
-

Visual checked state only updated on click

-

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.

-
-
-
- - - -
-
-{% highlight html %} -
- - - -
-{% 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.

-
-

Auto toggling

-

You can enable auto toggling of a button by using the data-toggle attribute.

-
-{% highlight html %} - -{% endhighlight %} - -

$().button('loading')

-

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 %} - - -{% endhighlight %} +

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Cross-browser compatibility

Firefox persists form control states (disabledness and checkedness) across page loads. A workaround for this is to use autocomplete="off".

+

Stateful

+

Add data-loading-text="Loading..." to use a loading state on a button.

+
+

Use whichever state you like!

+

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.

+
+
+ +
+{% highlight html %} + + + +{% endhighlight %} + +

Single toggle

+

Add data-toggle="button" to activate toggling on a single button.

+
+ +
+{% highlight html %} + +{% endhighlight %} + +

Checkbox / Radio

+

Add data-toggle="buttons" to a .btn-group containing checkbox or radio inputs to enable toggling in their respective styles.

+
+

Preselected options need .active

+

For preselected options, you must add the .active class to the input's label yourself.

+
+
+

Visual checked state only updated on click

+

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.

+
+
+
+ + + +
+
+{% highlight html %} +
+ + + +
+{% endhighlight %} + +
+
+ + + +
+
+{% highlight html %} +
+ + + +
+{% endhighlight %} + +

Methods

+ +

$().button('toggle')

+

Toggles push state. Gives the button the appearance that it has been activated.

+

$().button('reset')

Resets button state - swaps text to original text.

$().button(string)

-

Resets button state - swaps text to any data defined text state.

+

Swaps text to any data defined text state.

{% highlight html %} - + + {% endhighlight %}
diff --git a/docs/_includes/nav/javascript.html b/docs/_includes/nav/javascript.html index bab188ef1f..3459bb1e4c 100644 --- a/docs/_includes/nav/javascript.html +++ b/docs/_includes/nav/javascript.html @@ -65,8 +65,10 @@
  • Button