快捷導(dǎo)航

jquery插件制作提示框插件實(shí)現(xiàn)代碼

更新時(shí)間：2012年08月17日 15:38:13 作者：

今天我們介紹的是提示框插件tooltip的制作，其中還會(huì)介紹到自定義選擇器插件的開發(fā)

我們首先來介紹自定義選擇器的開發(fā)，他的代碼結(jié)構(gòu)如下：

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

調(diào)用時(shí)候的寫法：
$(a:customselector)　　現(xiàn)在我們先解釋下函數(shù)中所使用到的各個(gè)參數(shù)。
　　object：當(dāng)前dom元素的引用，而不是jquery對(duì)象。需要強(qiáng)調(diào)的一點(diǎn)，dom元素和jquery對(duì)象完全不是一回事，a標(biāo)簽代表的是dom元素，$('a')代表的是jquery對(duì)象，他本身是個(gè)js對(duì)象。不清楚的朋友情google相關(guān)知識(shí)。
　　index：下標(biāo)為0的數(shù)組索引。
　　properties：選擇器元數(shù)據(jù)數(shù)組。
　　list：dom元素?cái)?shù)組。
　　這些參數(shù)中，第一個(gè)參數(shù)是必須的，其他幾個(gè)參數(shù)是可選的。
　　選擇器函數(shù)通過bool值確定是否包含當(dāng)前元素，true包含，false不包含。
　　這里我們實(shí)現(xiàn)一個(gè)a標(biāo)簽的選擇器，只選擇指向外部鏈接的a標(biāo)簽，代碼如下：

復(fù)制代碼代碼如下:

 
(function ($) { 
$.expr[':'].external = function (object) { 
if ($(object).is('a')) { 
return object.hostname != location.hostname; 
} 
}; 
})(jQuery); 

現(xiàn)在我們開始實(shí)現(xiàn)提示框插件的開發(fā)，開發(fā)過程就不多講了，主要是代碼實(shí)現(xiàn)，里面有備注說明。

復(fù)制代碼代碼如下:

 
(function ($) {//更新坐標(biāo)位置 
$.fn.updatePosition = function (event) { 
return this.each(function () { 
$(this).css({ 
left: event.pageX + 20, 
top: event.pageY + 5 
}); 
}); 
} 
//提示框插件，將顯示a標(biāo)簽title屬性的內(nèi)容 
$.fn.tooltip = function () { 
return this.each(function () { 
//獲取當(dāng)前對(duì)象 
var self = $(this); 
//獲取title屬性值 
var title = self.attr('title'); 
//判斷當(dāng)前對(duì)象是否是a標(biāo)簽，title屬性有無內(nèi)容 
if (self.is('a') && title != '') { 
self.removeAttr('title') 
.hover(function (event) { 
//鼠標(biāo)在目標(biāo)對(duì)象上 
$('<div id="tooltip"></div>').appendTo('body') 
.text(title) 
.hide() 
.updatePosition(event) 
.fadeIn(400); 
}, function () { 
//鼠標(biāo)移出 
$('#tooltip').remove(); 
}).mousemove(function (event) { 
//鼠標(biāo)移動(dòng) 
$('#tooltip').updatePosition(event); 
}); 
} 
}); 
}; 
})(jQuery); 