ホームページ >ウェブフロントエンド >jsチュートリアル >javascript_javascript スキルを使用してタブを動的に追加および削除する方法
javascript_javascript スキルを使用してタブを動的に追加および削除する方法
- WBOYオリジナル
- 2016-05-16 15:51:231909ブラウズ
この記事の例では、JavaScript でタブ タグを動的に追加および削除する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。
<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を使用しました
49670ed507f4469b6ae4c0072a06fd31
title2.gifbd674a26ead4d72e0ba324573ab8b7f8
この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。