tab选项卡

本选项卡基于prototype.js

参数说明:
　　tab_id: 选项卡ID
　　tab_cont_id: 选项内容ID

 

可选参数：
　　defaultTab: 默认选择的选项卡序号
　　selectCss: 选中时的样式名称
　　mouseEvent: 选中选项卡的鼠标方法

常用方法：
　　getNowTab() 返回当前选中的选项卡
　　getDefaultTab() 返回默认选项卡
　　其它方法见代码

 

用法：

var tb = new tabControl('tab','tab_cont');

也可以这样用：

var tb = new tabControl('tab','tab_cont',{
		defaultTab: 1,
		selectCss: 'select', //选中时的样式
		mouseEvent: 'click', //选中选项卡的鼠标方法
});

 注：｛｝内均为可选项

<input type="button" onclick="tb.getDefaultTab();" value="默认选项卡" />

 

代码：

/* 
*	tabControl -- tab选项卡 
*	versions 2.1 
*	by：dum 2012-03-14
*	tab_id:必须为 ul那一级的元素
*/
var tabControl = Class.create();
tabControl.prototype = {
	initialize:function (tab_id,tab_cont_id) {
		this.tab = $(tab_id);
        this.tabCont = $(tab_cont_id);
        this.options = Object.extend({
			defaultTab: 0,
			selectCss: 'select', //选中时的样式
			mouseEvent: 'click', //选中选项卡的鼠标方法
		}, arguments[2] || { });
		this.activate = this.options.defaultTab; //当前激活的tab顺序号
		this.tab.childElements().each(this.initEvent.bind(this));//初始化鼠标事件
		this.setTabByNum(this.options.defaultTab); //设置默认选项卡
	},
	initEvent:function(el){//初始化鼠标事件
		el.observe(this.options.mouseEvent, this.setTabBySelect.bind(this, el));
	},
	setTabBySelect:function(el){//选中选项(根据选择的标签)
		var n = this.tab.childElements().indexOf(el);
		this.setTabByNum(n);
		this.activate = n;
	},
	setTabByNum:function(n){//选中选项(根据标签序号)
		this.selectTab(this.tab.childElements()[n]);
		this.selectTabCont(this.tabCont.childElements()[n]);
	},
	selectTab:function(el){//选择选项卡
		var css = this.options.selectCss;
		el.siblings().each(function(s){
			if(s.hasClassName(css))s.removeClassName(css);
		});
		el.addClassName(css);
	},
	selectTabCont:function(dom){//选择选项卡内容
		dom.siblings().each(function(s){
			s.hide();
		});
		dom.show();
	},
	getNowTab:function(){//返回当前选项卡
		this.setTabByNum(this.activate);
	},
	getDefaultTab:function(){//返回默认选项卡
		this.setTabByNum(this.options.defaultTab);
	}
}

 

所用html：

    <ul class="css1"  id="tab">
        <li><a href="#"><u>设计类</u></a></li>
        <li><a href="#"><u>方案类</u></a></li>
        <li><a href="#"><u>网站类</u></a></li>
    </ul>

    <div class="css2"  id="tab_cont">
        <div>
            <h3>设计类。。。。。。。。。。</h3>。。。
        </div>
        <div>
            <h3>方案类。。。。。。。。</h3>。。。
        </div>
        <div>
            <h3>网站类。。。。。。。。。。</h3>。。。
        </div>
    </div>