js_javascript 기술로 구현된 소위 슬라이딩 도어

슬라이딩 도어: 왜 그렇게 불리는지 모르겠습니다.
제 메뉴로 작성했기 때문에 이름을 JMenuTab으로 지정하겠습니다.

IE6 및 FireFox에서 테스트를 통과했습니다.

코드 복사 코드는 다음과 같습니다.

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">










  
    
    
  

大大小小多多少少

人口手足

ABCDEFG

  
    
    
  
    
  
  
    
    
  
    
    
  
    
  
  
    
  
  
    
  

JMenuTab 帮助：

Author:xling　Blog:http://xling.blueidea.com 　2007/05/23 

写这个程序只是为了解决燃眉之急（汉，虽然是急，我还是写了一天）！

程序中用到图片是修改了网上现有图片，所以，外表和某些网站上的一样，请不要见怪。因为除了图片，全是原创(不曾参考任何类似程序)！

IE6,Firefox下测试通过。

调用方法(注意顺序)：

var menuTab = new JMenuTab(null,null,"menuBar");

menuTab.create();

menuTab.addTab("首页");

menuTab.addTab("组织架构","page1");

menuTab.addTab("员工信息","page2");

menuTab.addTab("业务知识","page3");


menuTab.addTab("Help","pageHelp");

menuTab.setActiveTab(2);

