Phiên bản đầy đủ: jsB@nk » Ứng dụng » Công cụ xuất » Tạo các tab
URL: https://www.javascriptbank.com/tab-folder-script.html
Hiệu ứng tạo một biểu mẫu có thể thêm bớt các tab thư mục.
Phiên bản đầy đủ: jsB@nk » Ứng dụng » Công cụ xuất » Tạo các tab
URL: https://www.javascriptbank.com/tab-folder-script.html
<STYLE type=text/css>UNKNOWN {COLOR: black; TEXT-DECORATION: none}A:visited {COLOR: purple; TEXT-DECORATION: none}A:active {COLOR: blue; TEXT-DECORATION: none}TABLE.menu {FONT-SIZE: 11px; MARGIN: 2px; WIDTH: 600px; FONT-FAMILY: arial}TABLE.inline {BORDER-RIGHT: #ffffff 2px inset; BORDER-TOP: #ffffff 2px inset; BORDER-LEFT: #ffffff 2px inset; BORDER-BOTTOM: #ffffff 2px inset}TD.default {BORDER-RIGHT: #ffffff 2px outset; PADDING-RIGHT: 2px; BORDER-TOP: #ffffff 2px outset; PADDING-LEFT: 2px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 5px 5px 0px; VERTICAL-ALIGN: bottom; BORDER-LEFT: #ffffff 2px outset; CURSOR: default; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid}TD.menu {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: bottom; CURSOR: default; PADDING-TOP: 5px; BORDER-BOTTOM: #ffffff 2px inset}TD.outline {BORDER-RIGHT: #ffffff 2px outset; PADDING-RIGHT: 10px; BORDER-TOP: 0px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 10px; BORDER-LEFT: #ffffff 2px outset; PADDING-TOP: 20px; BORDER-BOTTOM: #ffffff 2px outset; HEIGHT: 400px}SPAN.left {BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 2px outset; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 5px 0px 0px; BORDER-LEFT: #ffffff 2px outset; PADDING-TOP: 2px; BORDER-BOTTOM: 0px}SPAN.right {BORDER-RIGHT: #ffffff 2px outset; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 2px outset; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 5px 0px 0px; BORDER-LEFT: 0px; PADDING-TOP: 2px; BORDER-BOTTOM: 0px}SPAN.menu {BORDER-RIGHT: #ffffff 2px outset; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 2px outset; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 5px 0px 0px; BORDER-LEFT: #ffffff 2px outset; PADDING-TOP: 2px; BORDER-BOTTOM: 0px}SPAN.default {BORDER-RIGHT: #ffffff 1px outset; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 1px outset; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #ffffff 1px outset; WIDTH: auto; PADDING-TOP: 2px; BORDER-BOTTOM: #ffffff 0px outset; FONT-FAMILY: arial}SPAN.n4menu {BORDER-RIGHT: #ffffff 1px outset; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 1px outset; PADDING-LEFT: 0px; FONT-SIZE: 11px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #ffffff 1px outset; WIDTH: auto; PADDING-TOP: 0px; BORDER-BOTTOM: #ffffff 1px outset; FONT-FAMILY: arial}SPAN.n4left {BORDER-RIGHT: #ffffff 0px outset; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 1px outset; PADDING-LEFT: 0px; FONT-SIZE: 11px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #ffffff 1px outset; WIDTH: auto; PADDING-TOP: 0px; BORDER-BOTTOM: #ffffff 1px outset; FONT-FAMILY: arial}SPAN.n4right {BORDER-RIGHT: #ffffff 1px outset; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 1px outset; PADDING-LEFT: 0px; FONT-SIZE: 11px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #ffffff 0px outset; WIDTH: auto; PADDING-TOP: 0px; BORDER-BOTTOM: #ffffff 1px outset; FONT-FAMILY: arial}SPAN.line {BORDER-RIGHT: #ffffff 0px outset; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 0px outset; PADDING-LEFT: 0px; PADDING-BOTTOM: 1px; MARGIN: 0px 0px 1px; BORDER-LEFT: #ffffff 0px outset; WIDTH: 20px; PADDING-TOP: 0px; BORDER-BOTTOM: #ffffff 1px outset}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=javascript> <!-- /* You might use this code or modify to the way you need to use in your page if it is for indivuals or non-profit organiztions.. you can email me at [email protected] for any question and feeback.. hope this script can provide any help in your website */ /* this part from here should not be removed */ var menuItem = new Array("Option 1","Option 2","Option 3", "Option 4", "Option 5"); var currentTab = 0; var objSelect = null; var objAddText = null; function build_menu() { var menuBuilder; var menuArea = document.all ? document.all('tabFolder'):document.layers['tabFolder']; if (document.all) { menuBuilder = ie_menu(currentTab); menuArea.innerHTML = menuBuilder; } else { menuBuilder = n4_menu(currentTab) menuArea.document.open(); menuArea.document.write(menuBuilder); menuArea.document.close(); } // detect ie or n4 } // setup menu function ie_menu (thismenu) { var builder; builder = "<table class=menu border=0 cellspacing=0 cellpadding=0><tr>"; for (var i=0; i < menuItem.length; i++) { if (thismenu==i) { builder+="<td class=default onCLick='menu_click("+i+")' nowrap> "+menuItem[i]+" </td>"; } else { /* if (i==0) { builder+="<td class=fillup> </td>"; } */ if (i==thismenu-1) { // left side menu builder+=((i==0) ? "<td class=menu nowrap>":"")+"<span class=left onClick='menu_click("+i+")'> "+menuItem[i]+" </span></td>"; } else if (i==thismenu+1) { // right side menu builder+="<td class=menu nowrap><span class=right onClick='menu_click("+i+")'> "+menuItem[i]+" </span>"+((i==menuItem.length)?"</td>":"");} else { builder+=((i==0)?"<td class=menu nowrap>":"")+"<span class=menu onClick='menu_click("+i+")'> "+menuItem[i]+" </span>"+((i==menuItem.length)?"</td>":"");} // else .. } } // for .. builder += "<td width=100% class=menu align=right> <font size=-1 color=#cccccc>created by allen change</font></td><tr><td colspan=4 class=outline><table class=inline width=100% height=100% bgcolor=white><tr><td> </td></tr></table></td></tr></tr></table>"; return builder } // ie_menu function n4_menu (thismenu) { var builder, classStr; builder = "<table class=menu border=0 cellspacing=0 cellpadding=0><tr>"; for (var i=0; i < menuItem.length; i++) { classStr = (i==thismenu) ? "default" : ((i==thismenu-1) ? "n4left" : ((i==thismenu+1) ? "n4right" : "n4menu")); builder+="<td valign=bottom><span class="+classStr+"><a href='javascript:menu_click("+i+")'> "+encode_blank(menuItem[i])+" </a></span></td>"; } // for .. builder += "<td valign=bottom><span class=line> <font size=-1 color=#cccccc>created by allen change</font></span></td></tr><tr><td colspan=" +(menuItem.length+1)+"><table border=1 cellspacing=0 cellpadding=0 width=100% height=300><tr><td> </td></tr></table></td></tr></table>"; return builder } // ie_menu function menu_click(num) { if (currentTab != num) { currentTab = num; build_menu(); } // if } // menu_Clcik function encode_blank(str) { var returnStr=""; for (var i = 0; i < str.length; i++) { returnStr+= (str.charAt(i)==" ") ? " " : str.charAt(i); } // for.. return returnStr; } //decode_blank().. /* this part up here should not be removed */ function setup_menu(type,msg) { if (objSelect==null) { objSelect = (document.all) ? document.all('selmenu') : document['display'].document.forms[0].menu; } if (objAddText==null) { objAddText = (document.all) ? document.all('addtext') : document['display'].document.forms[0].add; } switch (type) { case "initial": currentTab=1; break; case "add": if (!(msg>="0")) { return; } menuItem[menuItem.length] = msg; break; case "delete": if (msg<0) { return; } for (var i = msg; i < menuItem.length - 1; i++) { menuItem[i]=menuItem[i+1]; } //for menuItem.length = menuItem.length - 1; if (currentTab>msg || currentTab>=menuItem.length - 1) { currentTab=(msg+1>=menuItem.length - 1) ? menuItem.length - 1 : currentTab-1; } // if.. break; default: } // switch(type) build_menu(); load_combo(); } // setup_menu function load_combo() { objSelect.length=1; for (var i = 0; i < menuItem.length; i++) { var newoption = new Option(menuItem[i], i, true, true); objSelect.options[i+1] = newoption; } // for.. objSelect.selectedIndex=0; } //--> </SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY bgcolor=#cccccc onload="setup_menu('initial', 1)"><SELECT id=selmenu name=menu><OPTION value=-1 selected>---select tab item---</OPTION> </SELECT><INPUT onclick="setup_menu('delete', objSelect.selectedIndex - 1)" type=button value=delete name=delete> <INPUT id=addtext name=add size="20"><INPUT onclick="setup_menu('add', objAddText.value)" type=button value=add name=addBtn> <DIV id=tabFolder style="Z-INDEX: -1; LEFT: 10px; POSITION: relative; TOP: 7px"><!-- tabl folder goese here --></DIV></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->