javascript動(dòng)態(tài)添加刪除tabs標(biāo)簽的方法
更新時(shí)間：2015年07月06日 12:24:15 作者：jiedushi
這篇文章主要介紹了javascript動(dòng)態(tài)添加刪除tabs標(biāo)簽的方法,實(shí)例分析了javascript針對(duì)tabs標(biāo)簽的動(dòng)態(tài)添加與刪除方法,涉及javascript頁(yè)面元素的操作技巧,需要的朋友可以參考下
本文實(shí)例講述了javascript動(dòng)態(tài)添加刪除tabs標(biāo)簽的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
<html>
<HEAD>
<TITLE>網(wǎng)頁(yè)對(duì)話</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是為了豈有此留位置給關(guān)閉按鈕 **/
label.height=22;
label.name=LabelText;
label.title="點(diǎn)擊這里切換交談對(duì)象";
label.innerHTML=LabelText;
var lid=LabelId.substr(LabelId.indexOf("__")+2);
label.innerHTML+=" <SPAN title='關(guān)閉' 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';
};
};
/* 標(biāo)簽欄 **/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]);
};
};
/* 標(biāo)簽欄 **/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 內(nèi)不能放任何內(nèi)容，否則腳本會(huì)出錯(cuò) --><!--<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">
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- js封裝tab標(biāo)簽頁(yè)實(shí)例分享
- js與jquery分別實(shí)現(xiàn)tab標(biāo)簽頁(yè)功能的方法
- 最簡(jiǎn)單純JavaScript實(shí)現(xiàn)Tab標(biāo)簽頁(yè)切換的方式(推薦)
- 純css+js寫的一個(gè)簡(jiǎn)單的tab標(biāo)簽頁(yè)帶樣式
- js(JavaScript)實(shí)現(xiàn)TAB標(biāo)簽切換效果的簡(jiǎn)單實(shí)例
- js實(shí)現(xiàn)點(diǎn)擊切換TAB標(biāo)簽實(shí)例
- 簡(jiǎn)單純js實(shí)現(xiàn)點(diǎn)擊切換TAB標(biāo)簽實(shí)例
- js實(shí)現(xiàn)的tab標(biāo)簽切換效果代碼分享
- JS實(shí)現(xiàn)常見的TAB、彈出層效果(TAB標(biāo)簽，斑馬線，遮罩層等)
- javascript實(shí)現(xiàn)不同顏色Tab標(biāo)簽切換效果
- 基于JavaScript實(shí)現(xiàn)TAB標(biāo)簽效果
- JavaScript實(shí)現(xiàn)的原生態(tài)Tab標(biāo)簽頁(yè)功能【兼容IE6】
相關(guān)文章
今天小編就為大家分享一篇關(guān)于js序列化和反序列化的使用講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
JavaScript基礎(chǔ)入門之錯(cuò)誤捕獲機(jī)制
初級(jí)開發(fā)人員往往很少使用js的拋出和捕獲異常，但拋出和捕獲異常往往是非常必要的,這篇文章主要給大家介紹了關(guān)于JavaScript基礎(chǔ)入門之錯(cuò)誤捕獲機(jī)制的相關(guān)資料,需要的朋友可以參考下2021-08-08
微信小程序?qū)崿F(xiàn)瀑布流布局與無限加載的方法詳解
瀑布流布局是我們?nèi)粘ｉ_發(fā)中經(jīng)常見到的一種頁(yè)面布局方式，下面這篇文章主要給大家介紹了微信小程序?qū)崿F(xiàn)瀑布流布局與無限加載的相關(guān)資料，文中給出了詳細(xì)介紹和示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來一起看看吧。2017-05-05
JS中Json數(shù)據(jù)的處理和解析JSON數(shù)據(jù)的方法詳解
JSON （JavaScript Object Notation）一種簡(jiǎn)單的數(shù)據(jù)格式，比xml更輕巧，這篇文章主要介紹了JS中Json數(shù)據(jù)的處理和解析JSON數(shù)據(jù)的方法詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
檢查輸入的是否是數(shù)字使用keyCode配合onkeypress事件
檢查輸入的是否是數(shù)字在本文使用keyCode配合onkeypress事件來實(shí)現(xiàn)，具體示例如下2014-01-01
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)多圖和單圖上傳顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
瀏覽器緩存的意義在于提高了執(zhí)行效率，但是也隨之而來帶來了一些問題，導(dǎo)致服務(wù)端修改了js、css，客戶端不能更新，下面有幾個(gè)不錯(cuò)的方法可以解決此問題，感興趣的朋友可以參考下2013-10-10
微信小程序時(shí)間標(biāo)簽和時(shí)間范圍的聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序時(shí)間標(biāo)簽和時(shí)間范圍的聯(lián)動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
js 判斷一個(gè)元素是否存在此功能在項(xiàng)目中很實(shí)用，本人搜集整理了一些常用技巧，需要了解的朋友可以參考下2012-12-12
如何判斷圖片地址是否失效...2007-02-02