ブートストラップ プラグインの概要


前のレイアウトコンポーネントの章で説明したコンポーネントはほんの始まりにすぎません。 Bootstrap には、機能を拡張し、サイトに対話性を追加する 12 個の jQuery プラグインが付属しています。高度な JavaScript 開発者でなくても、Bootstrap の JavaScript プラグインの学習を始めることができます。 Bootstrap Data API を使用すると、ほとんどのプラグインはコードを記述せずにトリガーできます。

サイトで Bootstrap プラグインを参照するには 2 つの方法があります:

  • 個別の参照: Bootstrap の個別の *.js ファイルを使用します。一部のプラグインと CSS コンポーネントは他のプラグインに依存します。プラグインを個別に参照する場合は、まずそれらのプラグイン間の依存関係を必ず理解してください。

    リファレンスをコンパイル (同時に) : bootstrap.js または bootstrap.min.js の縮小バージョンを使用します。

    bootstrap.js と bootstrap.min.js の両方にすべてのプラグインが含まれているため、両方のファイルを同時に参照しないでください。
すべてのプラグインは jQuery に依存します。したがって、jQuery はプラグイン ファイルの前に引用符で囲む必要があります。 Bootstrap で現在サポートされている jQuery のバージョンを確認するには、bower.json にアクセスしてください。

data 属性

  • JavaScript コードを 1 行も記述することなく、data 属性 API を介してすべての Bootstrap プラグインを使用できます。これは Bootstrap のファーストクラス API であり、最初に選択する必要があります。

  • ただし、場合によっては、この機能をオフにする必要がある場合もあります。したがって、データ属性 API をオフにする方法、つまり、data-api 名前空間を使用してドキュメントにバインドされているイベントのブロックを解除する方法も提供します。次のようになります。

$(document).off('.data-api')

  • 特定のプラグインをオフにする必要がある場合は、その前にプラグインを追加するだけです。 data-api 名前空間 以下に示すように、名前は名前空間として使用できます:

$(document).off('.alert.data-api')

プログラム API

純粋な JavaScript を提供します。 API。すべてのパブリック API は、個別またはチェーン呼び出しメソッドをサポートし、それらが操作する要素のコレクションを返します (注: 呼び出し形式は jQuery と一貫しています)。例:

$(".btn.danger").button("toggle").addClass("fat")

すべてのメソッドは、以下に示すように、オプションのオプション オブジェクトをパラメータとして、または特定のメソッドを表す文字列として、またはパラメータなしで受け入れることができます (この場合、プラグインはデフォルトの動作に初期化されます)。

// Initializedデフォルトの動作に戻す
$("#myModal").modal()
// キーボードをサポートしないように初期化
$("#myModal").modal({キーボード: false })
// 初期化されてすぐに show を呼び出す
$("#myModal").modal('show')

すべてのプラグインは、Constructor 属性で元のコンストラクターも公開します: $.fn.popover.Constructor。特定のプラグインのインスタンスを取得したい場合は、ページ要素から直接取得できます:

$('[rel=popover]').data('popover').

名前空間の競合を回避します

場合によっては、Bootstrap プラグインを他の UI フレームワークで使用する必要がある場合があります。この場合、名前空間の競合が発生する可能性があります。残念ながらこれが発生した場合は、プラグインの .noConflict メソッドを呼び出すことで元の値を復元できます。

// $.fn.button に割り当てられた値を返します
var bootstrapButton = $.fn.button.noConflict()
// $().bootstrapBtn にブートストラップ関数を与えます
$.fn.bootstrapBtn = ton

イベント

Bootstrap は、ほとんどのプラグインの固有の動作にカスタム イベントを提供します。一般に、これらのイベントには 2 つの形式があります:

  • 動詞不定詞: これはイベントの開始時にトリガーされます。たとえば、例: show。不定詞イベントは preventDefault 関数を提供します。これにより、イベントが開始される前にオペレーションの実行を停止することができます。

$('#myModal').on('show.bs.modal', function (e) {
// モーダルボックスの表示を禁止します
if (!data) return e.preventDefault()
})

  • 過去分詞形: これは、アクションの実行後にトリガーされます。たとえば、例: 表示。