欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一個js實(shí)現(xiàn)的所謂的滑動門

 更新時間：2007年05月23日 00:00:00   作者：  
滑動門：我不理解為什么這樣叫。
我就命名為：JMenuTab吧，因為寫它是為了當(dāng)我的菜單。

IE6,FireFox下測試通過。
復(fù)制代碼 代碼如下:

<!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>無標(biāo)題文檔</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">&nbsp;</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>程序中用到圖片是修改了網(wǎng)上現(xiàn)有圖片，所以，外表和某些網(wǎng)站上的一樣，請不要見怪。因為除了圖片，全是原創(chuàng)(不曾參考任何類似程序)！</td>
    </tr>
  <tr>
    <td>IE6,Firefox下測試通過。</td>
  </tr>
  <tr>
    <td>調(diào)用方法(注意順序)：</td>
  </tr>
  <tr>
    <td>var menuTab = new JMenuTab(null,null,&quot;menuBar&quot;);<br />
menuTab.create();<br />
menuTab.addTab(&quot;首頁&quot;);<br />
menuTab.addTab(&quot;組織架構(gòu)&quot;,&quot;page1&quot;);<br />
menuTab.addTab(&quot;員工信息&quot;,&quot;page2&quot;);<br />
menuTab.addTab(&quot;業(yè)務(wù)知識&quot;,&quot;page3&quot;);
<br />
menuTab.addTab(&quot;Help&quot;,&quot;pageHelp&quot;);<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){
        //設(shè)置標(biāo)題區(qū)域的高度
    }

    //________________________________________________

    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("組織架構(gòu)","page1");
    menuTab.addTab("員工信息","page2");
    menuTab.addTab("業(yè)務(wù)知識","page3");
    menuTab.addTab("ISO系統(tǒng)");
    menuTab.addTab("辦公環(huán)境");
    menuTab.addTab("公司新聞");
    menuTab.addTab("公共政策");
    menuTab.addTab("鏈接總部");
    menuTab.addTab("Help","pageHelp");
    menuTab.setActiveTab(2);
</script>


請下載源碼察看效果。

相關(guān)文章

  • JS中模糊查詢功能的一些常用方法

    JS中模糊查詢功能的一些常用方法

    在前端開發(fā)中,模糊查詢與下拉匹配是提高用戶體驗的重要功能,特別是在搜索功能上,這篇文章主要給大家介紹了關(guān)于JS中模糊查詢功能的一些常用方法,需要的朋友可以參考下
    2024-06-06
  • JavaScript多功能甘特圖組件jsGantt詳解

    JavaScript多功能甘特圖組件jsGantt詳解

    jsGantt是一個可定制的、靈活的、多語言的甘特圖組件，由原生 JavaScript構(gòu)建，它使用客戶端渲染以獲得快速的性能和動態(tài)的交互性，非常適用于任何需要交互式時間線或時間表顯示的項目，本文就給大家介紹一下JavaScript多功能甘特圖組件jsGantt
    2023-07-07
  • JS面向?qū)ο笾畣芜x框?qū)崿F(xiàn)

    JS面向?qū)ο笾畣芜x框?qū)崿F(xiàn)

    這篇文章主要為大家詳細(xì)介紹了JS面向?qū)ο笾畣芜x框?qū)崿F(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-01-01
  • JS數(shù)組求和的常用方法總結(jié)【5種方法】

    JS數(shù)組求和的常用方法總結(jié)【5種方法】

    這篇文章主要介紹了JS數(shù)組求和的常用方法,結(jié)合實(shí)例形式總結(jié)分析了5種數(shù)組求和的常見操作方法與相關(guān)處理技巧,需要的朋友可以參考下
    2019-01-01
  • Cropper.js進(jìn)階之裁剪后保存至本地實(shí)現(xiàn)示例

    Cropper.js進(jìn)階之裁剪后保存至本地實(shí)現(xiàn)示例

    這篇文章主要為大家介紹了Cropper.js進(jìn)階之裁剪后保存至本地實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-05-05
  • js實(shí)現(xiàn)碰撞檢測

    js實(shí)現(xiàn)碰撞檢測

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)碰撞檢測，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-01-01
  • Bootstrap按鈕組簡單實(shí)現(xiàn)代碼

    Bootstrap按鈕組簡單實(shí)現(xiàn)代碼

    這篇文章主要為大家詳細(xì)介紹了Bootstrap按鈕組的簡單實(shí)現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-03-03
  • js獲得相對路徑文件并上傳到服務(wù)器的方法

    js獲得相對路徑文件并上傳到服務(wù)器的方法

    由于瀏覽器的安全限制,Javascript無法直接獲取用戶上傳文件的絕對路徑。但是我們可以通過一些技巧來獲取文件的相對路徑,這篇文章主要給大家介紹了關(guān)于js獲得相對路徑文件并上傳到服務(wù)器的相關(guān)資料,需要的朋友可以參考下
    2023-11-11
  • 解析Javascript中難以理解的11個問題

    解析Javascript中難以理解的11個問題

    這篇文章主要是對Javascript中難以理解的11個問題進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2013-12-12
  • 利用xlsx.js讀取excel文件的詳細(xì)過程

    利用xlsx.js讀取excel文件的詳細(xì)過程

    如果你需要在瀏覽器端處理Excel文件,那么xlsx.js可能是一個不錯的選擇,這篇文章主要介紹了利用xlsx.js讀取excel文件的詳細(xì)過程,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2025-04-04

最新評論