mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-24 22:16:38 +02:00
Code Issues Releases Wiki Activity

star work on bootstrap-buttons.js

Browse Source
This commit is contained in:
Jacob Thornton
2011-10-29 17:58:58 -07:00
parent 9a30b8c05d
commit e8b66a9626
2 changed files with 100 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
docs/javascript.html
View File

@@ -22,6 +22,7 @@
<script src="../js/bootstrap-dropdown.js"></script>
<script src="../js/bootstrap-scrollspy.js"></script>
<script src="../js/bootstrap-tabs.js"></script>
<script src="../js/bootstrap-buttons.js"></script>
<!-- Le styles -->
<link href="../bootstrap.css" rel="stylesheet">
@@ -48,6 +49,7 @@
<li><a href="#modal">Modals</a></li>
<li><a href="#dropdown">Dropdown</a></li>
<li><a href="#scrollspy">ScrollSpy</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#tabs">Tabs</a></li>
<li><a href="#twipsy">Twipsy</a></li>
<li><a href="#popover">Popover</a></li>
@@ -312,6 +314,54 @@ $('#my-modal').bind('hidden', function () {
</div>
</section>
<!-- Tabs
================================================== -->
<section id="buttons">
<div class="page-header">
<h1>Buttons <small>bootstrap-buttons.js</small></h1>
</div>
<div class="row">
<div class="span4 columns">
<p>This plugin offers additional functionality for managing button state.</p>
<a href="../js/bootstrap-buttons.js" target="_blank" class="btn primary">Download</a>
</div>
<div class="span12 columns">
<h3>Using bootstrap-buttons.js</h3>
<pre class="prettyprint linenums">$('.tabs').button()</pre>
<h3>Markup</h3>
<p>You can leverage bootstraps button toggle helper without writing any javascript by using the <code>data-toggle</code> attribute.</p>
<pre class="prettyprint linenums">&lt;button class="btn" data-toggle="toggle" &gt;...&lt;/button&gt;</pre>
<h3>Methods</h3>
<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>
<pre class="prettyprint linenums">&lt;button class="btn" data-loading-text="loading stuff..." &gt;...&lt;/button&gt;</pre>
<h4>$().button('reset')</h4>
<p>Resets button state - swaps text to original text.</p>
<h4>$().button(string)</h4>
<p>Resets button state - swaps text to any data defined text state.</p>
<pre class="prettyprint linenums">&lt;button class="btn" data-complete-text="finished!" &gt;...&lt;/button&gt;
&lt;script&gt;
$('.btn').button('complete')
&lt;/scrip&gt;</pre>
<h3>Demo</h3>
<button id="fat-btn" class="btn danger">Click me</button>
<script>
$(function() {
var btn = $('#fat-btn').click(function () {
btn.button('loading')
setTimeout(function () {
btn.button('reset')
}, 3000)
})
})
</script>
</div>
</div>
</section>
<!-- Tabs
================================================== -->