Bootstrap が毎日習得すべきボタン プラグイン_JavaScript スキル

ボタンはブートストラップ ボタンの章で紹介されました。 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 要素に追加するだけです。以下の例:

コードをコピー コードは次のとおりです:

75f0f2e493f72393621fa5a1b8ec5889単一切り替え65281c5ac262bf6d81768915a4a77ac0

注: Firefox で複数のページを読み込むと、フォーム内のボタンが無効または選択されたままになることがあります。解決策は、autocomplete="off" を追加することです。

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 の詳細については、特別なトピック

Bootstrap 学習チュートリアル を参照してください。