<script> <BR>함수 JMenuTab(pWidth,pHeight,pBody){ <BR>    var self = this; <br><br>    //________________________________________________ <BR>    var width = pWidth; <BR>    var height = pHeight; <br><br>    var titleHeight = 24; <BR>    //________________________________________________ <BR>    var oOutline = null; <BR>    var oTitleOutline = null; <BR>    var oPageOutline = null; <BR>    var oTitleArea = null; <BR>    var oPageArea = null; <br><br>    var tabArray = new Array(); <BR>    var activedTab = null; <BR>    //________________________________________________ <br><br>    var $ = function(pObjId){ <BR>        return document.getElementById(pObjId);     <BR>    } <br><br>    //________________________________________________ <br><br>    var body = $(pBody) || 문서.본문; <br><br>    //________________________________________________ <br><br>    var htmlObject = function(pTagName){ <BR>        return document.createElement(pTagName); <BR>    } <br><br>    //________________________________________________ <br><br>    var isRate = function(pRateString){ <BR>        if(!isNaN(pRateString)) return false; <BR>        if(pRateString.substr(pRateString.length-1,1) != "%") <BR>            false를 반환; <BR>        if(isNaN(pRateString.substring(0,pRateString.length - 1))) <BR>            반환 false; <BR>        true를 반환합니다. <BR>    }     <br><br>    //________________________________________________ <br><br>    var createOutline = function(){ <BR>        oOutline = htmlObject("DIV"); <BR>        body.appendChild(oOutline); <BR>        oOutline.className = "oOutline"; <BR>    }<br><br>    //________________________________________________ <br><br>    var createTitleOutline = function(){ <BR>        oTitleOutline = htmlObject("DIV"); <BR>        oOutline.appendChild(oTitleOutline); <BR>        oTitleOutline.className = "oTitleOutline"; <br><br>        var vTable = htmlObject("TABLE"); <BR>        oTitleOutline.appendChild(vTable); <BR>        vTable.width = "100%"; <BR>        vTable.border = 0; <BR>        vTable.cellSpacing = 0; <BR>        vTable.cellPadding = 0; <br><br>        var vTBody = htmlObject("TBODY"); <BR>        vTable.appendChild(vTBody); <br><br>        var vTr1 = htmlObject("TR"); <BR>        vTBody.appendChild(vTr1); <br><br>        var vTdTopLeft = htmlObject("TD"); <BR>        vTr1.appendChild(vTdTopLeft); <BR>        vTdTopLeft.height = titleHeight; <BR>        vTdTopLeft.className = "oTopLeft"; <br><br>        oTitleArea = htmlObject("TD");////////////////////////////// <BR>        vTr1.appendChild(oTitleArea); <BR>        oTitleArea.className = "oTitleArea"; <br><br>        var vTdTopRight = htmlObject("TD"); <BR>        vTr1.appendChild(vTdTopRight); <BR>        vTdTopRight.className = "oTopRight"; <BR>    } <br><br>    this.setTitleHeight = function(pHeight){ <BR>        //设置标题区域的높이 <BR>    } <br><br>    //________________________________________________ <br><br>    var tabBtn_click = function(){ <BR>        self.setActiveTab(this.index); <BR>    } <br><br>    var tabBtn_mouseover = function(){ <BR>        if(this.className =="oTabBtnActive") <BR>            return; <br><br>        this.className = "oTabBtnHover"; <BR>    } <br><br>    var tabBtn_mouseout = function(){ <BR>        if(this.className =="oTabBtnActive") <BR>            return; <BR>        this.className = "oTabBtn"; <BR>    }     <BR>    //________________________________________________ <br><br>    var createTabBtn = function(pLabel,pTabPage){ <BR>        var vTabBtn = htmlObject("DIV"); <BR>        oTitleArea.appendChild(vTabBtn); <BR>        vTabBtn.className = "oTabBtn"; <BR>        vTabBtn.index = tabArray.length; <BR>        vTabBtn.tabPage = pTabPage; <BR>        vTabBtn.onclick = tabBtn_click; <BR>        vTabBtn.onmouseover = tabBtn_mouseover; <BR>        vTabBtn.onmouseout = tabBtn_mouseout; <br><br>        tabArray.push(vTabBtn); <br><br>        var vTabBtnL = htmlObject("DIV"); <BR>        vTabBtn.appendChild(vTabBtnL); <BR>        vTabBtnL.className = "oTabBtnLeft"; <br><br>        vTabBtnC = htmlObject("DIV"); <BR>        vTabBtn.appendChild(vTabBtnC); <BR>        vTabBtnC.className = "oTabBtnCenter"; <BR>        vTabBtnC.innerHTML = pLabel; <br><br>        vTabBtnR = htmlObject("DIV"); <BR>        vTabBtn.appendChild(vTabBtnR); <BR>        vTabBtnR.className = "oTabBtnRight"; <BR>    }<br><br>     <BR>    var createPageOutline = function(){ <BR>        oPageOutline = htmlObject("DIV"); <BR>        oOutline.appendChild(oPageOutline); <BR>        oPageOutline.className = "oPageOutline"; <br><br>        var vTable = htmlObject("TABLE"); <BR>        oPageOutline.appendChild(vTable); <BR>        vTable.width = "100%"; <BR>        vTable.border = 0; <BR>        vTable.cellSpacing = 0; <BR>        vTable.cellPadding = 0; <BR>        vTable.style.borderCollapse = "접기"; <BR>        vTable.style.tableLayout="fixed"; <br><br>        var vTBody = htmlObject("TBODY"); <BR>        vTable.appendChild(vTBody); <br><br>        var vTr1 = htmlObject("TR"); <BR>        vTBody.appendChild(vTr1); <br><br>        var vTdBottomLeft = htmlObject("TD"); <BR>        vTr1.appendChild(vTdBottomLeft); <BR>        vTdBottomLeft.className = "oBottomLeft"; <BR>        vTdBottomLeft.rowSpan = 2; <br><br>        oPageArea = htmlObject("TD");///////////////////////////////// //// <BR>        vTr1.appendChild(oPageArea); <BR>        oPageArea.className = "oPageArea"; <BR>        if(oPageArea.filters) <BR>            oPageArea.style.cssText = "필터: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward');"; <BR>        oPageArea.height = 10; <br><br>        var vTdBottomRight = htmlObject("TD"); <BR>        vTr1.appendChild(vTdBottomRight); <BR>        vTdBottomRight.className = "oBottomRight"; <BR>        vTdBottomRight.rowSpan = 2; <br><br>        var vTr2 = htmlObject("TR"); <BR>        vTBody.appendChild(vTr2); <br><br>        var vTdBottomCenter = htmlObject("TD"); <BR>        vTr2.appendChild(vTdBottomCenter); <BR>        vTdBottomCenter.className = "oBottomCenter"; <BR>    } <br><br>    //________________________________________________ <br><br>    this.addTab = 함수(pLabel,pPageBodyId){ <BR>        createTabBtn(pLabel,pPageBodyId); <BR>        if($(pPageBodyId)){ <BR>            oPageArea.appendChild($(pPageBodyId)); <BR>            $(pPageBodyId).style.display = "없음"; <BR>        } <BR>    } <br><br>    //________________________________________________ <br><br>    this.setActiveTab = function(pIndex){ <BR>        if(oPageArea.filters) <BR>            o 페이지 영역.필터[0] .적용하다(); <br><br>        if(activedTab != null){ <BR>            activedTab.className = "oTabBtn"; <BR>            if($(activedTab.tabPage)) <BR>               $(activedTab.tabPage).style.display = "없음"; <BR>        }<BR>        activedTab = tabArray[pIndex]; <BR>        activedTab.className = "oTabBtnActive"; <BR>        if($(activedTab.tabPage)) <BR>            $(activedTab.tabPage).style.display = ""; <br><br>        if(oPageArea.filters) <BR>            oPageArea.filters[0].play(duration=1); <BR>    }; <br><br>    //________________________________________________ <br><br>     <BR>    this.create = function(){ <BR>        createOutline(); <BR>        createTitleOutline(); <BR>        createPageOutline(); <BR>    } <BR>} <br><br>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("ISO系统"); <BR>    menuTab.addTab("办公环境"); <BR>    menuTab.addTab("공사신설"); <BR>    menuTab.addTab("公共政策"); <BR>    menuTab.addTab("链接总부"); <BR>    menuTab.addTab("Help","pageHelp"); <BR>    menuTab.setActiveTab(2); <BR></script>

请下载源码察看效果。