diff options
Diffstat (limited to 'docs/javascript/buttons.md')
| -rw-r--r-- | docs/javascript/buttons.md | 146 |
1 files changed, 48 insertions, 98 deletions
diff --git a/docs/javascript/buttons.md b/docs/javascript/buttons.md index b577479aa..9db269f8d 100644 --- a/docs/javascript/buttons.md +++ b/docs/javascript/buttons.md @@ -3,111 +3,88 @@ layout: page title: Buttons --- + Do more with buttons. Control button states or create groups of buttons for more components like toolbars. -## Uses +<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> -#### Stateful +## Stateful Add `data-loading-text="Loading..."` to use a loading state on a button. +<div class="bs-callout bs-callout-info"> + <h4>Use whichever state you like!</h4> + <p>For the sake of this demonstration, we are using <code>data-loading-text</code> and <code>$().button('loading')</code>, but that's not the only state you can use. <a href="#buttons-methods">See more on this below in the <code>$().button(string)</code> documentation</a>.</p> +</div> + {% example html %} -<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary"> +<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off"> Loading state </button> <script> - $('#loading-example-btn').click(function () { - var btn = $(this) - btn.button('loading') - $.ajax(...).always(function () { - btn.button('reset') - }); - }); + $('#myButton').on('click', function () { + var $btn = $(this).button('loading') + // business logic... + $btn.button('reset') + }) </script> {% endexample %} -#### Single toggle +### 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"> +<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off"> Single toggle </button> {% endexample %} -#### Checkbox +## Checkbox and radio -Add `data-toggle="buttons"` to a group of checkboxes for checkbox style toggling on btn-group. +Add `data-toggle="buttons"` to a `.btn-group` containing checkbox or radio inputs to enable toggling in their respective styles. <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> + <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> {% 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 class="bs-example"> + <div class="btn-group" data-toggle="buttons"> + <label class="btn btn-primary active"> + <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked) + </label> + <label class="btn btn-primary"> + <input type="checkbox" autocomplete="off"> Checkbox 2 + </label> + <label class="btn btn-primary"> + <input type="checkbox" autocomplete="off"> Checkbox 3 + </label> + </div> </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 %} +{% example 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) + <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected) </label> <label class="btn btn-primary"> - <input type="radio" name="options" id="option2" autocomplete="off"> Option 2 + <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2 </label> <label class="btn btn-primary"> - <input type="radio" name="options" id="option3" autocomplete="off"> Option 3 + <input type="radio" name="options" id="option3" autocomplete="off"> Radio 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.* +{% endexample %} ### Methods @@ -115,48 +92,21 @@ Data attributes are integral to the button plugin. Check out the example code be 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. +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 %} -<button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button> +<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off"> + ... +</button> <script> - $('.btn').button('complete') + $('#myStateButton').on('click', function () { + $(this).button('complete') // button text will be "finished!" + }) </script> {% endhighlight %} |