源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jquery 插件学习(五)

  • 时间:2021-09-04 10:18 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery 插件学习(五)
这节封装插件了,进展怎么样呢? 一般对外发布的插件都应该进行封装,封装的插件还应该符合规范,只有这样写的插件才具有推广价值,并得到其他用户的喜爱。 首先第一步,是定义一个独立域,代码如下所示。
[u]复制代码[/u] 代码如下:
(function($){ //自定义插件代码 })(jQuery) //封装插件
确定创建插件类型,选择创建方式,例如,创建一个设置元素字体颜色的插件,则应该创建jquery对象方法,考虑到jquery提供了插件扩展方法extend(),调用该方法会更为规范。
[u]复制代码[/u] 代码如下:
(function($){ //自定义插件代码 $.extend($.fn,{ //jquery对象扩展方法 }) })(jQuery) //封装插件
一般插件都会接受参数,用来控制插件的 行为,例如,对于设置颜色的插件,应该允许用户设置字体颜色,同时,应该考虑如果用户没有设置颜色,则应该保持默认色进行设置。
[u]复制代码[/u] 代码如下:
(function($){ //自定义插件代码 $.extend($.fn,{ color : function(options){ var options = $.extend({bcolor :"white",fcolor:"black"},options); // } }) })(jQuery) //封装插件
最后完善插件
[u]复制代码[/u] 代码如下:
;(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);
调用看看
[u]复制代码[/u] 代码如下:
$("h1").color({bcolor : "#ccc",fcolor:"#eee"}); $('a').color("#fff");
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部