javascript动态添加删除tabs标签的方法

前端技术 2023/09/02 JavaScript

本文实例讲述了javascript动态添加删除tabs标签的方法。分享给大家供大家参考。具体实现方法如下：

<html>
<HEAD>
<TITLE>网页对话</TITLE>
<LINK href=\"style.css\" type=text/css rel=stylesheet>
<script>
function $(obj)
{
 var o = typeof(obj)==\"object\" ? obj : document.getElementById(obj);
 return o;
}
function addChannel(ChannelId,LabelText){
 var ChatBoardId=\"ChatBoard__\"+ChannelId;
 var LabelId=\"Label__\"+ChannelId;
 /* 如果频道已存在 **/if($(ChatBoardId)){
 return ;bai
 };
 /* 添加控件,先删除原来 \'等待客户连接\' 这列 **/
 var cell0=$(\"LabelContainer\").childNodes[0];
 if(cell0.id==\'Label_Default\')$(\"LabelContainer\").removeChild(cell0);
 $(\"ChatBoardContainer\").appendChild(buildChatBoard(ChatBoardId));
 $(\"LabelContainer\").appendChild(buildLabel(LabelId,LabelText));
 /* 显示新打开的聊天窗口 **/toggChatBoard(ChannelId);
};
function buildChatBoard(boardId){
 var div=document.createElement(\"DIV\");
 div.id=boardId;
 div.style.width=\"100%\";
 div.style.height=\'258px\';
 /* div.style.border = \'1px solid #ff0000\'; **/
 div.style.overflowY=\"scroll\";
 div.style.padding=\"3\";
 return div;
};
function buildLabel(LabelId,LabelText){
 var label=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;
 var lid=LabelId.substr(LabelId.indexOf(\"__\")+2);
 label.innerHTML+=\" <SPAN title=\'关闭\' 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 = \"1px solid #CC99FF\"; **/
 label.style.textAlign=\"center\";
 label.style.padding=\"2\";
 label.style.backgroundImage=\"url(Images/title2.gif)\";
 label.onclick=function (){
 var id=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;
 };
 return label;
};
function toggChatBoard(id){
 var boards=$(\"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\';
 };
 };
 /* 标签栏 **/var labels=$(\"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)\"; 
  var id=labels.childNodes[i].id;
  id=id.substr(id.indexOf(\"__\")+2);
  var name=labels.childNodes[i].name; 
 }else {
  labels.childNodes[i].style.backgroundImage=\"url(Images/title2.gif)\";
 };
 };
};
function removeChatBoard(id){
 var arChannel=$(\"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]);
 };
 };
 /* 标签栏 **/var arLabel=$(\"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){
 var td=document.createElement(\"TD\");
 td.innerText=\"等待客户连接..\";
 td.align=\"center\";
 td.id=\'Label_Default\';
 $(\"LabelContainer\").appendChild(td);
 return ;
 };
 var newid=arChannel[0].id;
 newid=newid.split(\"__\")[1];
 toggChatBoard(newid);
};
function scrollLable(action){
 if(action==-1){
 clearInterval(scrollLableTimer);
 return ;
 };
 scrollLableTimer=setInterval(\"doScrollLable(\"+action+\")\",30);
};
function doScrollLable(action){
 var divLabelContainer=$(\'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>
<STYLE type=text/css>
 .imgbtn{ border:1px solid #ffffff;cursor:hand;}
 .imgbtn_on{ border:1px solid #9326FF;}
 a.toolButton{
 color:#375FB9!important;
 padding:0px;
 border:1px solid #B1D6F3;
 text-align:center;
 height:16px;
 width:16px;
 }
 a.toolButton:hover{
 background:#BADBEF;
 border:1px solid #144985;
 }
</STYLE>
</HEAD>
<body>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'ceshi\',\'ceshi\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test1\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test2\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test3\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test4\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test5\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test6\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test7\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test8\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test9\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test10\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test11\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test12\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test13\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test14\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test15\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test16\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test17\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test18\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test19\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test20\',\'test\')\">add tabs</a>
<a href=\"javascript:void(0)\" onClick=\"addChannel(\'test21\',\'test\')\">add tabs</a>
<TABLE cellSpacing=0 cellPadding=0 width=\"100%\" border=0>
<TBODY>
<TR>
<TD id=ChatBoardTitle style=\"COLOR: #555555\" background=Images/title2.gif height=27>
<TABLE style=\"TABLE-LAYOUT: fixed\" cellSpacing=0 cellPadding=0 width=\"100%\" border=0>
<TBODY>
<TR>
<TD>
<DIV id=divLabelContainer style=\"OVERFLOW-X: hidden; WIDTH: 100%\">
<TABLE id=tbLabelContainer height=27 cellSpacing=1 cellPadding=3 border=0>
<TBODY>
<TR id=LabelContainer>
<TD id=Label_Default noWrap align=middle>等待客户连接...</TD></TR></TBODY></TABLE></DIV></TD>
<TD width=30><SPAN onmouseup=scrollLable(-1) onmousedown=scrollLable(1) onMouseOver=\"this.style.color=\'red\'\" style=\"CURSOR: hand; FONT-FAMILY: webdings\" onMouseOut=\"this.style.color=\'\'\">7</SPAN><SPAN onmouseup=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 内不能放任何内容，否则脚本会出错 --><!--<div id=\"ChatBoard\" style=\"padding:3px; overflow-y: scroll; width: 100%; height: 258px\"></div>-->
<TD id=ChatBoardContainer style=\"HEIGHT: 258px\" vAlign=top></TD></TR></TBODY></TABLE>
</body>
</html>

用到的图片title2_on_green.jpg

<img alt=\"\" src=\"http://p.blog.csdn.net/images/p_blog_csdn_net/jiedushi/title2_on_green.jpg\">

title2.gif<img alt=\"\" src=\"http://p.blog.csdn.net/images/p_blog_csdn_net/jiedushi/title2.gif\">

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/5440

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案