jquery tabs插件

来源：互联网发布：淘宝省油宝有用吗编辑：程序博客网时间：2024/05/01 08:24

写了一个jquery tabs插件，使用事件代理处理事件。

结构层是群里深度讨论得出的最好的结构。

<dlid="aaa">
  <dt><a>切换卡1</a><a>切换卡2</a><a>切换卡3</a></dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
  <dd>内容3</dd>
</dl>

selector字符串必须，容器的CSS选择符，最好符合我上面给出的结构，为一个dl元素。tabsSelector字符串可选，切换卡的通用选择符，最好符合我上面给出的结构，为dt元素下的一个a元素。panelsSelector字符串可选，切换卡的通用选择符，最好符合我上面给出的结构，为一个dd元素。selected数字可选，默认选择中的切换卡的索引值。select函数可选，用于主动式触发事件。click函数可选，用于被动式触发事件。remove函数可选，移除某个切换卡与对应的面板。

切换卡1切换卡2切换卡3: 内容1; 内容2; 内容3

<!doctype html> 
<html> 
  <head>
    <title>$.tabs</title>
    <style>
      .dom_tabs_selected {
        background:#6363c1; 
      }
  
    </style>
    <script src="javascripts/jquery.js"></script>
    <script>
      $(function(){
        $.tabs =function(obj){
          return(this instanceof $.tabs) ? this.init.apply(this,arguments) :new $.tabs(obj)
        }
        //主动事件 通过编程触发
        //被动事件 由用户的行为触发
        $.tabs.prototype = {
          init:function(obj){
            varthat = this;
            //配置属性
            $.extend(this,{
              selectedClass:"dom_tabs_selected",
              tabsSelector:">dt a",
              panelsSelector:">dd",
              click:$.noop,
              selected:0
            }, obj || { })
  
            this.ui = $(obj.selector);
            this.tabs = this.ui.find(this.tabsSelector);
            this.panels =this.ui.find(this.panelsSelector);
              
            this.select(this.selected)
            this.tabs.live("click",function(){
              varindex = that.tabs.index(this);
              that._switch.call(that,index)
              that.click.call(this,index,that);
            });
          },
          _switch:function(index){
            this.tabs.removeClass(this.selectedClass).eq(index).addClass(this.selectedClass);
            this.panels.hide().eq(index).show();
          },
          select:function(index,callback){
            index = ~~index;
            this._switch(index);
            callback && callback.call(this.tabs[index],index,this);
          },
          remove:function(index,callback){
            index = ~~index;
            this.tabs.eq(index).remove();
            this.panels.eq(index).remove();
            callback && callback.call(this.tabs[index],index,this);
          }
        }
  
        vartabs = $.tabs({ 
          selector:"#aaa",
          selected:1,
          click:function(index,instance){
             alert(index+"  |  "+this.tagName+" | "+instance.panels.eq(index).text()) 
          }
        });
      });
  
    </script>
  </head>
  <body>
    <dl id="aaa">
      <dt><a>切换卡1</a><a>切换卡2</a><a>切换卡3</a></dt>
      <dd>内容1</dd>
      <dd>内容2</dd>
      <dd>内容3</dd>
    </dl>
  </body>
</html> 