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>