jQuery插件的实现

jQuery插件的实现

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

[html]

1. <script type="text/javascript">  
2.     if (jQuery)(function($) {  
3.                          //定义Testl类 属性为params  
4.                          var liCount = 0 ;  
5.                           var Test = function(){  
6.                               this.params = { "daley": 5 };  
7.                               this.index = 0;  
8.                               this.enable = true;  
9.                               };  
10.                           //定义方法为create 参数是src（jQuery对象  指向div） data是对象传进来的{daley:3}  
11.                           Test.prototype = {  
12.                               create : function(src,data){  
13.                                   var self = this;  
14.                                   self.src = src;  
15.                                   //将Test的属性和传入的data融合返回对象（data将覆盖this.params）  
16.                                   self.params = $.extend({}, self.params,data);  
17.                                   //添加业务逻辑  
18.                                   src.addClass("moive");  
19.                                   var w = src.width();  
20.                                   var h = src.height();  
21.                                   var liArray = src.find("li");  
22.                                   liCount = liArray.size();  
23.                                   if (liCount > 1) {  
24.                                     var str = '<div style="position:absolute; left:' + (w - 10 - liCount * 20) + 'px; top:' + (h - 25) + 'px;">';  
25.                                     for (var i = 1; i <= liCount; i++) {  
26.                                         str += '<span class="txt">' + i + '</span>';  
27.                                     }  
28.                                  str += '</div>';  
29.                                   
30.                                  src.append(str);  
31.                                  src.find("li:gt(0)").hide();//大于0的li元素隐藏  
32.                                  src.find("span:first").addClass("selected");  
33.                                  var spanArray = src.find("span");  
34.                                   
35.                              spanArray.bind("click", function() {  
36.                                 self.index = $(this).text() - 1;  
37.                                 if (self.index >= self.count) return;  
38.               
39.                                     spanArray.removeClass("selected");  
40.                                     $(this).addClass('selected');  
41.                   
42.                                     liArray.hide().eq(self.index).fadeIn("slow");  
43.                                     //实现图片淡出 也可以自定义其他图片显示效果  
44.                                 });  
45.                                   
46.                                   
47.                                   
48.                             self.t = setTimeout(function() { self.showAuto(); }, self.params.daley * 1000);  
49.                             src.hover(function() {  
50.                                         self.enable = false;  
51.                                         clearTimeout(self.t);  
52.                                     },  
53.                                     function(){  
54.                                         self.enable = true;  
55.                                         clearTimeout(self.t);  
56.                                         self.t = setTimeout(function() { self.showAuto(); },self.params.daley * 1000);  
57.                                     });  
58.                                 }  
59.                             },  
60.                               
61.                             showAuto: function() {  
62.                                         var self = this;  
63.                                           
64.                                         if (self.enable) {  
65.                                             selfself.index = self.index >= (liCount - 1) ? 0 : self.index + 1;  
66.                                             self.src.find("span").eq(self.index).trigger('click');  
67.                                             clearTimeout(self.t);  
68.                                             self.t = setTimeout(function() { self.showAuto(); }, self.params.daley * 1000);  
69.                                         }  
70.                                     }  
71.                                     //业务逻辑结束  
72.                             };  
73.                           
74.                          $.fn.extend({"xdMoive":function(method){  
75.                                                 var create1 = function(src, data){  
76.                                                     if(src.tagName.toLowerCase()!='div')  
77.                                                         return;  
78.                                                       
79.                                                     src1=$(src); //将DOM对象转换为jQuery对象  
80.                                                     if(src1.data("xdMoive")!=undefined)  
81.                                                         return;      
82.                                                     var test = new Test();  
83.                                                     test.create(src1,data);  
84.                                                     src1.data("xdMoive",test);      
85.                                                 }  
86.                                                 switch(method) {  
87.                                                     default:  
88.                                                     $(this).each(function(){  
89.                                                                           //alert(this.tagName.toLowerCase());  
90.                                                         create1(this,method);//此时this是DOM对象  指向div  
91.                                                     });  
92.                                                     break;  
93.                                                 }  
94.                                                 //alert($(this).attr("class"));  
95.                                                 return $(this);//此时$(this)是jQuery对象  指向div  
96.                                             }  
97.                                         });  
98.                           })(jQuery);  
99.     //调用闭包方法  
100.     $(function(){  
101.             $(".div").xdMoive({daley:2});  
102.         });  
103. </script>  

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

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

[javascript]

1. if(jQuery)(function($){  
2.     var Ctl=function(){  
3.         this.params={width:"100px", height:"10px", text:"test"}  
4.     }  
5.       
6.     Ctl.prototype={  
7.         create:function(src, data) {  
8.             var self = this;  
9.             self.src = src;  
10.               
11.             self.params = $.extend({}, self.params,data);  
12.             //业务逻辑的实现   
13.             src.width(self.params.width);  
14.             src.height(self.params.height);   
15.             src.val(self.params.text);  
16.         }  
17.     };  
18.       
19.     $.fn.extend({"xdText":function(method){  
20.                                     
21.             var create1 = function(src, data){  
22.                 if(src.tagName.toLowerCase()!='textarea')  
23.                     return;  
24.                   
25.                 src1=$(src);  
26.                 if(src1.data("xdText")!=undefined)  
27.                     return;  
28.                   
29.                 var ctl=new Ctl();  
30.                 ctl.create(src1,data);  
31.                 src1.data("xdText",ctl);  
32.                   
33.             }  
34.             switch(method) {  
35.                 default://默认情况下执行   
36.                 $(this).each(function(){ //$(this)指向的是xdTest本身<pre name="code" class="javascript">                    create1(this,method);//将调用此方法的DOM对象传入（这里的this指向的是textarea），method指向的是{text:"..",   
37. //height:"100px"}<pre name="code" class="javascript"><pre name="code" class="javascript">               });   
38.                 break;  
39.             }  
40.             //alert($(this).height()+'qqq222');   
41.               
42.             return $(this);//返回调用时候传入的DOM对象   
43.         }  
44.     });  
45. })(jQuery)  
46. $(function(){//调用此插件的对象   
47. $("textarea").xdText({text:"hello world",height: "100px"});  
48.  });  
49.    

就目前个人的应用中  感觉够用了 ，有高手看见请指出不足之处，，谢谢。