JQuery插件写法（以Tab插件为例子）

一.前言

　　把JQuery某个功能封装成插件是为了能更方便的重用，提供效率。

二.效果

　　　　　　　　

　　支持IE6和最新的chrome浏览器。

三.插件代码

jquery.tab.js

   
     

    
      
    
      (
    
      function
    
      ($) {
 
    
      //
    
      2010-11-26
    
      

    
       $.fn.extend({
 
    
      //
    
      Tab插件名称
    
      

    
       XQHTab: 
    
      function
    
      (options) {
 
    
      //
    
      默认值
    
      

    
       
    
      var
    
       defaults 
    
      =
    
       {
 tabSelected: 
    
      "
    
      tab_selected
    
      "
    
      ,
 tabWidth: 
    
      "
    
      100%
    
      "
    
      ,
 autoHeight: 
    
      "
    
      true
    
      "
    
      
 };

 
    
      var
    
       options 
    
      =
    
       $.extend(defaults, options);

 $(
    
      this
    
      ).css(
    
      "
    
      width
    
      "
    
      , options.tabWidth);

 
    
      //
    
      选项卡 this指通过当前选择器获取的JQuery对象
    
      

    
       
    
      var
    
       tab 
    
      =
    
       $(
    
      "
    
      .tab_menu ul li
    
      "
    
      , 
    
      this
    
      );
 
    
      //
    
      选项内容
    
      

    
       
    
      var
    
       tabContent 
    
      =
    
       $(
    
      "
    
      .tab_box > div
    
      "
    
      , 
    
      this
    
      );

 
    
      if
    
       (options.autoHeight 
    
      !=
    
       
    
      "
    
      true
    
      "
    
      ) {
 tabContent.css(
    
      "
    
      height
    
      "
    
      , options.autoHeight);
 }

 
    
      //
    
      单击选项卡
    
      

    
       tab.click(
    
      function
    
      () {
 $(
    
      this
    
      ).addClass(options.tabSelected).siblings().removeClass(options.tabSelected);
 
    
      var
    
       curIndex 
    
      =
    
       tab.index(
    
      this
    
      );
 tabContent.eq(curIndex).show().siblings().hide();
 });

 
    
      //
    
      return this使JQuery方法可链
    
      

    
       
    
      return
    
       
    
      this
    
      ;
 }
 });
})(jQuery);
   
     

 

 

 　　关键代码都加注释了,应该不难理解。

四.css代码

jquery.tab.css

   
     

    
      
    
      .tab
    
      {
    
       width
    
      :
    
      98%
    
      ;
    
      }
    
      
.tab_menu ul
    
      {
    
       width
    
      :
    
      98%
    
      ;
    
       list-style
    
      :
    
      none
    
      ;
    
      }
    
      
.tab_menu li
    
      {
    
       list-style
    
      :
    
      none
    
      ;
    
       float
    
      :
    
      left
    
      ;
    
       margin-right
    
      :
    
      4px
    
      ;
    
       display
    
      :
    
      block
    
      ;
    
       border-right
    
      :
    
      #4488BB solid 1px
    
      ;
    
      border-left
    
      :
    
      #4488BB solid 1px
    
      ;
    
       border-top
    
      :
    
      #4488BB solid 1px
    
      ;
    
       cursor
    
      :
    
      pointer
    
      ;
    
       color
    
      :
    
      #000
    
      ;
    
       height
    
      :
    
      20px
    
      ;
    
       width
    
      :
    
      auto
    
      ;
    
       padding
    
      :
    
      5px
    
      ;
    
      }
    
      
.tab_box
    
      {
    
       border
    
      :
    
      solid #4488BB 1px
    
      ;
    
       padding
    
      :
    
      4px
    
      ;
    
       height
    
      :
    
      auto
    
      ;
    
       width
    
      :
    
      98%
    
      ;
    
       float
    
      :
    
      left
    
      ;
    
      }
    
      
.tab_selected
    
      {
    
       background
    
      :
    
      #4488BB
    
      ;
    
      }
    
      
.tab_displayNone
    
      {
    
       display
    
      :
    
      none
    
      ;
    
      }
    
      
li
    
      {
    
       background
    
      :
    
      #EEEEEE
    
      ;
    
       list-style
    
      :
    
      none
    
      ;
    
      }
   
     

五.插件使用方法

代码

   
     

    
      
    
       
    
      <
    
      script 
    
      type
    
      ="text/javascript"
    
      >
    
      
 $(
    
      function
    
      () {
 $(
    
      "
    
      .tab
    
      "
    
      ).XQHTab();
 });
 
    
      </
    
      script
    
      >
    
      

 
    
      <
    
      div 
    
      class
    
      ="tab"
    
      >
    
      
 
    
      <
    
      div 
    
      class
    
      ="tab_menu"
    
      >
    
      
 
    
      <
    
      ul
    
      >
    
      
 
    
      <
    
      li 
    
      class
    
      ="tab_selected"
    
      >
    
      JQuery
    
      </
    
      li
    
      >
    
      
 
    
      <
    
      li
    
      >
    
      ExtJs
    
      </
    
      li
    
      >
    
      
 
    
      <
    
      li
    
      >
    
      Sliverlight
    
      </
    
      li
    
      >
    
      
 
    
      </
    
      ul
    
      >
    
      
 
    
      </
    
      div
    
      >
    
       
 
    
      <
    
      div 
    
      class
    
      ="tab_box"
    
      >
    
      
 
    
      <
    
      div
    
      >
    
      Hello JQuery!
    
      </
    
      div
    
      >
    
      
 
    
      <
    
      div 
    
      class
    
      ="tab_displayNone"
    
      >
    
      Hello ExtJs!
    
      </
    
      div
    
      >
    
      
 
    
      <
    
      div 
    
      class
    
      ="tab_displayNone"
    
      >
    
      Hello Sliverlight!
    
      </
    
      div
    
      >
    
      
 
    
      </
    
      div
    
      >
    
      
 
    
      </
    
      div
    
      >
   
     

可以通过设置autoHeight属性来控制内容的高度默认为true自动适应高低，tabWidth来控制tab的宽度,默认为100%

六.总结

　　由于以前用户几乎清一色的用IE6,或者用Ext或Sliverlight开发,使得对浏览器兼容方面几乎不懂。经过这次自己写插件在IE6和chorme上的测试，刚开始在IE6上都正确显示，但跑到chrome上样式就走样了。经过查询,原来是浮动的关系。