首页
所有分类
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 相关文章推荐
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
JS扩展类，克隆对象与混合类实例分析
Nov 26 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
vue实现在线预览pdf文件和下载（pdf.js）
Nov 26 Javascript
JS实现百度搜索框
Feb 25 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
openEuler(1) Selenium(1) dockerfile(1) Django(9) Tsmoothie(1) filter(1) TextInputLayout(1) EditText(1) Spring Bean(1) reduce(2)
You might like
用Php实现链结人气统计
2006/10/09 PHP
动态生成gif格式的图像要注意？
2006/10/09 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
django使用图片延时加载引起后台404错误
2017/04/18 Python
python中logging库的使用总结
2017/10/18 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
python之信息加密题目详解
2019/06/26 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
python3 mmh3安装及使用方法
2019/10/09 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
linux 下selenium chrome使用详解
2020/04/02 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
高中校园广播稿
2014/01/11 职场文书
捐书寄语赠言
2014/01/18 职场文书
《搭石》教学反思
2014/04/07 职场文书
实习指导老师评语
2014/04/26 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
四查四看整改措施
2014/09/19 职场文书
2014年营销工作总结
2014/11/22 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
如何书写民事调解协议书？
2019/06/25 职场文书