春天花会开

***********

统计

留言簿(4)

阅读排行榜

评论排行榜

[原创]javascript封装的Tab类-附源码

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就随你喜欢了)
例子:

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



posted on 2006-10-17 09:16 春天花会开 阅读(2167) 评论(3)  编辑  收藏

评论

# re: [原创]javascript封装的Tab类-附源码 2008-07-22 16:49 cxp

我想问问,你这个动态添加页签的能不能做成象126邮箱里面的效果,我点击左边树的连接的时候生成一个页签页面,再点击再出来,我看了你这个生成的页面的信息是在new这个tab对象的时候就传进去的啊。  回复  更多评论   

# re: [原创]javascript封装的Tab类-附源码 2008-07-28 20:13 luchunwei

应该可以的,你改改试试,把click事件的监听设置在你需要的对象上  回复  更多评论   

# re: [原创]javascript封装的Tab类-附源码 2008-11-04 13:41 xiangmeng

代码在哪  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: