jquery外掛程式製作 提示框外掛實作程式碼_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) {
//滑鼠在目標物件上
$('

').appendTo( 'body')
.text(title)
.hide()
.updatePosition(event)
.fadeIn(400);
}, function () {
///滑鼠移出
$('#tooltip').remove();
}).mousemove(function (event) {
//滑鼠移動
$('#tooltip').updatePosition( event);
});
}
});
};
})(jQuery);

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