Home > Developer > JavaScript
Javascript dynamic addition and deletion of tabs labels, javascripttabs
This example describes how to dynamically add and delete tabs labels in javascript. Share it with you for your reference. The specific implementation method is as follows:
<Html> <HEAD> <TITLE> webpage dialog </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 the channel already exists **/if ($ (ChatBoardId) {return; bai};/* Add a control, delete the column 'waiting for client connection' First **/var cell0 = $ ("LabelContainer "). childNodes [0]; if (cell0.id = 'label _ default') $ ("LabelContainer "). removeChild (cell0); $ ("ChatBoardContainer "). appendChild (buildChat Board (ChatBoardId); $ ("LabelContainer "). appendChild (buildLabel (LabelId, LabelText);/* display the new chat window **/toggChatBoard (ChannelId);}; function buildChatBoard (boardId) {var div = document. createElement ("DIV"); div. id = boardId; div. style. width = "100%"; div. style. height = '8px ';/* 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 is to leave a position for the close button **/label. height = 22; label. name = LabelText; label. title = "Click here to switch the conversation object"; label. innerHTML = LabelText; var lid = LabelId. substr (LabelId. indexOf ("_") + 2); label. innerHTML + = "<SPAN title = 'closed '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 = functi On () {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 la Bel ;}; 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' ;};};/* label bar **/var labels =$ ("LabelContainer"); for (I = 0; I <labels. childNodes. length; I ++) {if (labels. childNodes [I]. id. inde XOf (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 =$ ("ChatB OardContainer "). childNodes; for (I = 0; I <arChannel. length; I ++) {/* alert (arChannel [I]. id + "," + id); */if (arChannel [I]. id. indexOf (id)>-1) {$ ("ChatBoardContainer "). removeChild (arChannel [I]) ;};};/* label bar **/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 = "waiting for client connection .. "; 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 = setInterva L ("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> $ ('tblabeliner iner '). clientWidth) {clearInterval (scrollLableTimer); divLa BelContainer. scrollLeft = $ ('tblabeliner iner '). clientWidth; return;}; divLabelContainer. scrollLeft + = 10 ;};}; </script> <STYLE type = text/css>. imgbtn {border: 1px solid # ffffff; cursor: hand ;}. imgbtn_on {border: 1px solid # 9326FF;}. toolButton {color: #375FB9! Important; padding: 0px; border: 1px solid # B1D6F3; text-align: center; height: 16px; width: 16px;}. 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', 'tes T') "> 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 t Abs </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 hre F = "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 cell Spacing = 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 = Label Container> <TD id = Label_Default noWrap align = middle> wait for the customer to connect... </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> <! -- The ChatBoardContainer cannot contain any content. Otherwise, the script will fail. --> <! -- <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>
Used image title2_on_green.jpg
Title2.gif
I hope this article will help you design javascript programs.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
