jquery 플러그인 제작 프롬프트 상자 플러그인 구현 code_jquery

먼저 사용자 정의 선택기 개발을 소개하겠습니다.

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

(function ($) {
$.expr[':'].customselector = function (object,index,properties,list) {
//code
};
})(jQuery);

호출 시 쓰기:
$(a:customselector) 이제 먼저 함수에 사용되는 다양한 매개변수에 대해 설명하겠습니다.
객체: jquery 객체가 아닌 현재 dom 요소에 대한 참조입니다. dom 요소와 jquery 객체는 완전히 다르다는 점을 강조할 필요가 있습니다. a 태그는 dom 요소를 나타내고 $('a')는 js 객체인 jquery 객체를 나타냅니다. 나는 우정에 대한 구글 관련 지식을 모른다.
인덱스: 아래 첨자 0이 있는 배열 인덱스입니다.
속성: 선택기 메타데이터 배열.
목록: DOM 요소 배열.
이 매개변수 중 첫 번째 매개변수는 필수이고 나머지 매개변수는 선택사항입니다.
selector 함수는 bool 값을 통해 현재 요소가 포함되는지 여부를 결정하는데, true는 포함, false는 포함되지 않습니다.
여기서는 외부 링크를 가리키는 태그만 선택하는 태그 선택기를 구현합니다.

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

(function ($) {
$.expr[':'].external = function (object) {
if ($(object ).is( 'a')) {
return object.hostname != location.hostname;
}
})(jQuery); 이제 구현을 시작합니다. 프롬프트 상자 플러그인의 개발 프로세스는 자세히 설명하지 않습니다. 가장 중요한 것은 메모가 있는 코드 구현입니다.

코드 복사

코드는 다음과 같습니다. (함수($) {//업데이트 좌표 위치$.fn.updatePosition = function (event) {

return this.each(function () {

$(this).css({
left: event.pageX 20,
top : event.pageY 5
});
});
}
//a 태그의 제목 속성 내용을 표시하는 프롬프트 상자 플러그인
$.fn.tooltip = function () {
return this.each(function () {
//현재 객체 가져오기
var self = $(this);
//가져오기 title 속성 값
var title = self.attr ('title')
//현재 객체가 태그인지, title 속성에 내용이 있는지 확인
if (self.is('a') ) && title != '') {
self.removeAttr('title')
.hover(function (event) {
//마우스가 대상 개체 위에 있습니다
$('< ;div id="tooltip">

') .appendTo('body')
.text(title)
.hide()
.updatePosition(event)
. fadeIn(400);
}, function () {
//마우스아웃
$('#tooltip').remove()
}).mousemove(function (이벤트) 🎜>//마우스 이동
$('#tooltip') .updatePosition(event)
})
}
}); );


이 기사가 도움이 되기를 바랍니다. 완전한 효과를 보고 싶은 친구는 데모를 다운로드할 수 있습니다:
jQuery.plugin.tooltip