Bootstrap ソース コード分析ツールチップ、ポップオーバー

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

ソースコードファイル:

Tooltip.js
Tooltip.scss

実装原理:

1.ツールチップ要素の位置情報 (上、左、下、右、幅、高さなど) を表示するには
2. ツールチップの位置 (上、左、下、右のいずれか) を計算します。 right
3. 次に、計算位置の値に従って、座標値を計算します
4. 座標値をツールチップに適用します

ソースコード分析:

1. ownerDocument: document; 2 つのオブジェクトが含まれます: 、documentElement (ルート ノード)
2. $.contains(domA, domB): domA に domB 要素が含まれているかどうかを判断します
3. offset.setOffset メソッドが適用され、 offset が値を設定するとき、四捨五入ができないため、パラメータが渡されます
4. $viewport: Tooltipr のコンテナ要素を表示します
5. getPosition: この関数は、要素の位置座標に関連する情報を取得します。として: 上、左、下、右、幅、高さ、スクロールなど。
5.1. getBoundingClientRect メソッドは共有されますが、IE8 の場合、このメソッドは幅と高さ
をプラグインします。ボディの幅と高さはウィンドウの
にリセットされます。 5.3. ソース コードは次のとおりです:

$element   = $element || <span style="color: #0000ff">this</span>.$element <span style="color: #008000">//</span><span style="color: #008000">如果没有传入参数，则以$element（触发tooltip事件的元素）为准</span>

    <span style="color: #0000ff">var</span> el     = $element[0<span style="color: #000000">]
    </span><span style="color: #0000ff">var</span> isBody = el.tagName == 'BODY'

    <span style="color: #0000ff">var</span> elRect    =<span style="color: #000000"> el.getBoundingClientRect()
    </span><span style="color: #0000ff">if</span> (elRect.width == <span style="color: #0000ff">null</span><span style="color: #000000">) {
      </span><span style="color: #008000">//</span><span style="color: #008000"> width and height are missing in IE8, so compute them manually; see https://github.com/twbs/bootstrap/issues/14093</span>
      elRect = $.extend({}, elRect, { width: elRect.right - elRect.left, height: elRect.bottom -<span style="color: #000000"> elRect.top })
    }
    </span><span style="color: #0000ff">var</span> elOffset  = isBody ? { top: 0, left: 0<span style="color: #000000"> } : $element.offset()
    </span><span style="color: #0000ff">var</span> scroll    = { scroll: isBody ? document.documentElement.scrollTop ||<span style="color: #000000"> document.body.scrollTop : $element.scrollTop() }
    </span><span style="color: #0000ff">var</span> outerDims = isBody ? { width: $(window).width(), height: $(window).height() } : <span style="color: #0000ff">null</span>

<span style="color: #0000ff">return</span> $.extend({}, elRect, scroll, outerDims, elOffset)

6. getPracticalOffset: を使用してツールヒントの座標値を計算します。実現するための幅と高さの半分の原理
6.1. ボトムタイム
6.1.1. 上は位置決め要素 (pos) の高さです
6.1.2.配置された要素の左側 (pos) - 配置された要素の幅 (pos)/2 - ツールチップ要素の幅/2
6.2. top
1. Top は上部の高さです。 -位置決め要素 (pos) のツールチップ要素
6.2.2. 左は位置決め要素 (pos) の左側 – 位置決め要素 (pos) の幅 / 2 – ツールチップ要素の幅 / 2
6.3. 左が
の場合 6.3.1. Top は位置決め要素の上部 (pos) – 位置決め要素の高さ (pos)/2 – ツールチップ要素の高さ/2
.2. 左は位置決め要素 (pos) )、左はツールチップ要素
6.4 の幅、右は
6.4.1、上は位置決め要素 (pos) の高さです。位置決め要素 (pos)/2 – ツールチップ要素の高さ/2
6.4 .2. Left は、位置決め要素 (pos) の左 + 位置決め要素 (pos) の幅

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

ポップオーバー (ポップアップボックス)

ソースコードファイル:

Popover.js
Popover.scss

実装原則

1. ツールチップの実装を継承します
2. 追加のタイトルがあり、コンテンツをカスタマイズすることもできます (入力、ボタン、その他の対話型コントロールを挿入できます)