先上个二级tabs截图:
代码如下:
class:
/*
* CnYuTabber v0.3 01.25,09
*/
var CnYuTabber = new Class({
Implements: Options,
options: {
mousetype: 'click',
headContainer: '.TabTitle',
tabhead: 'li',
bodyContainer: '.TabContent',
tabbody: 'div'
},
initialize: function(id, options) {
this.setOptions(options);
var mousetype = this.options.mousetype;
var headContainer = this.options.headContainer;
var bodyContainer = this.options.bodyContainer;
var tabhead = this.options.tabhead;
var tabbody = this.options.tabbody;
var titles = $$('#' + id + ' ' + headContainer + ' ' + tabhead);
var contents = $$('#' + id + ' ' + bodyContainer + ' ' + tabbody);
this.titles = titles;
this.contents = contents;
this.index = 0;
titles.each(function(title) {
title.addEvent(mousetype, function(event) {
this.index = titles.indexOf(title);
titles.each(function(content, index) {
if (content == title) {
content.className = 'active';
contents[index].setStyle('display', 'block');
this.index = index;
}
else {
content.className = 'normal';
contents[index].setStyle('display', 'none');
}
});
});
});
},
select: function(index) {
this.index = index;
return this.titles[index].fireEvent(this.options.mousetype);
}
});
====================下面是测试代码==============================
css
.none{display:none;}
#demo active{color:#f90;}
html
<div id="demo">
<div class="TabTitle">
<ul>
<li class="active">title1</li>
<li class="normal">title2</li>
</ul>
</div>
<div class="TabContent">
<div>
content1
</div>
<div class="none">
content2
</div>
</div>
</div>
调用示例:
var tab=new CnYuTabber('demo');
http://files.cnblogs.com/cisky/demo.rar