首页
所有分类
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 相关文章推荐
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
JS中常用的消息框总结
Feb 24 Javascript
vue计算属性及使用详解
Apr 02 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
JavaScript实现动态留言板
Mar 16 Javascript
js实现拾色器插件（ColorPicker）
May 21 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
SeaTunnel(1) ftpserver(1) 黑名单(1) T-SQL(1) Odoo(1) 批处理(1) NFS(1) 排序失效(1) 重复数据(2) Logrotate(1)
You might like
php以post形式发送xml的方法
2014/11/04 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
Python+django实现文件上传
2016/01/17 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
实体的生命周期
2013/08/31 面试题
工厂仓管员岗位职责
2014/01/01 职场文书
机电一体化职业规划书
2014/01/07 职场文书
顶岗实习计划书
2014/01/10 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
自荐信的格式
2014/03/10 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
食堂卫生管理制度
2015/08/04 职场文书
师德师风心得体会（2016精选篇）
2016/01/12 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang