一个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 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
轮播的简单实现方法
Jul 28 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
微信小程序实现留言板
Oct 31 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
js实现简单页面全屏
Sep 17 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 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
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
为数据添加append,remove功能
2006/10/03 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
js图片上传的封装代码
2017/08/01 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
python画微信表情符的实例代码
2019/10/09 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
python里glob模块知识点总结
2021/01/05 Python
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
节水标语大全
2014/06/11 职场文书
党员转正申请报告
2015/05/15 职场文书
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技