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

WBOY
リリース: 2016-05-16 15:04:09
オリジナル
1681 人が閲覧しました

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

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

注: 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 学習チュートリアル を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!