1. 툴팁 (프롬프트 상자)
소스 코드 파일 :
Tooltip.js
Tooltip.scss
구현 원칙 :
1. 표시 할 요소의 위치 정보를 표시하십시오 (상단, 왼쪽, 하단, 오른쪽, 폭, 높이 등).
2. 상단, 왼쪽, 하단 및 오른쪽 중 하나 인 툴팁의 위치를 계산하십시오.
3. 그런 다음 계산 된 위치 값에 따라 좌표 값을 계산합니다.
4. 툴팁에 좌표 값을 적용하십시오
소스 코드 분석 :
1. 소유자 문서 : 문서; 두 가지 개체가 포함
2. $. 참조 (Doma, Domb) : DOMA에 DOMB 요소가 포함되어 있는지 확인하십시오
3. 오프셋 설정 메소드가 적용되고 사용 매개 변수가 전달됩니다. 오프셋이 설정되면 반올림 할 수 없기 때문입니다.
4. $ viewport : ToolTipr의 컨테이너 요소를 표시합니다
5. GetPosition :이 기능은 상단, 왼쪽, 하단, 오른쪽, 폭, 높이, 스크롤 등과 같은 요소 위치 좌표와 관련된 정보를 얻습니다.
5.1. getBoundingClientRect 방법이 사용되지만이 방법은 IE8의 너비와 높이를 연결할 수 있습니다.
5.2. 몸이라면 너비와 높이가 창으로 재설정됩니다.
5.3. 소스 코드는 다음과 같습니다.
$ 요소 = $ 요소 || 이. $ 요소 // 매개 변수가 전달되지 않으면 $ 요소 (툴팁 이벤트를 트리거하는 요소)는 기본값 var el = $ element [0] var isbody = el.tagname == 'body'var elrect = el.getBoundingClientRect (elrect.width = null) {// width and while에서 누락된다; https://github.com/twbs/bootstrap/issues/14093 elrect = $ .extend ({}, elrect, {width : elrect.right -elrect.left, 높이 : elrect.bottom -elrect.top})} var eloffset = isbody를 참조하십시오. {상단 : 0, 왼쪽 : 0} : $ element.offset () var scroll = {scroll : isbody? document.documentElement.scrolltop || document.body.scrolltop : $ element.scrolltop ()} var outerdims = isbody? {width : $ (창) .width (), 높이 : $ (창) .height ()} : nullreturn $ .extend ({}, elrect, scroll, auterdims, eloffset)6. getCalcatedOffset : 너비 및 높이 접이식 원리를 사용하여 툴팁의 좌표 값을 계산하여 구현합니다.
6.1. 바닥 시간
6.1.1. 상단은 포지셔닝 요소 (POS)의 상단 + 높이입니다.
6.1.2. 왼쪽은 포지셔닝 요소 (POS) /2 툴팁 요소 너비의 너비입니다.
6.2. 상단
6.2.1. 상단은 요소 (POS)를 찾는 상단 Tooltip 요소의 높이입니다.
6.2.2. 왼쪽은 포지셔닝 요소 (POS) /2 툴팁 요소 너비의 너비입니다.
6.3. 떠날 때
6.3.1. 상단은 상단 포지셔닝 요소 (POS) 높이/2 도구 팁 요소 높이/2입니다.
6.3.2. 왼쪽은 요소 (POS)를 찾는 왼쪽 툴팁 요소의 너비입니다.
6.4. 오른쪽
6.4.1. 상단은 상단 포지셔닝 요소 (POS) 높이/2 도구 팁 요소 높이/2입니다.
6.4.2. 왼쪽은 포지셔닝 요소 (POS)의 너비입니다.
6.5. 작은 삼각형의 위치는 일반적으로 요소의 50%입니다. 그러나 툴팁이 왼쪽, 상단, 오른쪽 및 하단으로 숨겨져 있으면 다시 계산하고 조정해야합니다. 메소드 이름은 다음과 같습니다. GetViewPortAdjustedDelta입니다
6.5.1. 먼저 오버플로의 너비 또는 높이를 계산합니다
6.5.2. 그런 다음 Arrowdelta의 값을 계산하고 값을 숨기십시오 * 2 도구 팁 너비 + 도구 팁 너비
6.5.3. 삼각형의 상단 또는 왼쪽 백분율의 값을 설정하십시오.
2. 팝 오버 (팝업 박스)
소스 코드 파일 :
Popover.js
Popover.scss
구현 원칙 :
1. 툴팁 구현을 상속합니다
2. 추가 제목을 사용하면 컨텐츠를 사용자 정의 할 수도 있습니다 (입력 및 버튼과 같은 대화식 컨트롤을 삽입 할 수 있음).
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.