写了一个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 | 函数 | 可选,用于被动式触发事件。 |
- 切换卡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>