// JScript 文件
/*本文件封装了创建滑动菜单的两个类，用户只需按leftMenu中的格式书写菜单并引用此文件和menu.css然后调用Menus类init()即可实现功能，龙勇于2008-8-11*/
//创建menu类parentMenu为主菜单subMenu为子菜单
function Menu(menu,subMenu)
{
this.down=true;//判断子菜单是否处于隐藏状态true为隐藏
this.parentMenu=document.getElementById(menu);
this.subMenu=document.getElementById(subMenu);
this.subMenuHeight=this.getHeight();//子菜单实际高度
this.subMenuMiniHeight=1;//子菜单缩放的最小高度
//alert(this.subMenuHeight);
this.speed=6;//子菜单收缩速度
}
Menu.selectedMenu=null;
Menu.prototype.init=function()//初始化子菜单的所有事件
{
this.subMenu.style.display='none';
// this.createClickEvent();
this.createLiEvent();
// this.slide(this.down,58);
}
Menu.prototype.createClickEvent=function()
{
var oThis=this;
// this.parentMenu.onclick=function()
// {
//
oThis.subMenu.style.display='block';
oThis.slide(oThis.down);
// }
}
Menu.prototype.getHeight=function()
{
var lis=this.subMenu.getElementsByTagName('li');
var height=0;
for(var i=0;i<lis.length;i++)
{
height+=lis[i].offsetHeight;
}
return height;
}
Menu.prototype.slide=function(down)//滑动
{
//alert(this.subMenu.tagName);
var oThis=this;
if(down)
{
(oThis.parentMenu.getElementsByTagName('img'))[0].src='../images/reduce.gif';
oThis.subMenu.style.height='1px';
var slideId=setInterval(function(){
oThis.subMenu.style.height=parseInt(oThis.subMenu.style.height)+parseInt(oThis.speed)+'px';
if(parseInt(oThis.subMenu.style.height) >= oThis.subMenuHeight)
{
oThis.subMenu.style.height=oThis.subMenuHeight+'px';
clearInterval(slideId);
oThis.down=false;
}
else
{
}},20);
}
else
{
(oThis.parentMenu.getElementsByTagName('img'))[0].src='../images/add.gif';
var slideId=setInterval(function(){
var height=parseInt(oThis.subMenu.style.height)-parseInt(oThis.speed);
//alert(height);
if(height<=0)
height=1;
oThis.subMenu.style.height=height+'px';
if(parseInt(oThis.subMenu.style.height) <= parseInt(oThis.subMenuMiniHeight))
{
oThis.subMenu.style.height='0px';
clearInterval(slideId);
oThis.down=true;
oThis.doWhenAnotherMenuAccur();
}
else
{
}},20);
}
}
Menu.prototype.createLiEvent=function()//创建Li元素事件
{
var oThis=this;
var lis=oThis.subMenu.getElementsByTagName('a');
for(var i=0;i<lis.length;i++)
{
// lis[i].onmouseover=function()
// {
// this.style.background='white';
// }
// lis[i].onmouseout=function()
// {
// this.style.background='#0099FF';
// }
lis[i].onclick=function()
{
for(var j=0;j<lis.length;j++)
{
// var index=lis[j].className.indexOf('click');
// if(index>=0)
// {
// lis[j].className.replace('click','');
// break;
// }
if(lis[j].style.background=='#2586d7')
{
//alert(j);
lis[j].style.background='white';
break;
}
}
// this.className+='click';
// alert(this.className);
this.style.background='#2586d7';
}
}
}
Menu.prototype.doWhenAnotherMenuAccur=function()
{
//alert(this.subMenu.tagName);
if(!this.down)
this.slide(this.down);
// alert('do');
var lis=this.subMenu.getElementsByTagName('a');
for(var i=0;i<lis.length;i++)
if(lis[i].style.background=='#2586d7')
{
lis[i].style.background='white';
break;
}
}
//单个menu类结束
//Menus类
function Menus()
{
this.menus=[];
this.commonMenus=[];
}
Menus.prototype.init=function()
{
this.createMenus();
for(var i=0;i<this.menus.length;i++)
this.menus[i].init();
//alert('init');
this.createClickEvent();
}
Menus.prototype.createMenus=function()
{
var divs=document.getElementsByTagName('div');
var mainDivs=[];
var j=0;
var k=0;
for(var i=0;i<divs.length;i++)
{
if(divs[i].className=='menu'&& (divs[i].getElementsByTagName('div')).length!=0)
mainDivs[j++]=divs[i];
else if(divs[i].className=='menu')
this.commonMenus[k++]=divs[i];
}
for(i=0;i<mainDivs.length;i++)
{
//alert(mainDivs[i].tagName);
var parentMenuId=(mainDivs[i].getElementsByTagName('div'))[0].id;
//alert(parentMenuId);
var subMenuId=(mainDivs[i].getElementsByTagName('ul'))[0].id;
this.menus[i]=new Menu(parentMenuId,subMenuId);
}
}
Menus.prototype.createClickEvent=function()
{
var oThis=this;
var evt;
for(var i=0;i<oThis.menus.length;i++)
oThis.menus[i].parentMenu.onclick=function()
{
for(var j=0;j<oThis.menus.length;j++)
if(this!=oThis.menus[j].parentMenu)
(oThis.menus[j]).doWhenAnotherMenuAccur();
else
{
(oThis.menus[j]).doWhenAnotherMenuAccur();
evt=oThis.menus[j];
}
for(j=0;j<oThis.commonMenus.length;j++)
if(((oThis.commonMenus[j].getElementsByTagName('a'))[0]).style.background=='white')
{
((oThis.commonMenus[j].getElementsByTagName('a'))[0]).style.background='#DBE9F8';
break;
}
evt.createClickEvent();
}
for(i=0;i<oThis.commonMenus.length;i++)
if((As=oThis.commonMenus[i].getElementsByTagName('a')).length!=0)
As[0].onclick=function()
{
for(var j=0;j<oThis.menus.length;j++)
(oThis.menus[j]).doWhenAnotherMenuAccur();
for(j=0;j<oThis.commonMenus.length;j++)
if(((oThis.commonMenus[j].getElementsByTagName('a'))[0]).style.background=='white')
{
((oThis.commonMenus[j].getElementsByTagName('a'))[0]).style.background='#DBE9F8';
break;
}
this.style.background='white';
}
}
//.css文件内容
html,body
{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
ul
{
margin:0px;
padding:0px;
display:block;
}
.parentMenu
{
background-color:#DBE9F8;
border:1px solid #BAC8E0;
text-align:center;
display:block;
width:159px;
height:20px;
font-size:14px;
padding-top:4px;
cursor:pointer;
position:relative;
color:Blue;
}
.parentMenu img
{
height:20px;
width:20px;
position:absolute;
top:2px;
left:4px;
}
.commonMenu
{
}
.commonMenu a
{
background-color:#DBE9F8;
border:1px solid #BAC8E0;
text-align:center;
display:block;
width:159px;
height:20px;
font-size:14px;
padding-top:4px;
cursor:pointer;
color:Blue;
}
.subMenu li
{
padding:0px;
margin:0px;
}
.subMenu a
{
background: white;
border:1px solid #BAC8E0;
border-bottom:0px;
display:block;
width:159px;
height:18px;
font-size:12px;
margin-top:0px;
padding-top:4px;
text-align:center;
cursor:pointer;
color:Blue;
}
.subMenu a:visited,.commonMenu a:visited
{
color:blue;
}
.subMenu a:hover,.commonMenu a:hover
{
color:red;
background: #5ba3e0;
}
.subMenu a:active,.commonMenu a:active
{
color:black;
}
.subMenu
{
text-decoration:none;
list-style:none;
overflow:hidden;
}
.menu
{
margin-top:2px;
}
.click
{
background:white;
}
#mainMenu
{
position:relative;
width:162px;
margin-left:10px;
}
//menu specification
<div class="menu" >
<span id="chuLiGongJu_parentMenu" class="commonMenu"><a href="../ToolSelect/toolselect.aspx" target="iRight">处理工具查询</a></span>
</div>
<div class="menu" >
<div id="zhuanJia_parentMenu" class="parentMenu">
<img src="../images/add.gif" />
<span >参考方案</span>
</div>
<ul id="zhuanJia_subMenu" class="subMenu">
<li><a href="../professer/professer.aspx" target="iRight">方案查询</a></li>
<li><a href="#">3D展示</a></li>
</ul>
</div>
<div class="menu" >
<span id="yuFangCuoShi_parentMenu" class="commonMenu"><a href="#">预防措施</a></span>
</div>
浙公网安备 33010602011771号