Jquery 플러그인 사용자 정의 [마우스를 가리키면 설명 라벨이 나타납니다]_jquery

최근에 jquery를 배우고 있는데 며칠간 지켜보다가 실력을 쌓기 위해 작은 것을 만들어 보기로 했습니다. 입문용으로 확인하실 수 있습니다.

먼저 아래에서 이 작은 것의 기능을 살펴보겠습니다. 모델이 있으면 유용합니다.

기능: HTML 요소 위에 마우스를 올리면 도움말 설명 라벨이 표시됩니다.

렌더링:

원본:

　　

'Click Me 1' 위에 마우스를 올렸을 때:

　　

마우스를 '텍스트 상자' 위로 가져갈 때:

　　

렌더링을 보신 후 관심이 있으시면 코드에 주석이 있으니 자세히 살펴보세요

html 코드:

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

<% @ 페이지 언어 ="C#" AutoEventWireup="true" CodeFile="testLinkJquery.aspx.cs" Inherits="testLinkJquery" %>









s클릭해주세요 1





html 코드 설명:
밑줄 친 부분은 jquery 플러그인 호출 시 전달되는 매개변수입니다.

빨간색으로 표시된 부분은 일치에 주의해야 할 부분입니다.
매개변수 설명:
shelpText: "default help text", //라벨을 표시하려는 문서
bgcolor: " red", //레이블의 배경색
ftcolor: "yellow", //라벨의 전경색
width: "200px", //레이블의 너비
tempLeft: "15", //레이블을 기준으로 한 레이블 mouse 위치의 왼쪽 값
tempTop: "15" //마우스 위치를 기준으로 한 레이블의 위쪽 값
jquery code[a1.query]

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

/*
* HelpTextFn
* Copyright (c) 2011 yongbin zhang http://www.cnblogs.com/2814/
* 날짜: 2011-6-27
* HTML 요소 위에 마우스를 올리면 도움말 설명 라벨이 표시됩니다.
*/
//다음 코드는 변경할 수 없습니다.
//댓글은 코드 설명입니다
/*
jquery 플러그인을 직접 정의하려는 경우 일반 프레임워크는 다음과 같습니다.
(function ($) {
$.fn.HelpTextFn = function (options) { //변경해야 할 사항은 HelpTextFn입니다. , this jquery 함수의 이름입니다. [html에서 이 함수를 호출하려면 이 이름을 사용해야 합니다],
//다른 변경은 필요하지 않습니다.
var defaults = { // var defaults. {함수 매개변수의 기본값입니다}
helpText: "default help text", //라벨의 문서를 표시하고 싶습니다.
bgcolor: "red", //라벨의 배경색
ftcolor: "yellow", //라벨의 전경색
width: "200px", //라벨의 너비
tempLeft: "15", //마우스 위치를 기준으로 한 라벨의 왼쪽 값
tempTop : "15" //마우스 위치를 기준으로 한 라벨의 상위 값
}
var options = $.extend(defaults, options); //이 문장은 죽었습니다. 이것을 호출하면 Say를 의미합니다. HTML 플러그인에서 전달된 매개변수 값이 없으면
//그럼 defalut에 정의된 매개변수를 사용하고, 그렇지 않으면 전달한 매개변수 값을 사용합니다. [ 참고]: 아래 매개변수를 사용하려면
//다음과 같은 [options.parameter name]을 사용해야 합니다. options.helpText
$(this).mousemove(function (e) { //이 mousemove 이벤트를 추가합니다. 즉, 어떤 html 요소가 내 플러그인을 호출하는지, 여기에 mousemove 이벤트를 추가합니다.
})
$(this).mouseleave(function () { //이 mouseleave 이벤트를 추가합니다. 어떤 html 요소가 내 플러그인을 호출하면 여기에 mouseleave 이벤트를 추가합니다.
})
})(jQuery) //이 문장은 수정되었습니다.
*/
(함수($) {
$.fn.HelpTextFn = 함수(옵션) {//
var defaults = {
helpText: "기본 도움말 텍스트",
bgcolor: "red" ,
ftcolor: "노란색",
너비: "200px",
tempLeft: "15",
tempTop: "15"
}
var options = $.extend( 기본값, 옵션);
var linkDivId = $(this).attr("id");
$(this).mousemove(function (e) {
if ($ ("#linkDiv" linkDivId )) {
$("#linkDiv" linkDivId).remove();
}
var xx = e.originalEvent.x || e.originalEvent.layerX || = e.originalEvent.y || 0;
var left = xx parsInt(options.tempLeft)
var top = yy parseInt(options.tempTop) ; "#" linkDivId).after("

" options.helpText "

");
$ ("#linkDiv" linkDivId ).show();
});
$(this).mouseleave(function () {
$("#linkDiv" linkDivId).remove();
}); >};
})(jQuery)