jQuery検出位置プロンプトポップアップウィンドウ(ツールチップボックス)の詳細分析_jquery

ここでは jQuery を使用してポップアップ JS を作成し、簡単なデモを作成しました。

方向

マウスの現在の位置に応じて、矢印はさまざまな方向を指します:

左上 (デフォルト)、左下、右上、右下、左上、右上 正方形 (右上)、左下 (左下)、右下 (下) -右）

優先度

上記の各状況の優先順位は順番に低くなります

アイデアの検出

検出の基本的な考え方は次のとおりです:

まず、コンテナの高さまたは幅が、対応するポップアップ ウィンドウの高さまたは幅の 2 倍であるかどうかを判断することが前提条件です。2 倍である理由は、臨界点が中点であるためです。ターゲットコンテナの各側面

/*
* まず、ターゲット コンテナの高さまたは幅が、コンテナの対応する高さまたは幅と矢印のサイズの合計の 2 倍であるかどうかを判断します。そうでない場合は、エラーが報告されます。 2 倍である理由は、臨界点がターゲット コンテナの各辺の中点であるためです。
*/

次に、優先順位に従って 1 つずつ判断します。

/*
* 最初に左側を検出し、次に右側を検出し、左側と右側を収容できない場合は、上側をチェックし、両方を除外してから考慮します。底面。左右の辺を検出する場合は、まず上面を下げることができるかどうかを検討し、上下の辺を検出する場合は、まず左右の辺の距離が広いかどうかを検討します。

* 1.左側を検出した場合、上下の距離が矢印オフセットで倒せるか判断し、片方が倒せない場合(上など)は[ となります。 '上'、'左']、右 同じ側

* 2.上下を検出する場合、左右の距離を矢印オフセット分下げられるかどうかを判断します(デフォルトでは上、つまり上)。下げることはできません。マウスを傾けた側 (左

* デフォルトは左上です。
*/

特定の状況に基づく判断:

•優先順位に従って、まずポップアップ ウィンドウをマウスの右側にドロップできるかどうかを決定します。

◦置ける場合は、別の矢印を入れられるか判断してください

■手放せるなら

■ 次に、矢印を上部に配置できるかどうか、矢印のオフセットも含めて決定します。

■ 矢印がオフセットを含めて上に配置でき、ターゲット コンテナの高さを超えない場合は、左上です

■ それ以外の場合、上端がポップアップ ウィンドウの高さより大きく、矢印をオフセットを含めて下端にドロップできる場合、左下になります

■その他、矢印やポップアップウィンドウを下に配置できると判断した場合は、左上

■ それ以外の場合、前提条件に基づいて、左下になります

■下ろせない場合は、下部のポップアップウィンドウと矢印を下ろせるか判断してください

■できれば左上

■ それ以外の場合は左下

◦ やめられない場合は、左を検討した後、右に変更する、同じ考えです

8 つのポップアップウィンドウの状況と位置

左上の例

コードをコピー コードは次のとおりです:

case 'top-left' :
// 上と矢印のサイズ
this.conObj.css('top', top tarTop);
// 左の距離を決定します
if (左＆lt;右の独自の距離をサポートできない場合（conwidth -arroffset）、左側の値が縮小され、矢印は右側のコンテナに沿って整列します// 通常は左側に表示され、右側の必要な幅 ((conWidth - arrOffset) - right )、left - arrOffset - ((conWidth - arrOffset) - right ) を差し引くと、tarWidth - conWidth
が得られます。 // 別の方法考え方としては、右に固執します。つまり、左への距離は、ターゲット コンテナの幅からそれ自体を引いた値になります。Width
this.conObj.css('left', tarWidth - conWidth tarLeft);
} else { // 通常表示 left
this.conObj.css('left', left - arrOffset tarLeft) ;
}
Break



状況と8つの状況における矢印の位置

同様に左上を例にします

コードをコピーします

コードは次のとおりです。

case 'top-left' :
this.arrowObj.prependTo(this.conObj);
// con が右に近い場合、このとき矢印はマウスとともに移動します
if ( conLeft === 0 && (conWidth > (right arrOffset))) {
this.arrowObj.css('left', conWidth - right - arrowPos);
} else {
this.arrowObj.css('left', arrowPos);
}
Break;

最後に、コードを記述する際のいくつかの洞察について話しましょう。 N 回書かれたコードをリファクタリングし、N 行のコメントを書いた後、ふと思いました。実際、コードを書くことでも、生活することでも、私たちは皆、確立された、または従来の前提や標準を持っているのではないかと思いました。そして、この規範が破られると、それまでの努力はすべて無駄になることが多く、たとえ破られなかったとしても、多くの場合、大きな傷を負うことになります。例はコードから社会まで、例外なく多岐にわたります