Cara menambah dan memadam tab secara dinamik menggunakan kemahiran javascript_javascript

WBOY
Lepaskan: 2016-05-16 15:51:23
asal
1864 orang telah melayarinya

Contoh dalam artikel ini menerangkan kaedah menambah dan memadam teg tab secara dinamik dalam javascript. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

<html>
<HEAD>
<TITLE>网页对话</TITLE>
<LINK href="style.css" type=text/css rel=stylesheet>
<script>
function $(obj)
{
 var o = typeof(obj)=="object" &#63; 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>

Salin selepas log masuk

Gambar menggunakan tajuk2_on_green.jpg

title2.gif

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan