歡迎來到Linux教程網
設為首頁 加入收藏
Linux教程網
Linux教程網
Linux教程網
您现在的位置： Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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 >';  
  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.    


就目前個人的應用中  感覺夠用了 ，有高手看見請指出不足之處，，謝謝。

			

			
   

			
  

			

			
			
			

			

				

					
Linux編程

					
					

						
						
jQuery 動態標簽生成插件

						
						
jQuery中的(function($){...})(jQuery)

						
						
jQuery擴展實現復選框批操作

						
						
jQuery實現的Ajax小例子

						
						
jQuery插件滑動器的使用

						
						
jQuery插件的應用之 --- 日歷

						
						
jQuery 實現全選（全不選）

						
						
jQuery實現Ajax

						
					

				

				
			

		

		

			

				
相關文章

				
			

			

				
  • Linux編程
    • 

  • SHELL編程
    • 

  • PERL編程
    •  
			
    
			
      
    
			
			
		
    
		
    
	
    

    

    
	
    
		Copyright © Linux教程網 All Rights Reserved