[タブ]タブのアプリケーションを実装すると、このプラグインは比較的簡単です
ソースコードファイル:
Tab.js
実装の原則
1.要素をクリックするとき、最初に元々強調表示された要素をキャンセルします。
2。次に、クリックされた要素を強調表示します
3.要素をクリックすると、ドロップダウンボックスのオプションがある場合は、自体を選択し、ドロップダウンボックスを選択します。
5。アニメーションが定義されている場合は、最初にアニメーションを実行してからコールバックを実行します
ソースコード分析:
1. [要素がクリックされたときに表示方法がトリガーされ、次の4つのイベントがトリガーされます。
1.1。 hiden.bs.tab:前の要素を非表示にします
1.2。 show.bs.tab:現在の要素を表示します
1.3。 Hideen.bs.tab:前の要素を隠すことで完成しました
1.4。 shown.bs.tab:現在の要素を完全に表示します
1.5。 Hiden/Showイベントソースコード:
var $ fortion = $ ul.find( '。アクティブ:last a')var hideevent = $ .event( 'hide.bs.tab'、{relatedtarget:$ this [0]})var showevent = $ .event( 'show.bs.tab'、{relateTarget:$ forter [0]})2。アクティブ:現在のオブジェクトをアクティブにします
2.1。ナビゲーション要素にaria-Expanded属性を追加して、この要素が拡張状態にあるかどうかをマークする
2.2。リフローメカニズムを使用して、offsetWidth属性を使用して、部分的な再塗装を達成します
Bootstrapソースコード分析タブ(タブ)に関する上記の簡単な説明は、私があなたと共有するすべてのコンテンツです。私はそれがあなたに参照を与えることができることを願っています、そしてあなたがwulin.comをもっとサポートできることを願っています。