现在的位置: 首页 > 综合 > 正文

asp.net随手乱记(10)JS下拉菜单

2014年12月13日 ⁄ 综合 ⁄ 共 3990字 ⁄ 字号 评论关闭

26:

//2006-04-24
//fhmsha修改版,
使之可以在同一页面中生成多个菜单,这样调用:
//   <script type ="text/javascript" >
//            createMainLayer("aa","txtb_msgfrom","第一个|第二个|第三个");
//   </script>

// JScript 文件

//--------------- 主导航条内容 ------------//
//将在页面中多次使用,所以要先初始化
var mainLayer=new Array("<img src=../images/find.gif>");//主导航栏目,可以用HTML代码

 

//--------------- 次导航条内容 ------------//
var subLayer0=new Array("论坛","文献","文档"); //导航栏目一下的次级栏目
var subLayerHttp0=new Array("#","#","#");//主导航栏目一下的次级栏目连接地址

 

//--------------- 主导航条Table参数调整 ------------//
var mainTableTdWidth=20; //每个TD的宽度,调整主导航内容间距
var mainTableTdHeight=20; //每个TD的宽度,调整主导航内容间距
var mainTableBorder=0; //调整主导航表格边框宽度
var mainTableCellspacing=0; //调整主导航表格Cellspacing
var mainTableCellpadding=1; //调整主导航表格Cellpadding
var mainTableBgcolor="#000000"; //调整主导航表格背景色
var mainTableBordercolor=""; //调整主导航表格编框颜色
var mainTableBackgroundImg=""; //调整主导航表格背景图片url地址
var hrefClassName="link" //调整url风格样式
var mainTableTdBgcolor="B2CBCF"; //调整主导航表格Td色

 

//--------------- 次导航条Table参数调整 ------------//
var subTableBorder=0; //调整次导航条表格边框宽度
var subTableCellspacing=0; //调整次导航条表格Cellspacing
var subTableCellpadding=1; //调整次导航条表格Cellpadding
var subTableBgcolor="#000000"; //调整次导航条表格背景色
var subTableBordercolor=""; //次导航条表格编框颜色
var subTableBackgroundImg=""; //次导航条表格背景图片url地址
var subTableTdBgcolor="B2CBCF"; //调整次导航表格Td色
var sbuTabbleTop=10; //次导航表格上下微调
var sbuTabbleLeft=10; //次导航表格左右微调

 

//--------------- 系统参数*请勿调整 ------------//
var layerMax=mainLayer.length+10;
//var layerName="index";
var layName;//自定义,使其可以在同一网页中生成多次
var tagetid;//<input id=TAGETID type=text>指这个ID
//---------------初始化变量-----------------//

//--------------- 生成下拉菜单 ------------//
//ln :层名,不能与目标ID重复
//ti :变换文本(value)的目标ID值
//myArr:一个字符串组合,为下拉菜单内容

function createMainLayer(ln,ti,myArr){
layerName=ln;
tagetid=ti;
subLayer0 = myArr.split("|");

document.write("<div id='"+layerName+"' onmouseout=layervib('visible','"+layerMax+"','"+layerName+"') style='position:relative; left:0px; top:0px; width:100%; z-index:1' ><table width="+mainLayer.length*mainTableTdWidth+" border='"+mainTableBorder+"' cellspacing='"+mainTableCellpadding+"' cellpadding='"+mainTableCellpadding+"' bgcolor='"+mainTableBgcolor+"' bordercolor='"+mainTableBordercolor+"' background='"+mainTableBackgroundImg+"'><tr>");
for(i=0;i<mainLayer.length;i++){
document.write("<td width='"+mainTableTdWidth+"' height='"+mainTableTdHeight+"' bgcolor='"+mainTableTdBgcolor+"' class='"+hrefClassName+"' onmouseover=layervib('visible','"+i+"','"+layerName+"')>"+mainLayer[i]+"</td>");
}
document.write("</tr></table>");
for(j=0;j<mainLayer.length;j++){
createSubLayer(j);
}
document.write("</div></table>");
}

//--------------- 生成每项下拉菜单内容 ------------//
function createSubLayer(num){
var subLayerName= layerName +num;
var subLayerLeft=(mainTableTdWidth*num)+mainTableCellpadding+mainTableBorder;
var subLayerList=eval("subLayer"+num);
var subLayerHttpList=eval("subLayerHttp"+num);
document.write("<div id='"+subLayerName+"' style='position:absolute; left:"+(subLayerLeft+sbuTabbleLeft)+"px; top:"+((mainTableBorder+mainTableCellspacing+mainTableCellpadding)*2+sbuTabbleTop)+"px; z-index:2; height: 24px; visibility: hidden' onmouseover=layervib('visible','"+num+"','"+layerName+"') onmouseout=layervib('visible','"+layerMax+"','"+layerName+"')>");
if(subLayerList.length!=0){
document.write("<table width='100px' border='"+subTableBorder+"' cellspacing='"+subTableCellpadding+"' cellpadding='"+subTableCellpadding+"' bgcolor='"+subTableBgcolor+"' bordercolor='"+subTableBordercolor+"' background='"+subTableBackgroundImg+"'")
for(h=0;h<subLayerList.length;h++){

document.write("<tr><td bgcolor='"+subTableTdBgcolor+"' width='100%' class='link' >&nbsp;<a href='#' class='link' onclick='document.all."+tagetid+".value=this.value' value="+subLayerList[h]+">"+subLayerList[h]+"</a></td></tr>");
}
//document.write("</table>");
}
document.write("</div>");

 

}

 

//------------------------------次菜单显隐控制--------------------------//
function layervib(type,num,lname){
var H=type;
var temp=(H='visible'?'hidden':'visible')
for(var i=0;i<mainLayer.length;i++){
var E=eval('document.all.'+lname+i+'.style');
var H=eval(i);
if(i==num){E.visibility=type}else{E.visibility=temp};
}
}

抱歉!评论已关闭.