简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

A so-called sliding door implemented in js_javascript skills

WBOY
Release： 2016-05-16 19:13:06
Original
1433 people have browsed it

Sliding Doors: I don’t understand why they are called that.
I will name it: JMenuTab, because I wrote it to be my menu.

The test passed under IE6 and FireFox.

Copy code The code is as follows:





无标题文档






  
    
    
  
 


大大小小多多少少

人口手足

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





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



请下载源码察看效果。
Related labels：
一个js实现的所谓的滑动门
source：php.cn
Previous article：Conditional compilation of JScript_javascript skills Next article：Use Javscript to implement the all-select function of form check boxes_Form special effects
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...
From 2024-04-06 18:16:26
0
1
403
Status update not working in React-Native on Android I have some code that has pairs of images in a swipeable horizontal gallery. Now when you ...
From 2024-04-06 16:54:10
0
1
410
JS: How to build an object based on parent properties I'm trying to create a JS object containing all URLs. I want to achieve this through the d...
From 2024-04-04 21:08:50
0
1
1411
Create diverse card layouts using a single grid or Flex: a practical guide I'm trying to make a responsive card layout like the one pictured. What I'm currently doin...
From 2024-04-02 21:07:36
0
2
377
How to make an image appear in the center of the header? First of all, my code is based on 3 files, an HTML, a CSS and a JS. It should be noted tha...
From 2024-04-01 23:49:58
0
1
372
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！