내가 직접 작성한 도구 설명 프롬프트 플러그인 공유(소스 코드 포함)_jquery

제가 직접 작성한 툴팁 프롬프트 플러그인을 계속해서 공유하겠습니다. 모두가 저를 응원하고 댓글을 남겨주셨으면 좋겠습니다. 누군가 저를 꾸짖더라도 누군가 저에게 "샤오도우"를 주목하고 있다는 사실을 알려주세요. 더 이상 고민하지 말고 코드에 대해 이야기해 봅시다!

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

$.fn.ToolTip = 함수(옵션) ) {
var defaults = {
direction: "down",
star: function () { },
from: $(this),
url: '../images/ arrow.png '
};
//메소드 내 기본 변수
var opt = $.extend(defaults, option),
dirrray = ['up', 'down', 'left ', 'right'],
left = 0, top = 0, _left = 0, _top = 0, arrow_w = 15, arrow_h = 60, timeout, arrow = '0 0'//트래버스 시작;
$ (this).each(function () {
var obj = $(this);
obj.on({
mouseenter: function () {
GetPos(obj);
var objtip = $("

").css({
위치: "절대",
상단: 상단,
왼쪽 : 왼쪽,
테두리: "solid 1px #ccc",
너비: $("#" obj.attr("data-tooltip")).outerWidth(true),
높이: $(" #" obj.attr("data-tooltip")).outerHeight(true),
'border-radius': '8px 8px',
'Background-color': '#fff',
'z-index': 999
}).appendTo(obj);
var objtiphead = $("

").css({
width: arrow_w == 30 ? objtip.outerWidth(true) : 15,
height: arrow_h == 30 ? objtip.outerHeight(true) : 15,
position: "absolute",
top: _top,
left : _left
}).appendTo(objtip);
var objtiparrow = $("

").css({
너비: arrow_w,
높이: arrow_h ,
"배경 이미지": "url(" opt.url ")",
"배경 반복": "반복 없음",
"배경 위치": 화살표
} ).appendTo( objtiphead)
objtip.append($("#" obj.attr("data-tooltip")).clone().show())
objtip.on({
mouseenter: function () {
obj.data({
attip: true
}), mouseleave: function () {
$(".tooltip").remove ();
obj.removeData("attip");
}
, mouseleave: function () {
if (!obj.data(" attip"))
$(".tooltip").remove();
obj.removeData("attip");
}
});
});
//위치 가져오기
var GetPos = function (obj) {
var objtip = $("#" obj.attr("data-tooltip"))
var tooltippos = {
up: function () {
arrow_w = 30; arrow_h = 15;
top = obj.position().top - 12 - objtip.outerHeight(true)
left = obj.position().left;
_top = objtip.outerHeight(true);
_left = 15;
arrow = '-50px -50px';
},
down: function () {
arrow_w = 30; arrow_h = 15;
top = obj.position().top 12 obj.height();
left = obj.position().left;
_left; = 15;
arrow = '-50px 0';
},
right: function () {
arrow_w = 15;
arrow_h = 30; ().top; 왼쪽 = obj.position().left - 12 - objtip.outerWidth(true);
_top = 15
_left = objtip.outerWidth(true); = '- 80px -20px';
},
왼쪽: 함수() {
arrow_w = 15;
arrow_h = 30; 🎜>left = obj.position().left obj.width() 12;
_top = 15;
_left = -15;
arrow = '0 -20px>}
};
opt.star();
opt.direction = $.inArray(opt.direction, dirarray) != -1 ? opt.direction : "down"; ) {
case "up":
if (obj[0].getBoundingClientRect().top - 10 - objtip.outerHeight() > 0)
tooltippos.up()
else;
tooltippos.down();
break;
case "down":
if (obj[0].getBoundingClientRect().top 10 obj.height() objtip.outerHeight() < $(window ).height())
tooltippos.down();
else
tooltippos.up()
break
case "right":
if (obj [0] .getBoundingClientRect().left - 10 - objtip.outerWidth() > 0)
tooltippos.right()
else
tooltippos.left()
case " left":
if (obj[0].getBoundingClientRect().left obj.width() 10 objtip.outerWidth() < $(window).width())
tooltippos.left( );
else
tooltippos.right();
}
}
}


테스트 결과 IE7 화살표에 포인팅 오류가 있는 것 같습니다. 수정할 수 있습니다. 작은 문제라면 물 좀 뿌려주세요~

렌더링
:


물론 콘텐츠는 직접 만들어야 하고, 디스플레이 div만 썼을 뿐입니다. 사용법은 매우 간단합니다.

소스 코드 다운로드

작동 지침은 사용자 경험 엔지니어에 대한 모욕입니다!