ブートストラップ ボタン (ボタン) プラグイン
ボタンは「ブートストラップ ボタン」の章で紹介されました。Button プラグインを使用すると、ボタンの状態の制御などのインタラクションを追加したり、他のコンポーネント (ツールバーなど) のボタン グループを作成したりできます。
注: このプラグインの機能を個別に参照したい場合は、button.js を参照する必要があります。あるいは、「ブートストラップ プラグインの概要」の章で説明したように、bootstrap.js または bootstrap.min.js の縮小バージョンを参照することもできます。
積載状況
ボタンに読み込み状態を追加するには、次の例に示すように、属性として 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>
結果は次のようになります。
シングルスイッチ
単一のボタンのトグルをアクティブにするには (つまり、ボタンの通常の状態を押された状態に変更したり、その逆に変更したりする)、次の例に示すように、ボタン要素に属性として data-toggle="button" を追加するだけです。
<button type="button" class="btn btn-primary"
data-toggle="button"> 单个切换
</button>
結果は次のようになります。
チェックボックス (チェックボックス)
データ属性 data-toggle="buttons" を btn-group に追加することで、チェックボックス グループを作成し、チェックボックス グループのトグルを追加できます。
<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>
結果は次のようになります。
ラジオボタン（ラジオ）
同様に、データ属性 data-toggle="buttons" を btn-group に追加することで、ラジオ ボタン グループを作成し、ラジオ ボタン グループのトグルを追加できます。
<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 プラグインの便利なメソッドをいくつか紹介します。
| 方法 | 説明 | 例 |
|---|---|---|
| ボタン('トグル') | 押された状態を切り替えます。ボタンがアクティブになっているように見えます。data-toggle 属性を使用して、ボタンの自動切り替えを有効にすることができます。 | $().button('toggle') |
| .button('ロード中') | ロード中、ボタンは無効になり、テキストはボタン要素の data-loading-text 属性の値になります。 | $().button('loading') |
| .button('リセット') | ボタンの状態をリセットすると、テキストの内容が元の内容に戻ります。この方法はボタンを元の状態に戻したい場合に便利です。 | $().button('reset') |
| .button(文字列) | このメソッドの文字列は、ユーザーが宣言した任意の文字列を指します。このメソッドを使用すると、ボタンの状態がリセットされ、新しいコンテンツが追加されます。 | $().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>
結果は次のようになります。
