Web UI中常常用到Tab,每次寫一堆HTML+css有點煩了,于是花了點時間整理了這個class,留備后用。
為了方便我引入了prototype 1.4,省掉一串鍵盤敲擊。
類比:www.live.com的Tab page
用法:
//首先載入: 'tab.js','prototype.js' and 'tab.css' in HTML page
//? ?mytab1=new Tab('tab1',top,left,width,height);//創建新Tab
//?? mytab1.addItem(name,contentid,type);//添加TabItem
//?? mytab1.delItem(name);//刪除TabItem
//?? 當然一般情況下操作鼠標即可完成添加/刪去工作.
//???點擊TabItem時動態調用 <li>標簽rev屬性指定的方法(要不要ajax就隨你喜歡了)
例子:

<html>
<head>
<script src='prototype.js'></script>
<script src='tab.js'></script>
<link rel=stylesheet type="text/css" href='tab.css'/>
</head>
<body>
<script><!--
//Test case
tab1=new Tab("tab1",100,10,600,300);
tab2=new Tab("tab2",180,60,600,300);
tab3=new Tab("tab3",260,110,600,300);
tab1.addItem('hello','id','CONTENT');
tab1.delItem('t2');
tab1.addItem();tab1.addItem();
tab2.addItem('hi','id','CONTENT');
tab2.addItem();tab2.addItem();
tab1.display();
tab2.display();
tab3.display();
--></script>
</body>
</html>
下載Tab.rar