jQuery 감지 위치 프롬프트 팝업창 상세 분석(툴팁 상자)_jquery

여기서는 jQuery를 사용하여 팝업 js를 만들고 간단한 데모를 만들었습니다.

방향

마우스의 현재 위치에 따라 화살표가 다른 방향을 가리킵니다.

왼쪽 위(기본값), 왼쪽 아래, 오른쪽 위, 오른쪽 아래, 왼쪽 위, 오른쪽 위 사각형(오른쪽 위), 왼쪽 아래(왼쪽 아래), 오른쪽 아래(아래) -맞습니다)

우선순위

위 각 상황의 우선순위는 순서대로 낮아집니다

아이디어 감지

탐지의 기본 개념은 다음과 같습니다.

우선 컨테이너의 높이나 너비가 해당 팝업창의 높이나 너비의 2배인지를 판단하는 것도 전제조건입니다. 2배인 이유는 임계점이 중간점이기 때문입니다. 대상 컨테이너의 각 측면

/*
* 먼저 대상 컨테이너의 높이 또는 너비가 해당 컨테이너의 높이 또는 너비와 화살표 크기의 합의 두 배인지 확인합니다. 그렇지 않으면 오류가 보고됩니다. 2번인 이유는 임계점이 대상 컨테이너의 각 변의 중간 지점이기 때문입니다.
*/

다음으로 우선순위에 따라 하나씩 판단하시면 됩니다.

/*
* 왼쪽을 먼저 감지한 다음 오른쪽을 감지하는 것이 좋습니다. 왼쪽과 오른쪽을 수용할 수 없는 경우 위쪽을 확인하여 둘 다 제외하고 고려합니다. 아래쪽. 왼쪽과 오른쪽을 감지할 때는 먼저 상단을 낮출 수 있는지 여부를 고려하고, 위쪽과 아래쪽을 감지할 때는 먼저 왼쪽과 오른쪽 사이의 거리가 큰지 여부를 고려하세요.

* 1.왼쪽을 감지할 때 화살표 오프셋으로 상하 거리를 내려놓을 수 있는지 판단합니다(상부 등). '위', '왼쪽'], 오른쪽 같은 쪽

* 2.상하 감지 시 화살표 오프셋으로 좌우 거리를 낮출 수 있는지 판단합니다(기본값은 위쪽, 즉 상단). 낮출 수 없는 경우에는 마우스가 기울어진 쪽(왼쪽

* 기본값은 왼쪽, 위쪽입니다.
*/

특정 상황에 따른 판단:

•우선순위에 따라 먼저 팝업창을 마우스 오른쪽에 놓을 수 있는지 여부를 결정합니다.

◦ 내려놓을 수 있으면 다른 화살을 꽂을 수 있는지 판단하세요

■놓을 수 있다면

■ 그런 다음 화살표의 오프셋을 포함하여 화살표를 상단에 배치할 수 있는지 여부를 결정합니다.

■ 화살표가 오프셋을 포함하여 상단에 배치될 수 있고 대상 컨테이너의 높이를 초과하지 않는 경우 왼쪽 상단입니다

■ 그렇지 않고 상단이 팝업 창 높이보다 크고 화살표를 오프셋을 포함하여 하단에 놓을 수 있는 경우 왼쪽 하단입니다

■ 그 외 화살표 및 팝업창을 하단에 배치해도 된다고 판단되면 좌측상단

■ 그 외에는 전제 조건에 따라 왼쪽 하단입니다

■놓을 수 없는 경우 하단에 팝업창과 화살표를 내려놓을 수 있는지 판단하세요

■가능하면 왼쪽 상단

■ 그렇지 않은 경우 왼쪽 하단

◦ 내려놓을 수 없다면 왼쪽을 고려한 후 오른쪽으로 바꿔도 같은 생각

8개 팝업창 상황과 위치

왼쪽 상단 예

코드 복사 코드는 다음과 같습니다.

case 'top-left' :
// 상단에 화살표 크기 추가
this.conObj.css('top', top tarTop);
// 왼쪽 거리 결정
if ( 왼쪽 < ; arrOffset ) {
                                                                                                                                                                                 오른쪽의 자체 거리(conWidth - arrOffset)를 지원할 수 없는 경우 왼쪽 값이 줄어들고 화살표가 마우스를 따라 오른쪽으로 정렬됩니다. 용기 옆으로
// 일반적으로 왼쪽에 표시되며 오른쪽에 필요한 너비를 뺀 값입니다((conWidth - arrOffset) - right ), left - arrOffset - ((conWidth - arrOffset) - right ), tarWidth - conWidth
// 다른 방법을 얻습니다. 즉, 왼쪽까지의 거리는 대상 컨테이너의 너비에서 자신을 뺀 너비입니다. Width
this.conObj.css('left', tarWidth - conWidth tarLeft);
} else { // 일반적으로 왼쪽으로 표시
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줄의 코멘트를 작성하고 나니 문득, 사실 코드를 작성하는 일이든 생활하는 일이든 우리 모두에게는 정해져 있거나 관습적인 전제나 기준이 있다는 생각이 들었습니다. 그리고 이 규범이 깨지면 이전의 모든 노력이 물거품이 되는 경우가 많고, 그렇지 않더라도 큰 상처를 받는 경우가 많습니다. 예는 코드부터 사회까지 예외 없이 다양합니다