プラグインの概要ブートストラップ
前のセクションでは、それはほんの始まりに過ぎないアセンブリへのコンポーネントのレイアウトを議論しました。 ブートストラップは、jQueryのプラグインが機能をよりインタラクティブサイトに追加することができます拡張する12種類が付属しています。 あなたは、高度なJavaScriptの開発者でなくても、あなたはまた、ブートストラップJavaScriptのプラグインを学ぶために始めることができます。 使用ブートストラップデータAPI(ブートストラップデータAPI)、プラグインのほとんどは、任意のコードを記述せずにトリガすることができます。
サイトは、2つの方法でブートストラッププラグインを参照します:
- 単独の引用:ブートストラップの別々の*の.jsファイルを使用しています。一部のプラグインやCSSコンポーネントは、他のプラグインに依存します。 あなたは別個の基準を接続した場合、彼らはプラグイン間の依存関係を理解しておいてください。
- 使用bootstrap.jsまたはbootstrap.min.jsの圧縮バージョン:(同時に)引用をコンパイルします。
bootstrap.jsのbootstrap.min.jsはすべてのプラグインが含まれているため、これらの2つのファイルを引用しようとしないでください。
特性データ
- あなただけのJavaScriptコードを1行も記述せずに、ブートストラッププラグインAPIを属性データのすべてを使用することができる場合があります。 これは、あなたの好ましい方法であるべきで、ファーストクラスのブートストラップAPIです。
- その後、再び、いくつかのケースでは、この機能をオフにする必要があるかもしれません。 したがって、我々はまた、すなわち、データ-APIの名前空間を持ち上げ、文書イベントに結合するために、閉じられたデータ属性APIメソッドを提供します。 次のような:
$(ドキュメント).off( '。データ-API」)
- ここに示されているように、単にデータ-APIの名前空間に加えて名前空間としてウィジェットの名前の前に、特定のプラグインを閉じるには:
$(ドキュメント).off( '。Alert.data-API」)
プログラムAPI
我々は、すべてのブートストラップのプラグインのための純粋なJavaScriptのAPIへの道を提供します。 (:フォームとjQuery契約を呼び出す注)すべてのパブリックAPIコールを個別にサポートまたはモードを連鎖し、それが動作する要素の集合を返しています。 例えば:
$( "。Btn.danger」)。ボタン(「トグル」)。AddClass(「脂肪」)
すべてのメソッドは、オプションのオプションを取ることができ、次のように、(この場合には、それはデフォルトの動作用のプラグインを初期化します)パラメータ、または特定のメソッドを表す文字列として、またはパラメータなしでオブジェクト:
// $( "#myModal」)のデフォルトの動作に初期化されます。モーダル() //初期化キーボードは$( "#myModal」)モーダル({:偽キーボード})をサポートしていません。 //初期化し、すぐにショーを呼び出します $( "#MyModal」)。モーダル( 'ショー')
$ .fn.popover.Constructor:各プラグインコンストラクタ特性にも元のコンストラクタを公開しています。 あなたが特定のウィジェットのインスタンスを取得したい場合は、ページ要素を介して直接取得することができます。
$( '[のRel =ポップオーバー]')。データ(「ポップオーバー」)。
名前空間の衝突を避けます
時々、ブートストラップのプラグインは、他のUIフレームワークで使用する必要があるかもしれません。 この場合、名前空間の衝突が発生する可能性があります。 この問題が発生した場合は残念ながら、あなたは、ウィジェット.noConflictメソッドを呼び出すことにより、元の値を復元することができます。
//)(割り当てられた値のVAR bootstrapButton = $ .fn.button.noConflict前に$ .fn.buttonを返します。 // $()のために。BootstrapBtn機能は、ブートストラップを授与しました $ .fn.bootstrapBtn = BootstrapButton
イベント
ブートストラップは、ほとんどのプラグインのユニークな行動などのカスタムイベントを提供します。 一般的に、これらのイベントは、2つの形式があります。
- 不定詞:イベントが始まるときにトリガされます。このような元のように:ショー。不定詞のイベントはのpreventDefault機能を提供します。 これは、イベントが開始する前に、動作を停止することができます。
$( '#のMyModal')。オン( 'show.bs.modal'、関数(e)の{ //防ぎモーダルボックスが表示されているか(!データ)(e.preventDefaultを返します) })
- 過去分詞形:操作が完了した後、これがトリガされます。このような例:示します。