今天看了一下 Jquery權威指南這本書的外掛，提到Jquery外掛分為兩種 1 物件級別外掛 是給Jquery新增物件方法 呼叫方法是 $.fn.方法名 2 類級別外掛 即給Jquery新增新的全域性函式 相當於給Jquery類本生新增方法，典型的是 $.AJAX(); 今天也寫了一個tab外掛 支援滑鼠移動和 點選 當然目前常見的只有這兩種 當然如果有其他的事件  你可以自定義事件！我用的是物件級別寫外掛的 物件級別外掛 呼叫的方式是：$(“#ID名稱”或者”類名稱”).外掛名稱({switchingMode:”click”}); 或者 mouseover , 我引用結構還是以前的tab選顯示卡的結構 樣式也是一樣的！

下面是HTML結構及CSS

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>無標題文件</title> 
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
  7. <style type="text/css"> 
  8. ul,li,div{ margin:0; padding:0;}    
  9. ul,li{ list-style:none;}    
  10. .tabWrap{ width:450px; margin:0 auto 50px; overflow:hidden;}    
  11. .tab{ background:#F93; overflow:hidden; width:450px;}    
  12. .tab li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer; height:22px; line-height:22px;}    
  13. .tab li.on{background:#F60;}    
  14. .tabContent .p-content{ padding:20px; border:1px solid #ddd; border-top:0 none; }    
  15. .tabContent .hide{ display:none;}  
  16. </style> 
  17. <script src="jQuery.plug.tab.js" type="text/javascript"></script> 
  18. </head> 
  19.  
  20. <body> 
  21.     <div class="tabWrap" id="tabWrap">   
  22.         <ul class="tab">   
  23.             <li>選項卡1</li>   
  24.             <li>選項卡2</li>   
  25.             <li>選項卡3</li>   
  26.         </ul>   
  27.         <div class="tabContent">   
  28.             <div class="p-content">1111</div>   
  29.             <div class="p-content hide">222</div>   
  30.             <div class="p-content hide">3333</div>   
  31.         </div>   
  32.     </div>   
  33.  <script type="text/javascript"> 
  34.     $("#tabWrap").tabsPlug({switchingMode : "mouseover"});  
  35.  </script> 
  36. </body> 
  37. </html> 

呼叫的方式 如上圖所示：

JS

 

  1. // JavaScript Document  
  2. /**    
  3. 用法：$("#ID名稱").tabsPlug({switchingMode:"click"});  
  4. 引數解釋：switchingMode是皮膚切換的模式，如switchingMode:"mouseover"則滑鼠移動至選項卡切換皮膚,預設為click。  
  5.  
  6. 整體tabs骨架不變，依然是常用的結構如下：  
  7. <div class="tabWrap" id="tabWrap">   
  8.         <ul class="tab">   
  9.             <li>選項卡1</li>   
  10.             <li>選項卡2</li>   
  11.             <li>選項卡3</li>   
  12.         </ul>   
  13.         <div class="tabContent">   
  14.             <div class="p-content">1111</div>   
  15.             <div class="p-content hide">222</div>   
  16.             <div class="p-content hide">3333</div>   
  17.         </div>   
  18.     </div>   
  19. 樣式：此樣式為預設無任何效果樣式，可根據需要修改外掛樣式  
  20. 外掛分為 1 物件級別外掛 2 類別外掛   
  21. 物件級別外掛 呼叫的方式是：$("#ID名稱").外掛名稱({switchingMode:"click"}); 或者 mouseover  
  22. 類別外掛 ： $.定義的方法();  
  23. 下面是物件級別外掛   
  24. */ 
  25. ;(function($){  
  26.     $.fn.extend({  
  27.         "tabsPlug" : function(options){  
  28.             var defaults = {switchingMode : "click"}; //定義預設切換模式 為click 也可以自定義mouseover  
  29.             var opts = $.extend({},defaults,options); // 將defaults 和 options 引數合併到{}   
  30.             var obj = $(this);  
  31.             var currentIndex = 0;  
  32.             $(".tab li:first",obj).addClass("on");  
  33.             /* obj物件為當前呼叫該外掛方法的物件。而後面bind裡面的clickIndex = $(".tab li", obj).index($(this));意思就是obj物件下面的ul中的li元素索引index($(this))這裡的$(this)則是在li元素中找到當前li元素的索引。 */ 
  34.             $(".tab li").bind(opts.switchingMode,function(){  
  35.                 if(currentIndex != $(".tab li",obj).index($(this))){  
  36.                     currentIndex = $(".tab li",obj).index($(this));   
  37.                     $(".tab li",obj).removeClass("on")  
  38.                     $(this).addClass("on");  
  39.                     $(".p-content",obj).eq(currentIndex).show().siblings().hide();  
  40.                 }     
  41.             });  
  42.             return $(this);   
  43.         }     
  44.     })  
  45. })(jQuery); 

在頁面上這樣呼叫 是：$(“#ID名稱”).外掛名稱({switchingMode:”click”}); 或者 mouseover 預設情況下 $(“#ID名稱”).外掛名稱() 即呼叫點選 當要呼叫滑鼠移上去時候 這樣呼叫就可以了 $(“#ID名稱”).外掛名稱({switchingMode:”mouseover”});  其實物件級別外掛的寫法是 ;(function($){$.fn.extend({})})(jQuery)  這樣的結構 當然還有一種寫法 是 $.fn.外掛名稱！程式碼裡面都有註釋：下面我們來分析下這個外掛程式碼：

1 ;(function($){$.fn.extend({})})(jQuery)  這樣的固定結構 不用說啊 不明白的地方可以google下 然後定義一個函式 並且帶了一個引數 目地是為了自定義事件型別！

2 var defaults = {switchingMode : “click”};這句話意思是 定義預設型別是點選事件  $(“#ID名稱”).外掛名稱()  這樣呼叫 預設情況下是點選  如果想要其他事件  可以這樣呼叫 是：$(“#ID名稱”).外掛名稱({switchingMode:”mouseover或者其他事件型別”});

3 var opts = $.extend({},defaults,options); 這句話程式碼的意思是 將defaults和options引數合併到{}這裡面來 然後賦值給一個變數 同時改變了{}這裡面的  結構.

4 $(“.tab li”).bind(opts.switchingMode,function(){
    if(currentIndex != $(“.tab li”,obj).index($(this))){
     currentIndex = $(“.tab li”,obj).index($(this)); 
     $(“.tab li”,obj).removeClass(“on”)
     $(this).addClass(“on”);
     $(“.p-content”,obj).eq(currentIndex).show().siblings().hide();
    } 
   }); 這樣一段程式碼 bind裡面的clickIndex = $(“.tab li”, obj).index($(this));意思就是obj物件下面的ul中的li元素索引index($(this))這裡的$(this)則是在li元素中找到當前li元素的索引。接下來程式碼就不用多說啊！