毎日学ぶべきBootstrap jsプラグイン_JavaScriptスキル

1. Bootstrap プラグインの概要

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

2. JavaScript プラグインをインポートします

Bootstrap には、豊富な Web コンポーネントに加えて、前に紹介したドロップダウン メニュー、ボタン グループ、ナビゲーション、ページングなどが含まれています。いくつかの JavaScript プラグインも含まれています。

Bootstrap の JavaScript プラグインは、ページに個別にまたは一度にインポートできます。 Bootstrap の JavaScript プラグインはすべて jQuery ライブラリに依存しているため、個別にインポートするか一度にすべてインポートするかに関係なく、jQuery ライブラリを最初にインポートする必要があります。

1 回限りのインポート:

Bootstrap は、Bootstrap のすべての JavaScript プラグインを含む 1 つのファイル、つまり bootstrap.js (圧縮バージョン: bootstrap.min.js) を提供します。

<!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） -->
<script src="js/bootstrap.min.js"></script>

個別にインポート:

特殊効果ファイルの個別インポートを容易にするために、Bootstrap V3.2 には 12 個の JavaScript プラグインが用意されています。

☑アニメーショントランジション：対応プラグインファイル「transition.js」

☑ モーダルポップアップウィンドウ（Modal）：対応するプラグインファイル「modal.js」

☑ ドロップダウンメニュー(Dropdown): 対応するプラグインファイル「dropdown.js」

☑ スクロール検出 (Scrollspy): 対応するプラグインファイル「scrollspy.js」

☑ タブ: 対応するプラグインファイル「tab.js」

☑ ツールチップ: 対応するプラグインファイル「tooltop.js」

☑ ポップアップボックス（Popover）：対応するプラグインファイル「popover.js」

☑ 警告ボックス（アラート）：対応するプラグインファイル「alert.js」

☑ ボタン: 対応するプラグインファイル「button.js」

☑ Fold/Accordion (Collapse): 対応するプラグインファイル「collapse.js」

☑ 画像カルーセル カルーセル: 対応するプラグイン ファイル「carousel.js」

☑ ブイを自動的に見つける Affix: 対応するプラグイン ファイル "affix.js"

3. データ属性

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

また、状況によってはこの機能をオフにする必要があるかもしれません。したがって、データ属性 API をオフにする方法、つまり、イベントをデータ API 名前空間とバインド解除し、ドキュメントにバインドする方法も提供します。このように:

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

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

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

4. プログラミング API

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

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

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

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

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

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

5. 名前空間の競合を避ける

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

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

6、事件

Bootstrap 为大多数插件的独特行为提供了自定义事件。一般来说，这些事件有两种形式：
动词不定式：这会在事件开始时被触发。例如 ex: show。动词不定式事件提供了 preventDefault 功能。这使得在事件开始前可以停止操作的执行。

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

过去分词形式：这会在动作执行完毕之后被触发。例如 ex: shown。

以上就是本文的全部内容，希望对大家的学习有所帮助。