预览效果

a1
b1
c1
d1
a
b
c
d
fdsfafd
a
b
c
fdsfafd

API

类名： TabPage

属性：

类型 属性 说明
object(HTML) tabPDiv 选项卡的最外层
string idStr tabPDiv的id和用于生成选项卡菜单的id和选项卡内容层的id
string tabPDivCss tabPDiv的样式
object(HTML) tabMenu 选项卡菜单的父层
object(HTML) tabConDiv 选项卡内容层的父层
array tabObj 选项卡内容对象

方法：

属性 参数 功能 例子
setTabObj (Array arrayObj) 设置选项卡的内容层内容 tabPage.setTabObj([{title:"11",id:"a1"},{title:"21",id:"b1"}])
setTabPDivCss (String css) 设置选项卡最外层的样式 tabPage.setTabPDivCss("padding:5px;border:1px solid #CCC;background:#eee;")
addedTo (String id) 选项卡加入到哪个位置 tabPage.addedTo("y");

使用说明


<div id="x" style="float:left;width:400px;margin-right:10px;"></div>
<div id="y" style="width:400px;float:right;margin-left:10px;"></div>

<div id="a1" style="float:left">a1</div>
<div id="b1" style="float:right">b1</div>
<div id="c1">c1</div>
<div id="d1">d1</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>


window.onload = function(){
	var tabPage = new TabPage("dc");//设置选项卡最外层的id
	tabPage.setTabPDivCss("padding:5px;border:1px solid #CCC;");//设置最外层的样式
	tabPage.setTabObj([{title:"1",id:"a"},{title:"2",id:"b"},{title:"3",id:"c"},{title:"4",id:"d"}]);//设置选项卡内容层
	tabPage.addedTo("x");//把选项卡添加到id是"x"的元素中


	var tabPage = new TabPage("dcc");	
	tabPage.setTabPDivCss("padding:5px;border:1px solid #CCC;background:#eee;");
	tabPage.setTabObj([{title:"11",id:"a1"},{title:"21",id:"b1"},{title:"31",id:"c1"},{title:"41",id:"d1"}]);
	tabPage.addedTo("y");
}