首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJuly 06, 2015

本文实例讲述了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程序设计有所帮助。

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

- Author -

jiedushi

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery中this的使用说明
Sep 06 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
详解Javascript中new()到底做了些什么？
Mar 29 Javascript
Jsonp post 跨域方案
Jul 06 #Javascript
javascript运动详解
Jul 06 #Javascript
浅谈jQuery中height与width
Jul 06 #Javascript
jQuery中$this和$(this)的区别介绍（一看就懂）
Jul 06 #Javascript
浅谈Javascript实现继承的方法
Jul 06 #Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 #Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 #Javascript
SRF-40W(1) AE3805(1) 纸巾盒(1) ICF-SW100(1) ICF-F10(1) 德生1994(1) 天梯图(1) CPU(2) 德生G88(1) PR-D3L(1)
You might like
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
javascript插入样式实现代码
2012/02/22 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
js Math 对象的方法
2013/09/01 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
Javascript实现倒计时（防页面刷新）实例
2016/12/13 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
jQuery实现日历效果
2020/09/11 jQuery
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
台湾菁英交友：结识黄金单身的台湾人
2018/01/22 全球购物
在求职信中如何凸显个人优势
2013/10/30 职场文书
房屋公证委托书
2014/04/03 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
2014年实习期工作总结
2014/11/27 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
师德承诺书
2015/01/20 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
入党后的感想
2015/08/10 职场文书
读《解忧杂货店》有感：请相信一切都是最好的安排
2019/11/07 职场文书
总结python多进程multiprocessing的相关知识
2021/06/29 Python
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS