jquery 插件学习(五)


Posted in Javascript onAugust 06, 2012

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

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

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

(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");
Javascript 相关文章推荐
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
jquery 插件学习(四)
Aug 06 #Javascript
jquery 插件学习(三)
Aug 06 #Javascript
jquery 插件学习(二)
Aug 06 #Javascript
jquery 插件学习(一)
Aug 06 #Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 #Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 #Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 #Javascript
You might like
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
简单介绍Python中的readline()方法的使用
2015/05/24 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
求职信格式范本
2013/11/15 职场文书
公益广告语集锦
2014/03/13 职场文书
护士求职信范文
2014/05/24 职场文书
个人授权委托书
2014/09/15 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
电影雷锋观后感
2015/06/10 职场文书
公司回复函格式
2015/07/14 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书