一个js实现的所谓的滑动门
2007-05-23 00:00
661 查看
滑动门：我不理解为什么这样叫。
我就命名为：JMenuTab吧，因为写它是为了当我的菜单。
IE6,FireFox下测试通过。
请下载源码察看效果。
我就命名为：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实现的所谓的滑动门
- JS实现同一个网页布局滑动门和TAB选项卡实例
- js DOM--实现一个简易的滑动门特效
- JS实现同一个网页布局滑动门和TAB选项卡实例
- 一个 div 手写红绿灯- 分别用 css3 和 js 实现
- 阿里巴巴校招2017前端笔试题目 -- 原生js/html5 实现一个路由
- 一个纯js实现树
- JS实现一个简单的抽奖系统
- 一个前端博客(5)——遮罩效果及tool.js实现
- js如何实现点击一个按钮显示一个div，然后该div上有一个按钮，点击此按钮后隐藏，隐藏的同时显示另外一个div，而在次弹出的div也有一个按钮，点击后隐藏.
- js写一个弹出层并锁屏效果实现代码
- js实现输入一个数组，实现数组元素能够组成的最大整数
- 一个用js实现的页内搜索代码
- 请实现一个js脚本，要求做到将数字转化为千分位表示如：1234567转化为1,234,567
- hyperapp.js 一个轻量级的 react 实现
- js实现一个可以兼容PC端和移动端的div拖动效果
- js实现一个div缓缓移动到某一个位置再缓缓回到原来位置
- js实现一个可以兼容PC端和移动端的div拖动效果实例
- 用Vue.js实现一个简单的搜索框
- jquery/js实现一个网页同时调用多个倒计时(最新的)