用js设计了一个下拉菜单,具有以下特色:
1.兼容两种浏览器:IE和firefox;
2.外观设计和代码分离,外观设计完全使用css;
3.调用简单:menucreat(主菜单div,子菜单div,菜单数组),菜单数组为一个三维数组,每一项包含四个内容:菜单名、执行目标、执行内容、有效性;大家看代码很容易明白。
4.位置可以任意放置;
不尽完美之处,请大家一起改进。
使用时请包含prototype.js。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<script type="text/javascript" src="prototype.js"></script>
<style>
<!--
.szh_mm{
background-color:#D4D0C8;font-size:10pt;
}
.szh_sm{
cursor:default;font-size:9pt;width:120;
}
.szh_smItem{
border:1px;text-align:left;padding-left:11px;padding-right:11px;padding-bottom:2px;
background:#D4D0C8;color:#000000;
}
.szh_smItemFalse{
border:1px;color:#808080;padding-left:11px;padding-right:11px;padding-bottom:2px;
}
.szh_smItemHover{
border:1px;text-align:left;padding-left:11px;padding-right:11px;padding-bottom:2px;
background-color:#333366;color:#FFFFFF;
}
.szh_smItemDown{
text-align:left;padding-left:10px;padding-right:10px;border:1px inset;
background-color:#808080;color:#FFFFFF;
}
-->
</style>
<script>
function menucreat(div1,div2,a){
var menu = Class.create();
//defining the rest of the class implmentation
menu.prototype = {
initialize: function(divmm,divsm,a){
var i,row,cell;
this.marry=a;
this.divmm=$(divmm);
this.divsm=$(divsm);
this.divmm.innerHTML='<table id="tblmm" cellspacing="1" cellpadding="0" class="szh_mm"><tr><td class="szh_mmItem"></td></tr></table>';
row=$('tblmm').rows[0];
for(i=a.length-1;i>=0;--i){
cell=row.insertCell(0);
cell.width=60;
cell.innerHTML=a[i][0][0];
if(a[i][0][0]=='|')cell.className="szh_smItemFalse";
else if(a[i][0][3]){
cell.setAttribute('i',i);
cell.setAttribute('j',0);
cell.className="szh_smItem";
cell.οnmοuseοver=this.mmover.bindAsEventListener(this);
cell.οnmοuseοut=this.mmout.bindAsEventListener(this);
cell.οnmοusedοwn=this.mmdown.bindAsEventListener(this);
cell.οnmοuseup=this.mmup.bindAsEventListener(this);
}
else cell.className="szh_smItemFalse";
}
},
mmover:function(evt){
var i,j,obj=Event.element(evt);
obj.className="szh_smItemHover";
i=obj.getAttribute('i');
j=obj.getAttribute('j');
if(j==0&&this.marry[i].length>1&&this.divsm.style.display!='none')this.crtSm(i);
},
mmout:function(evt){
var obj=Event.element(evt);
obj.className="szh_smItem";
},
mmdown:function(evt){
var i,j,obj=Event.element(evt);
obj.className="szh_smItemDown";
i=obj.getAttribute('i');
j=obj.getAttribute('j');
if(j==0&&this.marry[i].length>1){
if(this.divsm.style.display!='none')this.divsm.style.display='none';
else this.crtSm(i);
}
},
crtSm:function(i){
var j,tblsm,row,cell;
this.divsm.innerHTML='<table id="tblsm" cellspacing="1" cellpadding="0" class="szh_sm"></table>';
tblsm=$('tblsm');
for(j=1;j<this.marry[i].length;++j){
row=tblsm.insertRow(j-1);
cell=row.insertCell(0);
cell.height=20;
if(this.marry[i][j][0]=='--'){
cell.innerHTML='<hr />';
}
else{
cell.innerHTML=this.marry[i][j][0];
if(this.marry[i][j][3]){
cell.setAttribute('i',i);
cell.setAttribute('j',j);
cell.className="szh_smItem";
cell.οnmοuseοver=this.mmover.bindAsEventListener(this);
cell.οnmοuseοut=this.mmout.bindAsEventListener(this);
cell.οnmοusedοwn=this.mmdown.bindAsEventListener(this);
cell.οnmοuseup=this.mmup.bindAsEventListener(this);
}
else{
cell.className='szh_smItemFalse';
}
}
}
this.divsm.style.left=i*83+4;
this.divsm.style.display='';
},
mmup:function(evt){
var obj=Event.element(evt);
var i,j;
obj.className="szh_smItem";
i=obj.getAttribute('i');
j=obj.getAttribute('j');
//alert(obj.innerHTML+':'+i+':'+j+':'+this.marry[i][j][1]);
if(j>0||(this.marry[i].length==1)){
$('divsm').style.display='none';
if(this.marry[i][j][2]=='') return;
if(this.marry[i][j][1]=="js"){ eval(this.marry[i][j][2]);}
else{var x=window.open(this.marry[i][j][2],this.marry[i][j][1]);x.focus();}
}
}
};
var mm=new menu(div1,div2,a);
}
function init(){
menucreat('divmm','divsm',[
[
['文件','','',1],
['新建','_self','4.htm',1],
['打开','','',0],
['--'],
['保存','js','alert(/'Hello./')',1],
['退出','','about:blank',1]
],
[
['编辑','','',1],
['撤消','','',1],
['重做','','',1]
],
[['|','','',0]
],
[
['帮助','js','alert(/'帮助/')',1],
['帮助主题','js','alert(/'帮助主题/')',1],
['关于','js','alert(/'版权所有/')',1]
]
]);
}
</script>
</head>
<body onLoad="init();">
<table width="100%"><tr><td>
<div id="divmm" style="width:auto;height:auto;left:0px;top:0px;background-color:#d4d0c8;z-index:99;border:2px outset;">
<table id="tblmm" cellspacing="1" cellpadding="0" class="szh_mm"><tr><td class="szh_mmItem"></td></tr></table>
</div>
<div id="divsm" style="position:absolute;width:auto;height:auto;z-index:99;background-color:#d4d0c8;border:2px outset;display:none;">
</div>
</td></tr><tr><td>
sflkaksjd
sdafkljsad
dslg
<br />
<textarea id="abc"></textarea>
</td></tr></table>
外观设计:<br />
正常时的外观:
<div id="" style="width:auto;height:auto;left:0px;top:0px;background-color:#d4d0c8;z-index:99;border:1px outset;">
<TABLE class=szh_mm id=tblmm cellSpacing=2 cellPadding=0>
<TBODY>
<TR>
<TD class=szh_smItem width=60>文件</TD>
<TD class=szh_smItem width=60>编辑</TD>
<TD width=60>|</TD>
<TD class=szh_smItem width=60>帮助</TD>
</TR></TBODY></TABLE>
</div><br>
鼠标按下时的外观
<div id="" style="width:auto;height:auto;left:0px;top:0px;background-color:#d4d0c8;z-index:99;border:1px outset;">
<TABLE class=szh_mm id=tblmm cellSpacing=2 cellPadding=0>
<TBODY>
<TR>
<TD class=szh_smItemDown width=60>文件</TD>
<TD class=szh_smItemDown width=60>编辑</TD>
<TD width=60>|</TD>
<TD class=szh_smItemDown width=60>帮助</TD>
</TR></TBODY></TABLE>
</div><br>
鼠标移入时的外观
<div id="" style="width:auto;height:auto;left:0px;top:0px;background-color:#d4d0c8;z-index:99;border:1px outset;">
<TABLE class=szh_mm id=tblmm cellSpacing=2 cellPadding=0>
<TBODY>
<TR>
<TD class=szh_smItemHover width=60>文件</TD>
<TD class=szh_smItemHover width=60>编辑</TD>
<TD width=60>|</TD>
<TD class=szh_smItemHover width=60>帮助</TD>
</TR></TBODY></TABLE>
</div>
</body></html>