电竞比分网-中国电竞赛事及体育赛事平台

分享

javascript封裝的Tab類(lèi)

 goldbomb 2007-01-22

javascript封裝的Tab類(lèi)-附源碼

10:35下午 一月 19, 2007 in category General by luchunwei

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

o_LuTab.png
<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

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類(lèi)似文章 更多