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 相关文章推荐
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
es6 filter() 数组过滤方法总结
Apr 03 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
php时区转换转换函数
2014/01/07 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
Three.js快速入门教程
2016/09/09 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
TensorFlow实现创建分类器
2018/02/06 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
父亲八十大寿答谢词
2014/01/23 职场文书
英语故事演讲稿
2014/04/29 职场文书
计算机求职信
2014/07/02 职场文书
车间主任岗位职责
2015/02/03 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
2015年党总支工作总结
2015/05/25 职场文书
中国合伙人观后感
2015/06/02 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
吃通javascript正则表达式
2021/04/21 Javascript
python 中yaml文件用法大全
2021/07/04 Python