jQuery插件的实现

85931235

2012-02-14

关注关注

一直在研究jQuery的插件问题，发现了其中一些问题，写在这里供以后记忆，以下是js代码：

[html]

<script type="text/javascript">
if (jQuery)(function($) {
//定义Testl类属性为params
var liCount = 0 ;
var Test = function(){
this.params = { "daley": 5 };
this.index = 0;
this.enable = true;
};
//定义方法为create 参数是src（jQuery对象指向div） data是对象传进来的{daley:3}
Test.prototype = {
create : function(src,data){
var self = this;
self.src = src;
//将Test的属性和传入的data融合返回对象（data将覆盖this.params）
self.params = $.extend({}, self.params,data);
//添加业务逻辑
src.addClass("moive");
var w = src.width();
var h = src.height();
var liArray = src.find("li");
liCount = liArray.size();
if (liCount > 1) {
var str = '<div style="position:absolute; left:' + (w - 10 - liCount * 20) + 'px; top:' + (h - 25) + 'px;">';
for (var i = 1; i <= liCount; i++) {
str += '<span class="txt">' + i + '</span>';
}
str += '</div>';
src.append(str);
src.find("li:gt(0)").hide();//大于0的li元素隐藏
src.find("span:first").addClass("selected");
var spanArray = src.find("span");
spanArray.bind("click", function() {
self.index = $(this).text() - 1;
if (self.index >= self.count) return;
spanArray.removeClass("selected");
$(this).addClass('selected');
liArray.hide().eq(self.index).fadeIn("slow");
//实现图片淡出也可以自定义其他图片显示效果
});
self.t = setTimeout(function() { self.showAuto(); }, self.params.daley * 1000);
src.hover(function() {
self.enable = false;
clearTimeout(self.t);
},
function(){
self.enable = true;
clearTimeout(self.t);
self.t = setTimeout(function() { self.showAuto(); },self.params.daley * 1000);
});
}
},
showAuto: function() {
var self = this;
if (self.enable) {
selfself.index = self.index >= (liCount - 1) ? 0 : self.index + 1;
self.src.find("span").eq(self.index).trigger('click');
clearTimeout(self.t);
self.t = setTimeout(function() { self.showAuto(); }, self.params.daley * 1000);
}
}
//业务逻辑结束
};
$.fn.extend({"xdMoive":function(method){
var create1 = function(src, data){
if(src.tagName.toLowerCase()!='div')
return;
src1=$(src); //将DOM对象转换为jQuery对象
if(src1.data("xdMoive")!=undefined)
return;
var test = new Test();
test.create(src1,data);
src1.data("xdMoive",test);
}
switch(method) {
default:
$(this).each(function(){
//alert(this.tagName.toLowerCase());
create1(this,method);//此时this是DOM对象指向div
});
break;
}
//alert($(this).attr("class"));
return $(this);//此时$(this)是jQuery对象指向div
}
});
})(jQuery);
//调用闭包方法
$(function(){
$(".div").xdMoive({daley:2});
});
</script>

此方法实现了图片的淡出效果；总结了一个自己的jQuery的插件框架，自己日常用足够。在此希望高手指出不足之处，小弟谢过。。。

以下是个人总结的jQuery的插件框架：

[javascript]

if(jQuery)(function($){
var Ctl=function(){
this.params={width:"100px", height:"10px", text:"test"}
}
Ctl.prototype={
create:function(src, data) {
var self = this;
self.src = src;
self.params = $.extend({}, self.params,data);
//业务逻辑的实现
src.width(self.params.width);
src.height(self.params.height);
src.val(self.params.text);
}
};
$.fn.extend({"xdText":function(method){
var create1 = function(src, data){
if(src.tagName.toLowerCase()!='textarea')
return;
src1=$(src);
if(src1.data("xdText")!=undefined)
return;
var ctl=new Ctl();
ctl.create(src1,data);
src1.data("xdText",ctl);
}
switch(method) {
default://默认情况下执行
$(this).each(function(){ //$(this)指向的是xdTest本身<pre name="code" class="javascript"> create1(this,method);//将调用此方法的DOM对象传入（这里的this指向的是textarea），method指向的是{text:"..",
//height:"100px"}<pre name="code" class="javascript"><pre name="code" class="javascript"> });
break;
}
//alert($(this).height()+'qqq222');
return $(this);//返回调��时候传入的DOM对象
}
});
})(jQuery)
$(function(){//调用此插件的对象
$("textarea").xdText({text:"hello world",height: "100px"});
});