注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

创建自己的JQuery插件  

2010-05-18 20:58:21|  分类: Jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
                                                        创建自己的JQuery插件
JQuery插件的创建准则
1.给文件和函数命名
文件名以jquery为前缀
前缀后接插件名称
文件名以.js结尾
即使这样也要避免插件命名冲突,所以要与JQuery社区的现有插件保协调,请参照网页
http://docs.jquery.com/Plugins
2.小心$
因为我们无法知道页面作者是否打算调用$.noConflict()函数,来避免$与其他库冲突
所以我们必须使用小技巧来避免$的冲突
通常大家这麽做
(function($){
//插件的代码

})(jquery);

3.简化参数列表
当我们的函数必须使用很多参数时,我们可以将参数包装成对象
function manyarguments(a1,{a2:value2,a3:value3,a4:value4,a4:value4})
创建自定义的函数工具集
一个简单的例子
(function($){
$.helloWorld=function(){
alert('Hello World !');
}
})(jquery);

这是一个使字符串右对齐的方法
toFiexedWidth
(function($){
$.toFixedWidth = function(value,length,fill) {
if (!fill) fill = '0';
var result = value.toString();
var padding = length - result.length;
if (padding < 0) {
result = result.substr(-padding);
}
else {
for (var n = 0; n < padding; n++) result = fill + result;
}
return result;
};

})(jquery);

添加新的包装器方法
$.fn 是JQuery构造函数的prototype属性的别名
setReadOnly(state)
state 布尔型
(function($){
$.fn.setReadOnly = function(readyOnly){
return this.filter('input:text').attr('readyonly'.readyOnly)
.css('opacity',readyOnly?0.5:1.0);
}
})(jquery);

最后自定义自己的JQuery插件
这里有一段JQuery相册的代码
(function($){
var settings;

$.fn.photomatic = function(callerSettings) {
settings = $.extend({
photoElement: '#photomaticPhoto',
transformer: function(name) {
return name.replace(/thumbnail/,'photo');
},
nextControl: null,
previousControl: null,
firstControl: null,
lastControl: null
},callerSettings||{});
settings.photoElement = $(settings.photoElement);
settings.thumbnails = this.filter('img');
settings.thumbnails.each(function(n){this.index = n;});
settings.current = 0;
settings.thumbnails.click(function(){ showPhoto(this.index); });
settings.photoElement.click(function(){
showPhoto((settings.current+1) % settings.thumbnails.length);
});
$(settings.nextControl).click(function(){
showPhoto((settings.current+1) % settings.thumbnails.length);
});
$(settings.previousControl).click(function(){
showPhoto((settings.thumbnails.length+settings.current-1) %
settings.thumbnails.length);
});
$(settings.firstControl).click(function(){
showPhoto(0);
});
$(settings.lastControl).click(function(){
showPhoto(settings.thumbnails.length-1);
});
showPhoto(0);
return this;
};

var showPhoto = function(index) {
settings.photoElement
.attr('src',
settings.transformer(settings.thumbnails[index].src));
settings.current = index;
};

})(jQuery);


具体代码内容   请参考jQuery in Action
 
 
 
 
  评论这张
 
阅读(285)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017