一个js实现的所谓的滑动门


Posted in Javascript onMay 23, 2007

滑动门:我不理解为什么这样叫。
我就命名为: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>

请下载源码察看效果。

Javascript 相关文章推荐
javascript 框架小结 个人工作经验
Jun 13 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
js中有关IE版本检测
Jan 04 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
JavaScript网页制作特殊效果用随机数
May 22 #Javascript
JS加ASP二级域名转向的代码
May 17 #Javascript
用javascript实现的支持lrc歌词的播放器
May 17 #Javascript
JavaScript中的new的使用方法与注意事项
May 16 #Javascript
几款极品的javascript压缩混淆工具
May 16 #Javascript
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 #Javascript
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 #Javascript
You might like
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
浅谈Python中带_的变量或函数命名
2017/12/04 Python
python实现树形打印目录结构
2018/03/29 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
Python while循环使用else语句代码实例
2020/02/07 Python
Python定义函数实现累计求和操作
2020/05/03 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
一个SQL面试题
2014/08/21 面试题
解释i节点在文件系统中的作用
2013/11/26 面试题
大学新学期计划书
2014/04/28 职场文书
关于诚信的活动方案
2014/08/18 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
班主任自我评价范文
2015/03/11 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python