Bootstrapプラグイン_JavaScriptスキルの詳細説明

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

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

別のリファレンス: Bootstrap の個別の *.js ファイルを使用します。一部のプラグインと CSS コンポーネントは他のプラグインに依存します。プラグインを個別に参照する場合は、最初にそれらのプラグイン間の依存関係を必ず確認してください。
参照をコンパイルします。bootstrap.js または bootstrap.min.js の縮小バージョンを使用します。
「bootstrap.js と bootstrap.min.js の両方にすべてのプラグインが含まれているため、両方のファイルを同時に参照しないでください。」

1. データ属性 JavaScript コードを 1 行も記述することなく、データ属性 API を介してすべての Bootstrap プラグインを使用できます。これは Bootstrap のファーストクラス API であり、最初に選択する必要があります。
ただし、場合によっては、この機能をオフにする必要がある場合もあります。したがって、データ属性 API をオフにする方法、つまり、イベントをデータ API 名前空間とバインド解除し、ドキュメントにバインドする方法も提供します。このように:

$(document).off('.data-api')
特定のプラグインを閉じる必要がある場合は、以下に示すように、data-api 名前空間の前にプラグインの名前を名前空間として追加するだけです。
$(document).off('.alert.data-api')

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

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

// 初始化为默认行为
$("#myModal").modal()  
 // 初始化为不支持键盘       
$("#myModal").modal({ keyboard: false }) 
// 初始化并立即调用 show
$("#myModal").modal('show') 

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

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

// 返回 $.fn.button 之前所赋的值
var bootstrapButton = $.fn.button.noConflict()
// 为 $().bootstrapBtn 赋予 Bootstrap 功能             
$.fn.bootstrapBtn = bootstrapButton      

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

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

$('#myModal').on('show.bs.modal', function (e) {
// 阻止模态框的显示
 if (!data) return e.preventDefault()
})

過去分詞形: これは、アクションの実行後にトリガーされます。たとえば、次のようになります。