rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

markdownify js buttons

Browse Source
This commit is contained in:
Mark Otto 2014-07-13 00:54:10 -07:00
parent 5a823fba7e
commit 35a98bc4f8
1 changed files with 72 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
docs/javascript/buttons.md
View File

@ -3,20 +3,15 @@ layout: page
title: Buttons
---
<div class="bs-docs-section">
<h1 id="buttons" class="page-header">Buttons <small>button.js</small></h1>
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
<h2 id="buttons-examples">Example uses</h2>
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
## Uses
<h4>Stateful</h4>
<p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
<div class="bs-example" style="padding-bottom: 24px;">
<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
Loading state
</button>
</div><!-- /example -->
{% highlight html %}
#### 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>
@ -29,37 +24,28 @@ title: Buttons
});
});
</script>
{% endhighlight %}
{% endexample %}
<h4>Single toggle</h4>
<p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>
<div class="bs-example" style="padding-bottom: 24px;">
<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
</div><!-- /example -->
{% highlight html %}
<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
{% endhighlight %}
#### Single toggle
<h4>Checkbox</h4>
<p>Add <code>data-toggle="buttons"</code> to a group of checkboxes for checkbox style toggling on btn-group.</p>
<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-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked> Option 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 3
</label>
</div>
</div><!-- /example -->
{% highlight html %}
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>
{% example html %}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked> Option 1 (pre-checked)
@ -71,27 +57,17 @@ title: Buttons
<input type="checkbox"> Option 3
</label>
</div>
{% endhighlight %}
{% 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>
<h4>Radio</h4>
<p>Add <code>data-toggle="buttons"</code> to a group of radio inputs for radio style toggling on btn-group.</p>
<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-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
</div><!-- /example -->
{% highlight html %}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
@ -107,33 +83,41 @@ title: Buttons
{% endhighlight %}
<h2 id="buttons-usage">Usage</h2>
<p>Enable buttons via JavaScript:</p>
## Usage
Enable buttons via JavaScript:
{% highlight js %}
$('.btn').button()
{% endhighlight %}
<h3>Markup</h3>
<p>Data attributes are integral to the button plugin. Check out the example code below for the various markup types.</p>
### Markup
<h3>Options</h3>
<p><em>None</em></p>
Data attributes are integral to the button plugin. Check out the example code below for the various markup types.
<h3>Methods</h3>
### 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>
<h4>$().button('toggle')</h4>
<p>Toggles push state. Gives the button the appearance that it has been activated.</p>
<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 %}
<h4>$().button('loading')</h4>
<p>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 <code>data-loading-text</code>.
</p>
#### $().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>
@ -147,20 +131,22 @@ $('.btn').button()
</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 across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
</div>
<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 across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
</div>
<h4>$().button('reset')</h4>
<p>Resets button state - swaps text to original text.</p>
#### $().button('reset')
Resets button state - swaps text to original text.
#### $().button(string)
Resets button state - swaps text to any data defined text state.
<h4>$().button(string)</h4>
<p>Resets button state - swaps text to any data defined text state.</p>
{% highlight html %}
<button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button>
<script>
$('.btn').button('complete')
</script>
{% endhighlight %}
</div>