jquery外掛程式製作 提示框外掛程式實現代碼

我們首先來介紹自訂選取器的開發，他的代碼結構如下：
複製代碼 代碼如下:
(function ($) {
$.expr[':'].customselector = function (object,index,properties,list) {
//code
};
})(jQuery);

調用時候的寫法：
$(a:customselector)　　現在我們先解釋下函數中所使用到的各個參數。
　　object：當前dom元素的引用，而不是jquery對象。需要強調的一點，dom元素和jquery對象完全不是一回事，a標籤代表的是dom元素，$('a')代表的是jquery對象，他本身是個js對象。不清楚的朋友情google相關知識。
　　index：下標為0的數組索引。
　　properties：選取器中繼資料數組。
　　list：dom元素數組。
　　這些參數中，第一個參數是必須的，其他幾個參數是可選的。
　　選取器函數通過bool值確定是否包含當前元素，true包含，false不包含。
　　這裡我們實現一個a標籤的選取器，只選擇指向外部連結的a標籤，代碼如下：
複製代碼 代碼如下:
(function ($) {
$.expr[':'].external = function (object) {
if ($(object).is('a')) {
return object.hostname != location.hostname;
}
};
})(jQuery);

現在我們開始實現提示框外掛程式的開發，開發過程就不多講了，主要是代碼實現，裡面有備忘說明。
複製代碼 代碼如下:
(function ($) {//更新座標位置
$.fn.updatePosition = function (event) {
return this.each(function () {
$(this).css({
left: event.pageX + 20,
top: event.pageY + 5
});
});
}
//提示框外掛程式，將顯示a標籤title屬性的內容
$.fn.tooltip = function () {
return this.each(function () {
//擷取當前對象
var self = $(this);
//擷取title屬性值
var title = self.attr('title');
//判斷當前對象是否是a標籤，title屬性有無內容
if (self.is('a') && title != '') {
self.removeAttr('title')
.hover(function (event) {
//滑鼠在目標對象上
$('<div id="tooltip"></div>').appendTo('body')
.text(title)
.hide()
.updatePosition(event)
.fadeIn(400);
}, function () {
//滑鼠移出
$('#tooltip').remove();
}).mousemove(function (event) {
//滑鼠移動
$('#tooltip').updatePosition(event);
});
}
});
};
})(jQuery);

希望本片文章對你有用，想看完整效果的朋友可以去下demo，：jQuery.plugin.tooltip