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元素。
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>

(责任编辑：admin)

搜索

热门标签:

jquery tabs插件