首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

一个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>

请下载源码察看效果。

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Array.prototype 的泛型应用分析
Apr 30 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 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
相对路径 (1) 解密(1) openpyxl(1) hmac(1) 相对路径(1) 加密(1) requests(1) 面向对象(3) logging(1) hashlib(1)
You might like
php cookie中点号（句号）自动转为下划线问题
2014/10/21 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
laravel + vue实现的数据统计绘图（今天、7天、30天数据）
2018/07/31 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
修改file按钮的默认样式实现代码
2013/04/23 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
javascript 回调函数详解
2014/11/11 Javascript
深入理解JavaScript系列（36）：设计模式之中介者模式详解
2015/03/04 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
Vue 过渡（动画）transition组件案例详解
2017/01/22 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
vue自定义指令directive实例详解
2018/01/17 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
Python的面向对象思想分析
2015/01/14 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
如何开启linux的ssh服务
2013/06/03 面试题
酒店七夕情人节活动策划方案
2014/08/24 职场文书
大学自主招生自荐信（2016精选篇）
2016/01/28 职场文书
HR在给员工开具离职证明时，需要注意哪些问题？
2019/07/03 职场文书