手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery 插件学习(五)
jquery 插件学习(五)
摘要:这节封装插件了,进展怎么样呢?一般对外发布的插件都应该进行封装,封装的插件还应该符合规范,只有这样写的插件才具有推广价值,并得到其他用户的喜...

这节封装插件了,进展怎么样呢?

一般对外发布的插件都应该进行封装,封装的插件还应该符合规范,只有这样写的插件才具有推广价值,并得到其他用户的喜爱。

首先第一步,是定义一个独立域,代码如下所示。

复制代码 代码如下:

(function($){

//自定义插件代码

})(jQuery) //封装插件

确定创建插件类型,选择创建方式,例如,创建一个设置元素字体颜色的插件,则应该创建jquery对象方法,考虑到jquery提供了插件扩展方法extend(),调用该方法会更为规范。

复制代码 代码如下:

(function($){

//自定义插件代码

$.extend($.fn,{ //jquery对象扩展方法

})

})(jQuery) //封装插件

一般插件都会接受参数,用来控制插件的 行为,例如,对于设置颜色的插件,应该允许用户设置字体颜色,同时,应该考虑如果用户没有设置颜色,则应该保持默认色进行设置。

复制代码 代码如下:

(function($){

//自定义插件代码

$.extend($.fn,{

color : function(options){

var options = $.extend({bcolor :"white",fcolor:"black"},options);

//

}

})

})(jQuery) //封装插件

最后完善插件

复制代码 代码如下:

;(function($){

$.extend($.fn,{

color : function(options){var options = $.extend({bcolor :"white",fcolor :"black"},options);

//函数体

return this.each(function(){

$(this).css("color",options.bcolor);

$(this).css("background",options.fcolor);

});

}//color==end

})

})(jQuery);

调用看看

复制代码 代码如下:

$("h1").color({bcolor : "#ccc",fcolor:"#eee"});

$('a').color("#fff");

【jquery 插件学习(五)】相关文章:

jQuery封装的tab选项卡插件分享

jquery使用经验小结

jQuery获取字符串中出现最多的数

jQuery插件制作之全局函数用法实例

AspNet中使用JQuery boxy插件的确认框

jquery任意位置浮动固定层插件用法实例

JQUERY表单暂存功能插件分享

jQuery使用zTree插件实现树形菜单和异步加载

jquery滚动特效集锦

jQuery 遍历函数详解

精品推荐
分类导航