首页
所有分类
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 相关文章推荐
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 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
https(7) reload(1) 生成缩略图(1) 默认端口(3) 防盗链(1) 反向代理(2) shell(3) http(6) 负载均衡(6) 动静分离(1)
You might like
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
详解vuejs几种不同组件（页面）间传值的方式
2017/06/01 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
详解关于html，css，js三者的加载顺序问题
2019/04/10 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
用Python抢过年的火车票附源码
2015/12/07 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
Python中django学习心得
2017/12/06 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
python 弧度与角度互转实例
2020/04/15 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
松本清官方海外旗舰店：日本最大的药妆连锁店
2017/11/21 全球购物
python re模块和正则表达式
2021/03/24 Python
建筑工地门卫岗位职责
2014/04/30 职场文书
差生评语大全
2014/05/04 职场文书
介绍信的写法
2015/01/31 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS