[分享]选项卡组件代码

cgs1999

浏览: 536783 次
性别:
来自: 上海

最近访客更多访客>>

Spring_g

无象心

mrkou

liunancun

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

这是以前编写后整理出来的一个选项卡组件代码，个人使用感觉还是不错的，挺好用的，现分享一下！

选项卡组件createTab.js代码如下：

/**
*传入参数说明：
*1、传入参数数量不限，但要符合3*n+1(n>0)的规则
*2、第一个参数为进入后默认显示的选项卡索引，索引值从0开始
*3、后续参数每3个为一组，分别为：
*A、选项卡名称
*B、选项卡对应元素没有tab前缀的id，对应元素以tab为前缀
*C、选项卡宽度，缺省为75px，可指定固定值或百分比
*4、使用示例initTabs(0,"名称1","ElementId1","100","名称2","ElementId2","20%");
*

**/

//初始化选项卡 
functioninitTabs()
{

varcolorBorder="#C0C0C0";//边框颜色 

varcolorSelected="#000000";//选定选项卡字体颜色 

varcolorUnSelected="#000000";//未选定选项卡字体颜色 

varbg="#FFFFFF";//选项卡背景 

varbgUnSelected="#DEDFEF";//未选定选项卡背景 

varfont="宋体";//选项卡字体名称 

varfontSize="12px";//选项卡字体大小 

varborderStyle="solid1px"+colorBorder;

vartabSlected="background:"+bg+";font-family:"+font+";font-size:"+fontSize+";color:"+colorSelected;

vartabUnSlected="background:"+bgUnSelected+";font-family:"+font+";font-size:"+fontSize+";color:"+colorUnSelected+";border-bottom:"+borderStyle;

varbgStyle="border-bottom:"+borderStyle+";background:"+bg;
varlen=arguments.length;
varindex=arguments[0];

document.write("<tableborder=0id=tabscellspacing=0cellpadding=0width=100%style='table-layout:fixed'><trheight=21pxvalign=bottomindex="+index+">");
index=index*3+1;

for(vari=1;i<len;i+=3)
{

document.write("<tdwidth=1pxstyle='"+bgStyle+"'><inputstyle='width:1px;height:20px;border:"+borderStyle+"'></td>");

document.write("<tdonclick='onClickTab(this)'id='td"+arguments[i+1]+"'width="+(arguments[i+2]==""?"72":arguments[i+2])+"pxvalign=middlealign=centerstyle='cursor:hand;border-top:"+borderStyle+";"+(index==i?tabSlected:tabUnSlected)+"'>"+arguments[i]+"</td>");

document.write("<tdwidth=1pxstyle='"+bgStyle+"'><inputstyle='width:1px;height:20px;border:"+borderStyle+"'></td>");

document.write("<tdwidth=2pxstyle='"+bgStyle+"'><inputstyle='height:1px;visibility:hidden'></td>");
}

document.write("<tdstyle='"+bgStyle+"'></td></tr><trheight=8px></tr></table>");
}

//点击响应事件 
functiononClickTab(src)
{
vartr=src.parentElement;
varoldIndex=tr.index,index=(src.cellIndex-1)/4;

if(oldIndex==index)returnfalse;
varobj=tr.cells[oldIndex*4+1];
vartext=obj.style.cssText;
obj.style.cssText=src.style.cssText;
src.style.cssText=text;

if(src.colorbak)
{
text=obj.style.color;
obj.style.color=src.colorbak;
src.colorbak=text;
}

if(obj.colorbak)
{
text=obj.style.color;
obj.style.color=obj.colorbak;
obj.colorbak=text;
}
vartabid=src.id.substring(2);

if(document.all('if'+tabid)!=null)
{

if(document.all('if'+tabid).name!=""&&document.all('if'+tabid).name!=document.all('if'+tabid).src)
{

document.all('if'+tabid).removeAttribute("src");

document.all('if'+tabid).setAttribute("src",document.all('if'+tabid).name);
}
}

obj=document.all('tab'+obj.id.substring(2));

if(obj)obj.style.display="none";

obj=document.all('tab'+src.id.substring(2));

if(obj)
{

obj.style.display="";
obj.focus();

window.setTimeout("document.all('tab"+src.id.substring(2)+"').focus()",1);
}
tr.index=index;
}

测试页面test.html代码如下：

<HTML>
<HEAD>
<TITLE>选项卡例子</TITLE>

<scriptsrc="createTab.js"></script>
</HEAD>
<BODY>

<script>initTabs(0,"基本信息","basic","","办理单","outline","","督查反馈","feedback","","查看意见","opinion","","查看流程","flow","")</script>
<tableid=tabbasicborder=0width=100%>
<tr><tdalign=center>基本信息</td></tr>
</table>

<divid=taboutlinewidth=100%style="display:none">
<!--嵌套子选项卡-->

<script>initTabs(0,"来文单位","unit","","主题词","keyword","","系统参数","system","")</script>
<tableid=tabunitborder=0width=100%>
<tr>
<td>来文单位</td>
</tr>
</table>

<tableid=tabkeywordborder=0width=100%style="display:none">
<tr>
<td>主题词</td>
</tr>
</table>

<tableid=tabsystemborder=0width=100%style="display:none">
<tr>
<td>系统参数</td>
</tr>
</table>
</div>

<tableid=tabfeedbackborder=0width=100%style="display:none">
<tr>
<td>督查反馈</td>
</tr>
</table>

<divid=tabopinionwidth=100%style="display:none">

<script>initTabs(0,"签名","sign","60","领导批示","leader","200","其它意见","other","50%")</script>
<!--嵌套子选项卡，设置选项卡宽度，宽度可为空值、百分比或数值，空值默认为72-->
<tableid=tabsignborder=0width=100%>
<tr>
<td>签名</td>
</tr>
</table>

<divid=tableaderwidth=100%style="display:none">

<script>initTabs(0,"国家领导","country","","省级领导","province","","单位领导","local","")</script>
<tableid=tabcountryborder=0width=100%>
<tr>
<td>国家领导</td>
</tr>
</table>

<tableid=tabprovinceborder=0width=100%style="display:none">
<tr>
<td>省级领导</td>
</tr>
</table>

<tableid=tablocalborder=0width=100%style="display:none">
<tr>
<td>单位领导</td>
</tr>
</table>
</div>

<tableid=tabotherborder=0width=100%style="display:none">
<tr>
<td>其它意见</td>
</tr>
</table>
</div>

<tableid=tabflowborder=0width=100%style="display:none">
<tr>
<td>查看流程</td>
</tr>
<tr>

<td><iframeid=ifflowname="iframe.htm"src=""></iframe></td>
</tr>
</table>
</BODY>
</HTML>