溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

用Jquery寫tab插件(支持點擊和移動及其他事件)

發(fā)布時間：2020-06-24 16:11:24 來源：網(wǎng)絡(luò) 閱讀：2209 作者：涂根華 欄目：web開發(fā)

今天看了一下 Jquery權(quán)威指南這本書的插件，提到Jquery插件分為兩種 1 對象級別插件 是給Jquery添加對象方法 調(diào)用方法是 $.fn.方法名 2 類級別插件 即給Jquery添加新的全局函數(shù) 相當(dāng)于給Jquery類本生添加方法，典型的是 $.AJAX(); 今天也寫了一個tab插件 支持鼠標(biāo)移動和 點擊 當(dāng)然目前常見的只有這兩種 當(dāng)然如果有其他的事件  你可以自定義事件！我用的是對象級別寫插件的 對象級別插件 調(diào)用的方式是：$("#ID名稱"或者"類名稱").插件名稱({switchingMode:"click"}); 或者 mouseover , 我引用結(jié)構(gòu)還是以前的tab選顯卡的結(jié)構(gòu) 樣式也是一樣的！

下面是HTML結(jié)構(gòu)及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>無標(biāo)題文檔</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> 

調(diào)用的方式 如上圖所示：

JS

 

  1. // JavaScript Document  
  2. /**    
  3. 用法：$("#ID名稱").tabsPlug({switchingMode:"click"});  
  4. 參數(shù)解釋：switchingMode是面板切換的模式，如switchingMode:"mouseover"則鼠標(biāo)移動至選項卡切換面板,默認(rèn)為click。  
  5.  
  6. 整體tabs骨架不變，依然是常用的結(jié)構(gòu)如下：  
  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. 樣式：此樣式為默認(rèn)無任何效果樣式，可根據(jù)需要修改插件樣式  
  20. 插件分為 1 對象級別插件 2 類別插件   
  21. 對象級別插件 調(diào)用的方式是：$("#ID名稱").插件名稱({switchingMode:"click"}); 或者 mouseover  
  22. 類別插件 ： $.定義的方法();  
  23. 下面是對象級別插件   
  24. */ 
  25. ;(function($){  
  26.     $.fn.extend({  
  27.         "tabsPlug" : function(options){  
  28.             var defaults = {switchingMode : "click"}; //定義默認(rèn)切換模式 為click 也可以自定義mouseover  
  29.             var opts = $.extend({},defaults,options); // 將defaults 和 options 參數(shù)合并到{}   
  30.             var obj = $(this);  
  31.             var currentIndex = 0;  
  32.             $(".tab li:first",obj).addClass("on");  
  33.             /* obj對象為當(dāng)前調(diào)用該插件方法的對象。而后面bind里面的clickIndex = $(".tab li", obj).index($(this));意思就是obj對象下面的ul中的li元素索引index($(this))這里的$(this)則是在li元素中找到當(dāng)前l(fā)i元素的索引。 */ 
  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); 

在頁面上這樣調(diào)用 是：$("#ID名稱").插件名稱({switchingMode:"click"}); 或者 mouseover 默認(rèn)情況下 $("#ID名稱").插件名稱() 即調(diào)用點擊 當(dāng)要調(diào)用鼠標(biāo)移上去時候 這樣調(diào)用就可以了 $("#ID名稱").插件名稱({switchingMode:"mouseover"});  其實對象級別插件的寫法是 ;(function($){$.fn.extend({})})(jQuery)  這樣的結(jié)構(gòu) 當(dāng)然還有一種寫法 是 $.fn.插件名稱！代碼里面都有注釋：下面我們來分析下這個插件代碼：

1 ;(function($){$.fn.extend({})})(jQuery)  這樣的固定結(jié)構(gòu) 不用說啊 不明白的地方可以google下 然后定義一個函數(shù) 并且?guī)Я艘粋€參數(shù) 目地是為了自定義事件類型！

2 var defaults = {switchingMode : "click"};這句話意思是 定義默認(rèn)類型是點擊事件  $("#ID名稱").插件名稱()  這樣調(diào)用 默認(rèn)情況下是點擊  如果想要其他事件  可以這樣調(diào)用 是：$("#ID名稱").插件名稱({switchingMode:"mouseover或者其他事件類型"});

3 var opts = $.extend({},defaults,options); 這句話代碼的意思是 將defaults和options參數(shù)合并到{}這里面來 然后賦值給一個變量 同時改變了{(lán)}這里面的  結(jié)構(gòu).

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元素中找到當(dāng)前l(fā)i元素的索引。接下來代碼就不用多說?。?/p>

附件：http://down.51cto.com/data/2359396
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手