ブートストラップ-ボタンプラグイン
ボタンについては、「ブートストラップボタン」の章で説明されています。このプラグインを使用すると、コントロールボタンの状態などのインタラクションを追加したり、ツールバーなどのコンポーネント用のボタンのグループを作成したりできます。
このプラグイン機能を個別に含めたい場合は、 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">
Loading state
</button>
<script>
$(function() {
$(".btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
// $(this).button('reset');
});
});
});
</script>
ボタンをクリックすると、出力は次の画像のようになります-
シングルトグル
1つのボタンでトグルをアクティブにするには(つまり、ボタンの通常の状態をプッシュ状態に、またはその逆に変更するには)、 data-toggle = "button" 次の例に示すように、ボタン要素の属性として-
<button type = "button" class = "btn btn-primary" data-toggle = "button">
Single toggle
</button>
チェックボックス
データ属性を追加するだけで、チェックボックスのグループを作成し、それに切り替えを追加できます data-toggle = "buttons" に btn-group.
<div class = "btn-group" data-toggle = "buttons">
<label class = "btn btn-primary">
<input type = "checkbox"> Option 1
</label>
<label class = "btn btn-primary">
<input type = "checkbox"> Option 2
</label>
<label class = "btn btn-primary">
<input type = "checkbox"> Option 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"> Option 1
</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>
使用法
ボタンプラグインを有効にできます via JavaScript 以下に示すように-
$('.btn').button()
オプション
オプションはありません。
メソッド
以下に、ボタンプラグインの便利な方法のいくつかを示します-
方法 | 説明 | 例 |
---|---|---|
button( 'toggle') |
プッシュ状態を切り替えます。ボタンがアクティブになっているように見せます。を使用してボタンの自動切り替えを有効にすることもできますdata-toggle 属性。 |
|
.button( 'loading') |
ロードすると、ボタンが無効になり、テキストがからオプションに変更されます。 data-loading-text ボタン要素の属性 |
|
.button( 'reset') |
ボタンの状態をリセットし、元のコンテンツをテキストに戻します。このメソッドは、ボタンをプライマリ状態に戻す必要がある場合に役立ちます |
|
.button(string) |
このメソッドの文字列は、ユーザーが宣言した文字列を参照しています。ボタンの状態をリセットして新しいコンテンツを取り込むには、この方法を使用します。 |
|
例
次の例は、上記の方法の使用法を示しています。
<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>Example to demonstrate .button('toggle') method</h4>
<div id = "myButtons1" class = "bs-example">
<button type = "button" class = "btn btn-primary">Primary</button>
</div>
<h4>Example to demonstrate .button('loading') method</h4>
<div id = "myButtons2" class = "bs-example">
<button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
Primary
</button>
</div>
<h4>Example to demonstrate .button('reset') method</h4>
<div id = "myButtons3" class = "bs-example">
<button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
Primary
</button>
</div>
<h4>Example to demonstrate .button(string) method</h4>
<button type = "button" class = "btn btn-primary" id = "myButton4"
data-complete-text = "Loading finished">
Click Me
</button>
<script type = "text/javascript">
$(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>