用Jquery寫tab外掛程式(支援點擊和移動及其他事件)

最後更新：2013-12-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

下面是HTML結構及CSS

 
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  <html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>無標題文檔</title> 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
  <style type="text/css"> 
  ul,li,div{ margin:0; padding:0;}    
  ul,li{ list-style:none;}    
  .tabWrap{ width:450px; margin:0 auto 50px; overflow:hidden;}    
  .tab{ background:#F93; overflow:hidden; width:450px;}    
  .tab li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer; height:22px; line-height:22px;}    
  .tab li.on{background:#F60;}    
  .tabContent .p-content{ padding:20px; border:1px solid #ddd; border-top:0 none; }    
  .tabContent .hide{ display:none;}  
  </style> 
  <script src="jQuery.plug.tab.js" type="text/javascript"></script> 
  </head> 
   
  <body> 
      <div class="tabWrap" id="tabWrap">   
          <ul class="tab">   
              <li>選項卡1</li>   
              <li>選項卡2</li>   
              <li>選項卡3</li>   
          </ul>   
          <div class="tabContent">   
              <div class="p-content">1111</div>   
              <div class="p-content hide">222</div>   
              <div class="p-content hide">3333</div>   
          </div>   
      </div>   
   <script type="text/javascript"> 
      $("#tabWrap").tabsPlug({switchingMode : "mouseover"});  
   </script> 
  </body> 
  </html>

調用的方式如所示：

 
  // JavaScript Document  
  /**    
  用法：$("#ID名稱").tabsPlug({switchingMode:"click"});  
  參數解釋：switchingMode是面板切換的模式，如switchingMode:"mouseover"則滑鼠移動至選項卡切換面板,預設為click。  
   
  整體tabs骨架不變，依然是常用的結構如下：  
  <div class="tabWrap" id="tabWrap">   
          <ul class="tab">   
              <li>選項卡1</li>   
              <li>選項卡2</li>   
              <li>選項卡3</li>   
          </ul>   
          <div class="tabContent">   
              <div class="p-content">1111</div>   
              <div class="p-content hide">222</div>   
              <div class="p-content hide">3333</div>   
          </div>   
      </div>   
  樣式：此樣式為預設無任何效果樣式，可根據需要修改外掛程式樣式  
  外掛程式分為 1 對象層級外掛程式 2 類別外掛程式   
  對象層級外掛程式 調用的方式是：$("#ID名稱").外掛程式名稱({switchingMode:"click"}); 或者 mouseover  
  類別外掛程式 ： $.定義的方法();  
  下面是對象層級外掛程式   
  */ 
  ;(function($){  
      $.fn.extend({  
          "tabsPlug" : function(options){  
              var defaults = {switchingMode : "click"}; //定義預設切換模式 為click 也可以自訂mouseover  
              var opts = $.extend({},defaults,options); // 將defaults 和 options 參數合并到{}   
              var obj = $(this);  
              var currentIndex = 0;  
              $(".tab li:first",obj).addClass("on");  
              /* obj對象為當前調用該外掛程式方法的對象。而後面bind裡面的clickIndex = $(".tab li", obj).index($(this));意思就是obj對象下面的ul中的li元素索引index($(this))這裡的$(this)則是在li元素中找到當前li元素的索引。 */ 
              $(".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();  
                  }     
              });  
              return $(this);   
          }     
      })  
  })(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://tugenhua.blog.51cto.com/3912301/730165

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More