Bootstrap 按钮（Button）插件
ボタン（Button）はBootstrap 按钮第1章で紹介しました。ボタン（Button）プラグインを使用すると、ボタンの状態を制御したり、他のコンポーネント（ツールバーなど）用のボタングループを作成するなどのインタラクションを追加できます。
加载状态
ボタンにローディング状態を追加するには、button要素に追加するだけです。data-loading-text="Loading..."その属性として指定するだけで、以下の例のようになります。
实例
<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..."
type="button">加载状态</button>
<script>
$(function() {
$(".btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
// $(this).button('reset');
// $(this).dequeue();
});
});
});
</script>
尝试一下 »
結果は以下の通りです：
单个切换
単一のボタンのトグル（つまり、ボタンの通常状態を押下状態に変更し、その逆も同様）を有効にするには、button要素に追加するだけでdata-toggle="button"その属性として指定するだけで、以下の例のようになります。
結果は以下の通りです：
チェックボックス（Checkbox）
チェックボックスグループを作成し、それに対してbtn-groupdata 属性を追加してdata-toggle="buttons"チェックボックスグループの切り替えを有効にします。
实例
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox">选项 1</label>
<label class="btn btn-primary">
<input type="checkbox">选项 2</label>
<label class="btn btn-primary">
<input type="checkbox">选项 3</label>
</div>
尝试一下 »
結果は以下の通りです：
ラジオボタン（Radio）
同様に、ラジオボタングループを作成し、...に追加することでbtn-groupdata 属性を追加してdata-toggle="buttons"ラジオボタングループの切り替えを有効にします。
实例
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1">选项 1</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2">选项 2</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3">选项 3</label>
</div>
尝试一下 »
結果は以下の通りです：
用法
您可以通过 JavaScriptボタン（Button）プラグインを有効にするには、次のようにします。
$('.btn').button()
选项
没有选项。
方法
以下は、ボタン（Button）プラグインで役立つメソッドです。
| 方法 | 描述 | 实例 |
|---|---|---|
| button('toggle') | 押下状態を切り替えます。ボタンにアクティブ化された外観を与えます。使用できます。data-toggle属性はボタンの自動切り替えを有効にします。 |
$().button('toggle') |
| .button('loading') | ロード中は、ボタンは無効になり、テキストはbutton要素の...に変わります。data-loading-text属性の値。 |
$().button('loading') |
| .button('reset') | ボタンの状態をリセットし、テキストコンテンツを最初の内容に戻します。ボタンを元の状態に戻したい場合、このメソッドは非常に便利です。 |
$().button('reset') |
| .button(string) | このメソッド内の文字列は、ユーザーが宣言した任意の文字列を指します。このメソッドを使用すると、ボタンの状態をリセットし、新しいコンテンツを追加します。 |
$().button(string) |
实例
以下の例は、上記の方法の使い方を示しています。
实例
<h2>点击每个按钮查看方法效果</h2>
<h4>演示 .button('toggle') 方法</h4>
<div id="myButtons1" class="bs-example">
<button type="button" class="btn btn-primary">原始</button>
</div>
<h4>演示 .button('loading') 方法</h4>
<div id="myButtons2" class="bs-example">
<button type="button" class="btn btn-primary"
data-loading-text="Loading...">原始</button>
</div>
<h4>演示 .button('reset') 方法</h4>
<div id="myButtons3" class="bs-example">
<button type="button" class="btn btn-primary"
data-loading-text="Loading...">原始</button>
</div>
<h4>演示 .button(string) 方法</h4>
<button type="button" class="btn btn-primary" id="myButton4"
data-complete-text="Loading finished">请点击我</button>
<script>
$(function () {
$("#myButtons1 .btn").click(function(){
$(this).button('toggle');
});
});
$(function() {
$("#myButtons2 .btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
});
});
});
$(function() {
$("#myButtons3 .btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('reset');
});
});
});
$(function() {
$("#myButton4").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('complete');
});
});
});
</script>
尝试一下 »
結果は以下の通りです：
