ブートストラップボタン(ボタン)ウィジェット
中ボタン(ボタン) ブートストラップボタン章で紹介。 ボタン(ボタン)プラグインは、あなたはいくつかのような、インタラクティブなコントロールボタンの状態を追加したり、(ツールバーなど)の他のコンポーネントのためのボタンのグループを作成することができます。
あなたは、個々のプラグイン機能を参照したい場合は、button.jsを参照する必要があります。 または、 ブートストラッププラグインの概要章で述べたように、あなたはbootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照することができます。
負荷状態
ボタンの負荷状態に追加するには、単に「ロードボタン要素のデータローディング・テキスト=を追加...」そのプロパティとして缶、次の例のように:
例
<ボタン ID = "脂肪BTN」 クラス = "BTNのBTN-プライマリ」 データ・ローディング・テキスト= "読み込み中 ..."
タイプ = "ボタン"> の読み込み状態 </ button>の
<スクリプト> $(関数() {$( "。BTN」)。クリックします(関数(){$(この).button( 'ロード')。ディレイ(1000).queue(関数(){// $( この).button()「リセット」 ;});});}); </ script>の
»をお試しください
結果は以下の通りであります:
単一スイッチ
シングルボタンスイッチを有効にするには、単にデータトグル= "ボタン"その特性として、ボタンの要素を追加する(すなわち、ボタンの通常の状態は状態およびその逆を押された変更)することができ、次の例のように:
結果は以下の通りであります:
チェックボックス(チェックボックス)
あなたがチェックボックスグループを作成し、スイッチボックスのグループを追加するには、BTN-グループは = "ボタン"にデータ属性データトグルを追加することによってできます。
例
<DIV クラス = "BTN-グループ」 データトグル = "ボタン">
<ラベル クラス= "BTNのBTN-プライマリ」 >
<入力 = "チェックボックスを">を入力 オプション1 </ label>は
<ラベル クラス= "BTNのBTN-プライマリ」 >
<入力 = "チェックボックスを">を入力 オプション2 </ label>は
<ラベル クラス= "BTNのBTN-プライマリ」 >
<入力 = "チェックボックスを">を入力 オプション3 </ label>は
</ DIV>
»をお試しください
結果は以下の通りであります:
ラジオボタン(ラジオ)
同様に、あなたはラジオ・グループを作成し、ラジオボタングループを切り替えるには、BTN-グループを追加するために、データ属性データトグル= "ボタン"を追加することによってできます。
例
<DIV クラス = "BTN-グループ」 データトグル = "ボタン">
<ラベル クラス= "BTNのBTN-プライマリ」 >
<入力 タイプ = "ラジオ" 名前 = "オプション" ID = "オプション1"> オプション1 </ label>は
<ラベル クラス= "BTNのBTN-プライマリ」 >
<入力 タイプ = "ラジオ" 名前 = "オプション" ID = "オプション2"> オプション2 </ label>は
<ラベル クラス= "BTNのBTN-プライマリ」 >
<入力 タイプ = "ラジオ" 名前 = "オプション" ID = "オプション3"> オプション3 </ label>は
</ DIV>
»をお試しください
結果は以下の通りであります:
使用法
あなたは次のように、JavaScriptを介して接続ボタン(ボタン)を有効にすることができます。
$( '。BTN')。ボタン()
オプション
オプションはありません。
ウェイ
次のボタン(ボタン)のいくつかであるプラグインの便利な方法:
方法 | 描述 | 实例 |
---|---|---|
button('toggle') | 切换按压状态。赋予按钮被激活的外观。您可以使用data-toggle属性启用按钮的自动切换。 |
$().button('toggle') |
.button('loading') | 当加载时,按钮是禁用的,且文本变为 button 元素的data-loading-text属性的值。 |
$().button('loading') |
.button('reset') | 重置按钮状态,文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时,该方法非常有用。 |
$().button('reset') |
.button(string) | 该方法中的字符串是指由用户声明的任何字符串。使用该方法,重置按钮状态,并添加新的内容。 |
$().button(string) |
例
次の例では、上記の方法の使用を示しています。
例
<H2> メソッド </ H2> の効果を確認するために、各ボタンをクリックしてください
<H4> デモ.button( 'トグル')メソッド </ H4>
<DIV ID = "myButtons1" クラス = "BS-例">
<ボタン = "ボタン"を入力 クラス= "BTN BTN-プライマリ」 > 元 </ button>の
</ DIV>
<H4> デモ.button( 'ロード')メソッド </ H4>
<DIV ID = "myButtons2" クラス = "BS-例">
<ボタン = "ボタン"を入力 クラス = "BTNのBTN-プライマリ」
データ・ローディング・テキスト= "読み込み中 ..."> 元 </ button>の
</ DIV>
<H4> デモ.button(「リセット」)メソッド </ H4>
<DIV ID = "myButtons3" クラス = "BS-例">
<ボタン = "ボタン"を入力 クラス = "BTNのBTN-プライマリ」
データ・ローディング・テキスト= "読み込み中 ..."> 元 </ button>の
</ DIV>
<H4> デモ.button(文字列)メソッド </ H4>
<ボタン = "ボタン"を入力 クラス = "BTNのBTN-プライマリ」 ID = "myButton4"
データの完全なテキスト=「ロードが終わっ"> I </ button>の クリック
<スクリプト>
$(ファンクション () {$( "#MyButtons1 .btn」 )をクリックします(関数(){$(この)ボタン( 'トグル');.});.}); $(関数() {$( "#MyButtons2 .btn」 )。(関数(){$(this)をクリックしてください。ボタン(「ロード」)。ディレイ(1000)。キュー(関数() {
});});}) ; $(関数() {$( "#MyButtons3 .btn」 )。(関数(){$(this)をクリックしてください。ボタン(「ロード」)。ディレイ(1000)。キュー(関数() {$(この)ボタン( 'リセット');.});});}); $(関数() {$( "#MyButton4」) 。クリックします(関数(){$(この)。ボタン(「ロード」)。ディレイ(1000)。キュー(関数() {。$((この)ボタン '完全');});});});
</スクリプト>
»をお試しください
結果は以下の通りであります: