Bootstrap プラグインの導入と使用

ブートストラップ プラグインの概要
前のレイアウト コンポーネントの章で説明したコンポーネントはほんの始まりにすぎません。 Bootstrap に付属する 12 個の jQuery プラグインには拡張機能があり、サイトにさらに多くのインタラクションを追加できます。上級の js 開発者でなくても、
Bootstrap の js プラグインを学ぶことができます。 Bootstrap Data API を使用すると、ほとんどのプラグインはコードを記述せずにトリガーできます。
サイトでブートストラップ プラグインを参照するには 2 つの方法があります:
個別参照: Bootstrap の個別の *.js ファイルを使用します。一部のプラグインと CSS コンポーネントは他のプラグインに依存します。プラグインを個別に参照する場合は、最初にそれらのプラグイン間の依存関係を必ず把握してください。
参照を (同時に) コンパイルする: Bootstrap.js または bootstrap.min.js の圧縮バージョンを使用します。 bootstrap.js と bootstrap.min.js の両方にすべてのプラグインが含まれているため、両方のファイルを同時に参照しないでください。
すべてのプラグインは jQuery に依存します。したがって、jQuery はプラグイン ファイルの前に引用する必要があります。boostrap で現在サポートされている jQuery のバージョンを確認するには、bower.json にアクセスしてください。
データ属性
JavaScript コードを 1 行も記述することなく、データ属性 API を介してすべてのブートスタップ プラグインを使用できます。これはブートストラップのファーストクラス API であり、推奨されるメソッドです。
ただし、状況によってはこの機能をオフにする必要がある場合があります。したがって、データ属性 API をオフにする、つまり、data-API 名前空間を使用してドキュメントにバインドされたイベントのブロックを解除するメソッドも提供します。次のようになります:
$(document).off('.data-api')
特定のプラグインをオフにする必要がある場合は、そのプラグインの名前を名前空間としてそのプラグインの前に追加するだけです。 data-api 名前空間。以下に示すように:
$(document).off('.alert.data-api')
プログラム API
すべての Bootstrap プラグインに純粋な JavaScript API を提供します。すべてのパブリック API は、個別またはチェーン呼び出しメソッドをサポートし、すべての操作の要素のコレクションを返します (注: 呼び出し形式は jQuery と一貫しています)。
$('.btn.danger').button('toggle').addClass('fat')

Import

【ワンタイムインポート】

Bootstrap は、Bootstrap All JavaScript プラグを含む 1 つのファイルを提供します-ins、すなわち bootstrap.js (圧縮版: bootstrap.min.js)

【個別インポート】

特殊効果ファイルの個別インポートを容易にするために、Bootstrap は 12 種類の JavaScript プラグインを提供しています。 ☑アニメーショントランジション：対応するプラグインファイル「transition.js」

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

☑ドロップダウンメニュー（Dropdown）：対応するプラグイン-inファイル「dropdown.js」

☑ スクロール検知（Scrollspy）：対応するプラグインファイル「scrollspy.js」

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

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

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

☑ アラートボックス(Alert): 対応するプラグインファイル「alert.js」

☑ Buttons : 対応プラグインファイル「button.js」

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

☑ 画像カルーセル Carousel : 対応プラグインファイル "carousel.js" 内

☑ 自動測位ブイ Affix: 対応するプラグイン ファイル "affix.js"

データ属性

行を書かずにデータ属性 API だけですべての Bootstrap プラグインを使用できますJavaScript コードの。これはブートストラップのファーストクラス API であり、推奨されるアプローチです。

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

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

data-api 为命名空间并绑定在文档上的事件。就像下面这样：

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

　　另外，如果是针对某个特定的插件，只需在 data-api さらに、特定のプラグイン用の場合は、次のように data-api の前に名前空間としてプラグインの名前を追加するだけです。 :

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

API

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

$('#myModal').modal()                      // 以默认值初始化$('#myModal').modal({ keyboard: false })   // initialized with no keyboard$('#myModal').modal('show')                // 初始化后立即调用 show 方法

すべてのメソッドは、オプションのオプション オブジェクトをパラメータとして受け入れることができ、または、特定のメソッドを指定するか、何も指定しません (この場合、プラグインはデフォルト値で初期化されます)

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false

　　每个插件还通过 Constructor 属性暴露了其原始的构造函数：$.fn.popover.Constructor。如果想获取某个插件的实例，可以直接通过页面元素获取：$('[rel="popover"]').data('popover')

【默认设置】

　　每个插件都可以通过修改其自身的 Constructor.DEFAULTS 对象从而改变插件的默认设置：

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false

【避免命名空间冲突】

　　某些时候可能需要将 Bootstrap 插件与其他 UI 框架共同使用。在这种情况下，命名空间冲突随时可能发生。如果不幸发生了这种情况，可以通过调用插件的 .noConflict 方法恢复其原始值

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

【事件】

　　Bootstrap 为大部分插件所具有的动作提供了自定义事件。一般来说，这些事件都有不定式和过去式两种动词的命名形式，例如，不定式形式的动词（例如 show）表示其在事件开始时被触发；而过去式动词(如shown)表示在动作执行完毕之后被触发。

　　所有 Bootstrap 事件的名称都采用命名空间方式。所有以不定式形式的动词命名的事件都提供了 preventDefault 功能。这就赋予在动作开始执行前将其停止的能力

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

 

过渡效果

　　Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法：

　　☑ 调用统一编译的bootstrap.js；

　　☑ 调用单一的过渡动画的JavaScript插件文件transition.js

　　transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是，这些过渡动画都是采用CSS3来实现的，所以IE6-8浏览器是不具备这些过渡动画效果

　　默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果：

　　☑ 模态弹出窗（Modal）的滑动和渐变效果；

　　☑ 选项卡（Tab）的渐变效果；

　　☑ 警告框（Alert）的渐变效果；

　　☑ 图片轮播（Carousel）的滑动效果

　　transition.js 是针对 transitionEnd 事件的一个基本辅助工具，也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果

　　通过下面的代码可以在全局范围禁用过渡效果，并且必须将此代码放在transition.js(或bootstrap.js或bootstrap.min.js)后面，确保在js文件加载完毕后再执行下面代码

$.support.transition = false

以上がBootstrap プラグインの導入と使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。