Ruby's Louvre

每天学习一点点算法

导航

jquery tabs插件

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

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

    <dl id="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){
            var that = 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(){
              var index = 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);
          }
        }

        var tabs = $.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>

posted on 2010-09-21 09:31  司徒正美  阅读(14308)  评论(12)  编辑  收藏  举报