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>