jQuery对象插件编写方法
在上一篇文章中,我写到jQuery类插件的编写方法,这个方法是针对jquery本身的,一般写插件是针对某一个对象的,所以不建议写类插件方法。
本文就讲了如何针对jquery对象编写插件
jquery为我们提供了一套编写插件的基本模板,根据模板能快速的编写插件,比如给你一棵树干,怎么让它花枝花叶,仁者见仁智者见智了,无论插件怎么写,核心的骨干还是这样。
模板
;(function($){
$.fn.plugin = function(options){
var defaults = {
//默认参数
}
var options = $.extend(defaults,options)
this.each(function(){
//业务逻辑
})
return this; //支持链式调用
}
})(jQuery)
引入调用:$(selector).plugin()
案例
有一个table,实现鼠标移动上去变色,移除恢复,事件为点击时,调用回调函数
<table cellpadding="0" cellspacing="0" border=1 width="100%" id="table1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>88</td>
<td>男</td>
</tr>
<tr>
<td>小六</td>
<td>45</td>
<td>男</td>
</tr>
<tr>
<td>夏云</td>
<td>24</td>
<td>女</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>男</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>男</td>
</tr>
</table>
;(function($){
$.fn.table = function(options){
var defaults = {
currentRowClass: 'currentRowClass',
eventType:'mouseover',
eventType2:'mouseout',
callback:''
}
var options = $.extend(defaults,options)
this.each(function(){
var _this = $(this);
_this.find('tr').on(options.eventType,function(){
$(this).addClass(options.currentRowClass).siblings().removeClass(options.currentRowClass);
if(options.eventType == 'click'){
options.callback();
}
})
_this.find('tr').on(options.eventType2,function(){
$(this).removeClass(options.currentRowClass);
})
})
return this;
}
})(jQuery)
外部调用
var callbacks = function(){
alert(123);
}
var table1 = $('#table1');
$(table1).table({
eventType:'click',
callback: callbacks
});