Skip to content
GitLab
Commit 35a98bc4 authored by Mark Otto's avatar Mark Otto
Browse files

markdownify js buttons

parent 5a823fba
Hide whitespace changes
Inline Side-by-side
Showing
with 74 additions and 88 deletions
+74 -88
docs/javascript/buttons.md
+ 74
- 88
View file @ 35a98bc4
...@@ -3,20 +3,15 @@ layout: page ...@@ -3,20 +3,15 @@ layout: page
title: Buttons title: Buttons
--- ---
<div class="bs-docs-section"> Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
<h1 id="buttons" class="page-header">Buttons <small>button.js</small></h1>
## Uses
<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> #### Stateful
<h4>Stateful</h4> Add `data-loading-text="Loading..."` to use a loading state on a button.
<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;"> {% example html %}
<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
Loading state
</button>
</div><!-- /example -->
{% highlight html %}
<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary"> <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
Loading state Loading state
</button> </button>
...@@ -29,37 +24,28 @@ title: Buttons ...@@ -29,37 +24,28 @@ title: Buttons
}); });
}); });
</script> </script>
{% endhighlight %} {% endexample %}
<h4>Single toggle</h4> #### Single toggle
<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 %}
<h4>Checkbox</h4> Add `data-toggle="button"` to activate toggling on a single button.
<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"> {% example html %}
<h4>Pre-checked options need <code>.active</code></h4> <button type="button" class="btn btn-primary" data-toggle="button">
<p>For pre-checked options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p> Single toggle
</div> </button>
<div class="bs-example" style="padding-bottom: 24px;"> {% endexample %}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active"> #### Checkbox
<input type="checkbox" checked> Option 1 (pre-checked)
</label> Add `data-toggle="buttons"` to a group of checkboxes for checkbox style toggling on btn-group.
<label class="btn btn-primary">
<input type="checkbox"> Option 2 <div class="bs-callout bs-callout-warning">
</label> <h4>Pre-checked options need <code>.active</code></h4>
<label class="btn btn-primary"> <p>For pre-checked options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
<input type="checkbox"> Option 3 </div>
</label>
</div> {% example html %}
</div><!-- /example -->
{% highlight html %}
<div class="btn-group" data-toggle="buttons"> <div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active"> <label class="btn btn-primary active">
<input type="checkbox" checked> Option 1 (pre-checked) <input type="checkbox" checked> Option 1 (pre-checked)
...@@ -71,27 +57,17 @@ title: Buttons ...@@ -71,27 +57,17 @@ title: Buttons
<input type="checkbox"> Option 3 <input type="checkbox"> Option 3
</label> </label>
</div> </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 %} {% highlight html %}
<div class="btn-group" data-toggle="buttons"> <div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active"> <label class="btn btn-primary active">
...@@ -107,33 +83,41 @@ title: Buttons ...@@ -107,33 +83,41 @@ title: Buttons
{% endhighlight %} {% endhighlight %}
<h2 id="buttons-usage">Usage</h2> ## Usage
<p>Enable buttons via JavaScript:</p>
Enable buttons via JavaScript:
{% highlight js %} {% highlight js %}
$('.btn').button() $('.btn').button()
{% endhighlight %} {% endhighlight %}
<h3>Markup</h3> ### Markup
<p>Data attributes are integral to the button plugin. Check out the example code below for the various markup types.</p>
Data attributes are integral to the button plugin. Check out the example code below for the various markup types.
### Options
*None.*
### Methods
<h3>Options</h3> #### $().button('toggle')
<p><em>None</em></p>
<h3>Methods</h3> 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 %} {% highlight html %}
<button type="button" class="btn btn-primary" data-toggle="button">...</button> <button type="button" class="btn btn-primary" data-toggle="button">...</button>
{% endhighlight %} {% endhighlight %}
<h4>$().button('loading')</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> 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 %} {% highlight html %}
<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button> <button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
<script> <script>
...@@ -147,20 +131,22 @@ $('.btn').button() ...@@ -147,20 +131,22 @@ $('.btn').button()
</script> </script>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout bs-callout-danger"> <div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4> <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> <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>
<h4>$().button('reset')</h4> #### $().button('reset')
<p>Resets button state - swaps text to original text.</p>
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 %} {% highlight html %}
<button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button> <button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button>
<script> <script>
$('.btn').button('complete') $('.btn').button('complete')
</script> </script>
{% endhighlight %} {% endhighlight %}
</div>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment