ボタンはブートストラップ ボタンの章で紹介されました。 Button プラグインを使用すると、ボタンの状態の制御などの操作を追加したり、他のコンポーネント (ツールバーなど) のボタン グループを作成したりできます。
このプラグインの機能を個別に参照したい場合は、button.js を参照する必要があります。また、ブートストラップ プラグインの概要 の章で説明したように、bootstrap.js または bootstrap.min.js の縮小バージョンを参照することもできます。
1. 読み込み状況
ボタンに読み込みステータスを追加するには、以下の例に示すように、属性として 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'); }); }); }); </script>
2. シングルスイッチング
単一のボタンの切り替えをアクティブにするには (つまり、ボタンの通常の状態を押された状態に、またはその逆に変更します)、次のように、属性として data-toggle="button" を button 要素に追加するだけです。以下の例:
3. ラジオボタン
同様に、ラジオ ボタン グループを作成し、データ属性 data-toggle="buttons" を btn-group に追加することで、ラジオ ボタン グループのトグルを追加できます。
<div class="btn-group" data-toggle="buttons"> <label for="" class="btn btn-primary active"> <input type="radio" name="sex" autocomplete="off" checked>男 </label> <label for="" class="btn btn-primary"> <input type="radio" name="sex" autocomplete="off">女 </label> </div>
4. チェックボタン
データ属性 data-toggle="buttons" を btn-group に追加することで、チェックボックス グループを作成し、チェックボックス グループのトグルを追加できます。
<div class="btn-group" data-toggle="buttons"> <label for="" class="btn btn-primary active"> <input type="checkbox" name="fa" autocomplete="off" checked> 音乐 </label> <label for="" class="btn btn-primary"> <input type="checkbox" name="fa" autocomplete="off"> 体育 </label> <label for="" class="btn btn-primary"> <input type="checkbox" name="fa" autocomplete="off"> 美术 </label> <label for="" class="btn btn-primary"> <input type="checkbox" name="fa" autocomplete="off"> 电脑 </label> </div>
Button プラグインの button メソッドには、toggle、reset、string (loading、complete など) の 3 つのパラメータがあります。
//可代替 data-toggle="button" $('button').on('click', function() { $(this).button('toggle'); })
ボタン プラグインの便利なメソッドをいくつか紹介します:
上記がこの記事の全内容です。Bootstrap の詳細については、特別なトピック