javascript动态添加删除tabs标签的方法
本文实例讲述了javascript动态添加删除tabs标签的方法。分享给大家供大家参考。具体实现方法如下:
<html> <HEAD> <TITLE>网页对话</TITLE> <LINKhref="style.css"type=text/cssrel=stylesheet> <script> function$(obj) { varo=typeof(obj)=="object"?obj:document.getElementById(obj); returno; } functionaddChannel(ChannelId,LabelText){ varChatBoardId="ChatBoard__"+ChannelId; varLabelId="Label__"+ChannelId; /*如果频道已存在**/if($(ChatBoardId)){ return;bai }; /*添加控件,先删除原来'等待客户连接'这列**/ varcell0=$("LabelContainer").childNodes[0]; if(cell0.id=='Label_Default')$("LabelContainer").removeChild(cell0); $("ChatBoardContainer").appendChild(buildChatBoard(ChatBoardId)); $("LabelContainer").appendChild(buildLabel(LabelId,LabelText)); /*显示新打开的聊天窗口**/toggChatBoard(ChannelId); }; functionbuildChatBoard(boardId){ vardiv=document.createElement("DIV"); div.id=boardId; div.style.width="100%"; div.style.height='258px'; /*div.style.border='1pxsolid#ff0000';**/ div.style.overflowY="scroll"; div.style.padding="3"; returndiv; }; functionbuildLabel(LabelId,LabelText){ varlabel=document.createElement("TD"); label.id=LabelId; label.noWrap=true; /*label.width=LabelText.length*12+30;/*+20是为了岂有此留位置给关闭按钮**/ label.height=22; label.name=LabelText; label.title="点击这里切换交谈对象"; label.innerHTML=LabelText; varlid=LabelId.substr(LabelId.indexOf("__")+2); label.innerHTML+="<SPANtitle='关闭'style='FONT-WEIGHT:bold;FONT-SIZE:12px;FONT-FAMILY:marlett;CURSOR:hand;COLOR:#555555;MARGIN-RIGHT:4px'onclick=/"removeChatBoard('"+lid+"')/"onmouseout='this.style.color=/"#ffffff/"'onmouseover='this.style.color=/"#ffff00/"'>r</SPAN>"; label.style.cursor="hand"; /*label.style.border="1pxsolid#CC99FF";**/ label.style.textAlign="center"; label.style.padding="2"; label.style.backgroundImage="url(Images/title2.gif)"; label.onclick=function(){ varid=event.srcElement.id; id=id.split("__")[1]; if(event.srcElement.tagName=='SPAN')return; toggChatBoard(id); }; label.onmouseover=function(){ event.srcElement.oldbg=event.srcElement.style.backgroundImage; event.srcElement.style.backgroundImage="url(Images/title2_on_green.jpg)"; }; label.onmouseout=function(){ event.srcElement.style.backgroundImage=event.srcElement.oldbg; }; returnlabel; }; functiontoggChatBoard(id){ varboards=$("ChatBoardContainer"); for(i=0;i<boards.childNodes.length;i++){ if(boards.childNodes[i].id.indexOf(id)>-1){ boards.childNodes[i].style.display=''; boards.childNodes[i].innerHTML=id; }else{ boards.childNodes[i].style.display='none'; }; }; /*标签栏**/varlabels=$("LabelContainer"); for(i=0;i<labels.childNodes.length;i++){ if(labels.childNodes[i].id.indexOf(id)>-1){ labels.childNodes[i].oldbg=labels.childNodes[i].style.backgroundImage; labels.childNodes[i].style.backgroundImage="url(Images/title2_on_green.jpg)"; varid=labels.childNodes[i].id; id=id.substr(id.indexOf("__")+2); varname=labels.childNodes[i].name; }else{ labels.childNodes[i].style.backgroundImage="url(Images/title2.gif)"; }; }; }; functionremoveChatBoard(id){ vararChannel=$("ChatBoardContainer").childNodes; for(i=0;i<arChannel.length;i++){ /*alert(arChannel[i].id+","+id);*/if(arChannel[i].id.indexOf(id)>-1){ $("ChatBoardContainer").removeChild(arChannel[i]); }; }; /*标签栏**/vararLabel=$("LabelContainer").childNodes; for(i=0;i<arLabel.length;i++){ /*alert(arLabel[i].id+","+id);*/if(arLabel[i].id.indexOf(id)>-1){ $("LabelContainer").removeChild(arLabel[i]); }; }; if($("ChatBoardContainer").childNodes.length<1){ vartd=document.createElement("TD"); td.innerText="等待客户连接.."; td.align="center"; td.id='Label_Default'; $("LabelContainer").appendChild(td); return; }; varnewid=arChannel[0].id; newid=newid.split("__")[1]; toggChatBoard(newid); }; functionscrollLable(action){ if(action==-1){ clearInterval(scrollLableTimer); return; }; scrollLableTimer=setInterval("doScrollLable("+action+")",30); }; functiondoScrollLable(action){ vardivLabelContainer=$('divLabelContainer'); if(action==1){ if(divLabelContainer.scrollLeft<0){ clearInterval(scrollLableTimer); divLabelContainer.scrollLeft=0; return; }; divLabelContainer.scrollLeft-=10; }; if(action==2){ if(divLabelContainer.scrollLeft>$('tbLabelContainer').clientWidth){ clearInterval(scrollLableTimer); divLabelContainer.scrollLeft=$('tbLabelContainer').clientWidth; return; }; divLabelContainer.scrollLeft+=10; }; }; </script> <STYLEtype=text/css> .imgbtn{border:1pxsolid#ffffff;cursor:hand;} .imgbtn_on{border:1pxsolid#9326FF;} a.toolButton{ color:#375FB9!important; padding:0px; border:1pxsolid#B1D6F3; text-align:center; height:16px; width:16px; } a.toolButton:hover{ background:#BADBEF; border:1pxsolid#144985; } </STYLE> </HEAD> <body> <ahref="javascript:void(0)"onClick="addChannel('ceshi','ceshi')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test1','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test2','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test3','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test4','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test5','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test6','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test7','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test8','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test9','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test10','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test11','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test12','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test13','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test14','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test15','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test16','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test17','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test18','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test19','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test20','test')">addtabs</a> <ahref="javascript:void(0)"onClick="addChannel('test21','test')">addtabs</a> <TABLEcellSpacing=0cellPadding=0width="100%"border=0> <TBODY> <TR> <TDid=ChatBoardTitlestyle="COLOR:#555555"background=Images/title2.gifheight=27> <TABLEstyle="TABLE-LAYOUT:fixed"cellSpacing=0cellPadding=0width="100%"border=0> <TBODY> <TR> <TD> <DIVid=divLabelContainerstyle="OVERFLOW-X:hidden;WIDTH:100%"> <TABLEid=tbLabelContainerheight=27cellSpacing=1cellPadding=3border=0> <TBODY> <TRid=LabelContainer> <TDid=Label_DefaultnoWrapalign=middle>等待客户连接...</TD></TR></TBODY></TABLE></DIV></TD> <TDwidth=30><SPANonmouseup=scrollLable(-1)onmousedown=scrollLable(1)onMouseOver="this.style.color='red'"style="CURSOR:hand;FONT-FAMILY:webdings"onMouseOut="this.style.color=''">7</SPAN><SPANonmouseup=scrollLable(-1)onmousedown=scrollLable(2)onMouseOver="this.style.color='red'"style="CURSOR:hand;FONT-FAMILY:webdings"onMouseOut="this.style.color=''">8</SPAN></TD></TR></TBODY></TABLE></TD></TR> <TR><!--ChatBoardContainer内不能放任何内容,否则脚本会出错--><!--<divid="ChatBoard"style="padding:3px;overflow-y:scroll;width:100%;height:258px"></div>--> <TDid=ChatBoardContainerstyle="HEIGHT:258px"vAlign=top></TD></TR></TBODY></TABLE> </body> </html>
用到的图片title2_on_green.jpg
<imgalt=""src="http://p.blog.csdn.net/images/p_blog_csdn_net/jiedushi/title2_on_green.jpg">
title2.gif<imgalt=""src="http://p.blog.csdn.net/images/p_blog_csdn_net/jiedushi/title2.gif">
希望本文所述对大家的javascript程序设计有所帮助。