jQuery技术

jquery 插件学习(五)

字号+ 作者:H5之家 来源:H5之家 2016-03-14 14:00 我要评论( )

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

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

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

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

复制代码 代码如下:


(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");

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery banner图片轮播实例代码大全介绍

    jQuery banner图片轮播实例代码大全介绍

    2016-03-16 14:00

  • JQuery+Django+ajaxSubmit实现文件上传及进度条显示

    JQuery+Django+ajaxSubmit实现文件上传及进度条显示

    2016-03-10 16:01

  • jquery $.trim()去除字符串空格详解

    jquery $.trim()去除字符串空格详解

    2016-03-07 15:00

  • jquery施用技巧

    jquery施用技巧

    2016-03-07 14:15

网友点评