亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

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

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

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

發布時間：2020-06-24 16:11:24 來源：網絡 閱讀：2209 作者：涂根華 欄目：web開發

今天看了一下 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元素的索引。接下來代碼就不用多說啊！

附件：http://down.51cto.com/data/2359396
向AI問一下細節

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手
通州区| 乌兰察布市| 固安县| 毕节市| 武清区| 乌海市| 宽甸| 遂溪县| 桃江县| 嘉善县| 满城县| 富源县| 英山县| 霍林郭勒市| 河津市| 阳西县| 巴彦淖尔市| 万州区| 永靖县| 福清市| 浠水县| 隆回县| 天柱县| 甘洛县| 汽车| 印江| 大安市| 南充市| 丹东市| 家居| 丰原市| 金平| 德钦县| 柘荣县| 桦川县| 徐水县| 资源县| 兴安盟| 宣威市| 英超| 营山县|