Bootstrap ソースコード分析ツールチップ、popover_html/css

Bootstrap ソースコード分析ツールチップ、popover_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:15:41

オリジナル

1449 人が閲覧しました

1. ツールチップ (プロンプトボックス)

ソースコードファイル:

Tooltip.js

Tooltip.scss
実装原理:

1. 現在の要素の位置情報 (上、左、下、右、幅) を取得します。ツールチップ、高さなどとして表示されます)

2. 上、左、下、右のいずれかのツールチップの位置を計算します
3. 次に、計算された位置の値に基づいて座標値を計算します
4.座標値をツールチップに適用します
ソースコード分析:

1 、 ownerDocument: document; 2 つのオブジェクトが含まれます: 、documentElement (ルートノード)

2: domA に domB が含まれるかどうかを判断します。要素
3. offset.setOffset メソッドが適用され、渡されます。 offset の値を設定するときに丸めることができないため、 using パラメーターが欠落しています。 4. $viewport: tooltipr のコンテナー要素を表示します。関数は、上、左、下、右、幅、高さ、スクロールなどの要素の位置座標に関連する情報を取得します。
5.1. getBoundingClientRect メソッドは共有されますが、このメソッドは幅と高さをプラグインします。 IE8
5.2. 本体の場合、幅と高さがウィンドウにリセットされます
5.3. ソースコードは次のとおりです:

$element   = $element || this.$element //如果没有传入参数，则以$element（触发tooltip事件的元素）为准    var el     = $element[0]    var isBody = el.tagName == 'BODY'    var elRect    = el.getBoundingClientRect()    if (elRect.width == null) {      // width and height are missing in IE8, so compute them manually; see https://github.com/twbs/bootstrap/issues/14093      elRect = $.extend({}, elRect, { width: elRect.right - elRect.left, height: elRect.bottom - elRect.top })    }    var elOffset  = isBody ? { top: 0, left: 0 } : $element.offset()    var scroll    = { scroll: isBody ? document.documentElement.scrollTop || document.body.scrollTop : $element.scrollTop() }    var outerDims = isBody ? { width: $(window).width(), height: $(window).height() } : nullreturn $.extend({}, elRect, scroll, outerDims, elOffset)

ログイン後にコピー

6. 幅を使用してツールヒントの座標値を計算します。 6.1. ボトムを使用する場合、トップは位置決め要素 (pos) の上部 + 位置決め要素 (pos) の高さです。位置決め要素の幅 (pos) / 2 - ツールチップ要素の幅 / 2
6.2. top が

の場合、top は位置決め要素 (pos) の上部のツールチップ要素です

6.2.2 . Left は、位置決めされた要素の左 (pos) – 位置決めされた要素の幅 (pos)/2 – ツールチップ要素の幅 /2

6.3.1 の場合、top は位置決めされた要素の上部になります。 element (pos) – 位置決め要素の高さ (pos)/2 – ツールチップ要素の高さ/2
6.3.2. Left は位置決め要素の左側です (pos) – ツールチップ要素の幅
6.4 . 右
6.4.1. 上は位置決め要素 (pos) - 位置決め要素の高さ (pos)/2 - ツールチップ要素の高さ/2
6.4.2. 左は位置決め要素 (pos) の左です。位置決め要素の幅 (pos)

6.5. 小さな三角形の位置、通常は要素の 50% の位置ですが、ツールチップが左、上、右、下で隠れている場合は、位置を指定する必要があります。再計算して調整しました。メソッド名は次のとおりです: getViewportAdjustedDelta
6.5.1. まず、オーバーフローの幅または高さを計算します
6.5.2. 次に、arrowDelta の値、非表示の値 * 2 – ツールチップの幅 + ツールチップの幅を計算します
6.5.3.上または左のパーセンテージの値

Popover (ポップアップボックス)

ソースコードファイル:
Popover.js
Popover.scss
実装原則

1. 追加のタイトルがあります。コンテンツをカスタマイズすることもできます (入力、ボタン、その他の対話型コントロールを内部に挿入できます)