From 8b93787fd272ca270615fee00f269c504cb53fa7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 17 Apr 2015 14:11:08 -0700 Subject: move all JS buttons docs to regular buttons docs page, rewrite the callouts and some docs verbage --- docs/javascript/buttons.md | 124 --------------------------------------------- 1 file changed, 124 deletions(-) delete mode 100644 docs/javascript/buttons.md (limited to 'docs/javascript') diff --git a/docs/javascript/buttons.md b/docs/javascript/buttons.md deleted file mode 100644 index 2a8e4ccd1..000000000 --- a/docs/javascript/buttons.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -layout: page -title: Buttons ---- - - -Do more with buttons. Control button states or create groups of buttons for more components like toolbars. - -{% callout danger %} -#### Cross-browser compatibility - -[Firefox persists form control states (disabledness and checkedness) across page loads](https://github.com/twbs/bootstrap/issues/793). A workaround for this is to use `autocomplete="off"`. See [Mozilla bug #654072](https://bugzilla.mozilla.org/show_bug.cgi?id=654072). -{% endcallout %} - - -## Stateful - -Add `data-loading-text="Loading..."` to use a loading state on a button. - -{% callout info %} -#### 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](#buttons-methods). -{% endcallout %} - -{% example html %} - - -{% endexample %} - -### Single toggle - -Add `data-toggle="button"` to activate toggling on a single button. - -{% example html %} - -{% endexample %} - -{% callout warning %} -#### Pre-toggled buttons need `.active` and `aria-pressed="true"` - -For pre-toggled buttons, you must add the `.active` class and the `aria-pressed="true"` attribute to the `button` yourself. -{% endcallout %} - -## Checkbox and radio - -Add `data-toggle="buttons"` to a `.btn-group` containing checkbox or radio inputs to enable toggling in their respective styles. - -{% callout warning %} -#### Preselected options need `.active` - -For preselected options, you must add the `.active` class to the input's `label` yourself. -{% endcallout %} - -{% callout warning %} -#### 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 `` or via setting the `checked` property of the input), you will need to toggle the `.active` class on the input's `label` yourself. -{% endcallout %} - -{% example html %} -
-
- - - -
-
-{% endexample %} - -{% example html %} -
- - - -
-{% endexample %} - -### 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) - -Swaps text to any data defined text state. - -{% highlight html %} - - -{% endhighlight %} -- cgit v1.2.3