一个js实现的所谓的滑动门
滑动门：我不理解为什么这样叫。
我就命名为：JMenuTab吧，因为写它是为了当我的菜单。
IE6,FireFox下测试通过。
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="JTabRes1/JMenuTab.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- body { margin: 0px; } --> </style> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200"> </td> <td id="menuBar"></td> </tr> </table> <div id="page1">大大小小多多少少<br /> 人口手足</div> <div id="page2">ABCDEFG</div> <div id="page3"><img src="loading.gif" /></div> <div id="pageHelp"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>JMenuTab 帮助：</td> </tr> <tr> <td>Author:xling Blog:http://xling.blueidea.com 2007/05/23 </td> </tr> <tr> <td>写这个程序只是为了解决燃眉之急（汉，虽然是急，我还是写了一天）！</td> </tr> <tr> <td>程序中用到图片是修改了网上现有图片，所以，外表和某些网站上的一样，请不要见怪。因为除了图片，全是原创(不曾参考任何类似程序)！</td> </tr> <tr> <td>IE6,Firefox下测试通过。</td> </tr> <tr> <td>调用方法(注意顺序)：</td> </tr> <tr> <td>var menuTab = new JMenuTab(null,null,"menuBar");<br /> menuTab.create();<br /> menuTab.addTab("首页");<br /> menuTab.addTab("组织架构","page1");<br /> menuTab.addTab("员工信息","page2");<br /> menuTab.addTab("业务知识","page3"); <br /> menuTab.addTab("Help","pageHelp");<br /> menuTab.setActiveTab(2);</td> </tr> </table> </div> </body> </html> <script language="javascript" type="text/javascript"> function JMenuTab(pWidth,pHeight,pBody){ var self = this; //________________________________________________ var width = pWidth; var height = pHeight; var titleHeight = 24; //________________________________________________ var oOutline = null; var oTitleOutline = null; var oPageOutline = null; var oTitleArea = null; var oPageArea = null; var tabArray = new Array(); var activedTab = null; //________________________________________________ var $ = function(pObjId){ return document.getElementById(pObjId); } //________________________________________________ var body = $(pBody) || document.body; //________________________________________________ var htmlObject = function(pTagName){ return document.createElement(pTagName); } //________________________________________________ var isRate = function(pRateString){ if(!isNaN(pRateString)) return false; if(pRateString.substr(pRateString.length-1,1) != "%") return false; if(isNaN(pRateString.substring(0,pRateString.length - 1))) return false; return true; } //________________________________________________ var createOutline = function(){ oOutline = htmlObject("DIV"); body.appendChild(oOutline); oOutline.className = "oOutline"; } //________________________________________________ var createTitleOutline = function(){ oTitleOutline = htmlObject("DIV"); oOutline.appendChild(oTitleOutline); oTitleOutline.className = "oTitleOutline"; var vTable = htmlObject("TABLE"); oTitleOutline.appendChild(vTable); vTable.width = "100%"; vTable.border = 0; vTable.cellSpacing = 0; vTable.cellPadding = 0; var vTBody = htmlObject("TBODY"); vTable.appendChild(vTBody); var vTr1 = htmlObject("TR"); vTBody.appendChild(vTr1); var vTdTopLeft = htmlObject("TD"); vTr1.appendChild(vTdTopLeft); vTdTopLeft.height = titleHeight; vTdTopLeft.className = "oTopLeft"; oTitleArea = htmlObject("TD");///////////////////////////////// vTr1.appendChild(oTitleArea); oTitleArea.className = "oTitleArea"; var vTdTopRight = htmlObject("TD"); vTr1.appendChild(vTdTopRight); vTdTopRight.className = "oTopRight"; } this.setTitleHeight = function(pHeight){ //设置标题区域的高度 } //________________________________________________ var tabBtn_click = function(){ self.setActiveTab(this.index); } var tabBtn_mouseover = function(){ if(this.className =="oTabBtnActive") return; this.className = "oTabBtnHover"; } var tabBtn_mouseout = function(){ if(this.className =="oTabBtnActive") return; this.className = "oTabBtn"; } //________________________________________________ var createTabBtn = function(pLabel,pTabPage){ var vTabBtn = htmlObject("DIV"); oTitleArea.appendChild(vTabBtn); vTabBtn.className = "oTabBtn"; vTabBtn.index = tabArray.length; vTabBtn.tabPage = pTabPage; vTabBtn.onclick = tabBtn_click; vTabBtn.onmouseover = tabBtn_mouseover; vTabBtn.onmouseout = tabBtn_mouseout; tabArray.push(vTabBtn); var vTabBtnL = htmlObject("DIV"); vTabBtn.appendChild(vTabBtnL); vTabBtnL.className = "oTabBtnLeft"; vTabBtnC = htmlObject("DIV"); vTabBtn.appendChild(vTabBtnC); vTabBtnC.className = "oTabBtnCenter"; vTabBtnC.innerHTML = pLabel; vTabBtnR = htmlObject("DIV"); vTabBtn.appendChild(vTabBtnR); vTabBtnR.className = "oTabBtnRight"; } var createPageOutline = function(){ oPageOutline = htmlObject("DIV"); oOutline.appendChild(oPageOutline); oPageOutline.className = "oPageOutline"; var vTable = htmlObject("TABLE"); oPageOutline.appendChild(vTable); vTable.width = "100%"; vTable.border = 0; vTable.cellSpacing = 0; vTable.cellPadding = 0; vTable.style.borderCollapse = "collapse"; vTable.style.tableLayout="fixed"; var vTBody = htmlObject("TBODY"); vTable.appendChild(vTBody); var vTr1 = htmlObject("TR"); vTBody.appendChild(vTr1); var vTdBottomLeft = htmlObject("TD"); vTr1.appendChild(vTdBottomLeft); vTdBottomLeft.className = "oBottomLeft"; vTdBottomLeft.rowSpan = 2; oPageArea = htmlObject("TD");/////////////////////////////////////// vTr1.appendChild(oPageArea); oPageArea.className = "oPageArea"; if(oPageArea.filters) oPageArea.style.cssText = "FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward');"; oPageArea.height = 10; var vTdBottomRight = htmlObject("TD"); vTr1.appendChild(vTdBottomRight); vTdBottomRight.className = "oBottomRight"; vTdBottomRight.rowSpan = 2; var vTr2 = htmlObject("TR"); vTBody.appendChild(vTr2); var vTdBottomCenter = htmlObject("TD"); vTr2.appendChild(vTdBottomCenter); vTdBottomCenter.className = "oBottomCenter"; } //________________________________________________ this.addTab = function (pLabel,pPageBodyId){ createTabBtn(pLabel,pPageBodyId); if($(pPageBodyId)){ oPageArea.appendChild($(pPageBodyId)); $(pPageBodyId).style.display = "none"; } } //________________________________________________ this.setActiveTab = function(pIndex){ if(oPageArea.filters) oPageArea.filters[0].apply(); if(activedTab != null){ activedTab.className = "oTabBtn"; if($(activedTab.tabPage)) $(activedTab.tabPage).style.display = "none"; } activedTab = tabArray[pIndex]; activedTab.className = "oTabBtnActive"; if($(activedTab.tabPage)) $(activedTab.tabPage).style.display = ""; if(oPageArea.filters) oPageArea.filters[0].play(duration=1); }; //________________________________________________ this.create = function(){ createOutline(); createTitleOutline(); createPageOutline(); } } var menuTab = new JMenuTab(null,null,"menuBar"); menuTab.create(); menuTab.addTab("首页"); menuTab.addTab("组织架构","page1"); menuTab.addTab("员工信息","page2"); menuTab.addTab("业务知识","page3"); menuTab.addTab("ISO系统"); menuTab.addTab("办公环境"); menuTab.addTab("公司新闻"); menuTab.addTab("公共政策"); menuTab.addTab("链接总部"); menuTab.addTab("Help","pageHelp"); menuTab.setActiveTab(2); </script>
请下载源码察看效果。