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

WBOY
풀어 주다: 2016-05-16 19:13:06
원래의
1434명이 탐색했습니다.

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

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

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





无标题文档






  
    
    
  
 


大大小小多多少少

人口手足

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);





함수 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) || 문서.본문;

    //________________________________________________

    var htmlObject = function(pTagName){
        return document.createElement(pTagName);
    }

    //________________________________________________

    var isRate = function(pRateString){
        if(!isNaN(pRateString)) return false;
        if(pRateString.substr(pRateString.length-1,1) != "%")
            false를 반환;
        if(isNaN(pRateString.substring(0,pRateString.length - 1)))
            반환 false;
        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 = "접기";
        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 = "필터: 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 = 함수(pLabel,pPageBodyId){
        createTabBtn(pLabel,pPageBodyId);
        if($(pPageBodyId)){
            oPageArea.appendChild($(pPageBodyId));
            $(pPageBodyId).style.display = "없음";
        }
    }

    //________________________________________________

    this.setActiveTab = function(pIndex){
        if(oPageArea.filters)
            o 페이지 영역.필터[0] .적용하다();

        if(activedTab != null){
            activedTab.className = "oTabBtn";
            if($(activedTab.tabPage))
               $(activedTab.tabPage).style.display = "없음";
        }
        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);



下载源码察看效果。
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!