动态侧拉菜单,二级.方便改为下拉菜单

本文介绍了一个使用 JavaScript 实现的下拉菜单插件的详细代码逻辑,包括菜单项的添加、加载及显示方法。该插件支持自定义菜单样式、方向,并通过事件监听实现交互效果。

functionJsMenu(name)
...{
this.Direction=0;//主菜单排列方向:0代表横向,1代表竖向
this.MainWidth=200;//主菜单各项宽度
this.MainHeight=20;//主菜单各项高度

this.ItemWidth=null;
this.ItemHeight=null;

this.MainIcon=null;
this.MainAlign=null;

this.ItemIcon=null;
this.ItemAlign=null;

this.MainAnchor=null;
this.ItemAnchor=null;

this.Spacing=0;
this.Padding=0;

this.OutBgColor='#FFFFFF';
this.OverBgColor='#EFEFEF';

this.OutBorder='1pxsolid#BBBBBB';
this.OverBorder='1pxsolid#999999';


this.Name='JM';//注:不用更改
this.Icon='·';//注:不用更改
varHasItems=false;
varMenuItems=newArray();
this.Add=function(Id,Parent,Text,Href,Target,Title)
...{
HasItems
=true;
MenuItems[MenuItems.length]
=newArray(Id,Parent,Text,Href,Target,Title);
}
;

this.Load=function()
...{
if(name==null)
this.Name+=Math.random().toString().replace('.','0');
else
this.Name=this.Name+name;
if(this.MainHeight!=null)this.MainHeight='height="'+this.MainHeight+'"';
if(this.ItemHeight!=null)this.ItemHeight='height="'+this.ItemHeight+'"';
if(this.MainAlign!=null)this.MainAlign='align="'+this.MainAlign+'"';
if(this.ItemAlign!=null)this.ItemAlign='align="'+this.ItemAlign+'"';
if(this.MainAnchor!=null)this.MainAnchor='class="'+this.MainAnchor+'"';
if(this.ItemAnchor!=null)this.ItemAnchor='class="'+this.ItemAnchor+'"';
if(this.MainIcon==null)
this.MainIcon=this.Icon;
else
this.MainIcon='<imgborder="0"src="'+this.MainIcon+'"align="absmiddle"/>';
if(this.ItemIcon==null)
this.ItemIcon=this.Icon;
else
this.ItemIcon='<imgborder="0"src="'+this.ItemIcon+'"align="absmiddle"/>';
}
;

this.getMain=function(NO)
...{
if(this.Direction==1)document.write('<tr>');
document.write(
'<tdwidth="'+this.MainWidth+'"'+this.MainAlign+''+this.MainHeight+'bgcolor="'+this.OutBgColor+'"style="border:'+this.OutBorder+';padding:'+this.Padding+';white-space:nowrap;"title="'+MenuItems[NO][5]+'"');
document.write(
'onmouseover="this.bgColor=''+this.OverBgColor+'';this.style.border=''+this.OverBorder+'';'+this.Name+'_'+MenuItems[NO][0]+'.style.display='inline';"onmouseout="this.bgColor=''+this.OutBgColor+'';this.style.border=''+this.OutBorder+'';'+this.Name+'_'+MenuItems[NO][0]+'.style.display='none';">');
document.write(
'<divstyle="display:inline;width:'+(this.MainWidth-20)+'px;">&nbsp;'+this.MainIcon+'<ahref="'+MenuItems[NO][3]+'"target="'+MenuItems[NO][4]+'"'+this.MainAnchor+'>'+MenuItems[NO][2]+'</a>&nbsp;</div>');
document.write(
'<divid="'+this.Name+'_'+MenuItems[NO][0]+'_HI"align="right"style="display:none;width:20px;"><spanstyle="font-family:Webdings">4</span></div>');
if(this.Direction==1)
...{
document.write(
'<tdwidth="0"align="left"valign="top"onmouseover="'+this.Name+'_'+MenuItems[NO][0]+'.style.display='inline';"onmouseout="'+this.Name+'_'+MenuItems[NO][0]+'.style.display='none';">');
document.write(
'<divid="'+this.Name+'_'+MenuItems[NO][0]+'"style="position:absolute;display:none;">');
document.write(
this.getItems(MenuItems[NO][0]));
document.write(
'</div>');
document.write(
'</td>');
}

else
...{
document.write(
'<br/>');
document.write(
'<divid="'+this.Name+'_'+MenuItems[NO][0]+'"style="position:absolute;display:none;">');
document.write(
this.getItems(MenuItems[NO][0]));
document.write(
'</div>');
}

document.write(
'</td>');
if(this.Direction==1)document.write('</tr>');
}
;

this.getItems=function(PID)
...{
varHasItems=false;
varItemString=null;
ItemString
='<tablestyle="border-collapse:collapse;"border="0"cellpadding="0"cellspacing="0">';
for(vari=1;i<MenuItems.length;i++)
...{
if(MenuItems[i][1]==PID)
...{
HasItems
=true;
ItemString
+='<tr>';
ItemString
+='<tdwidth="'+this.ItemWidth+'"'+this.ItemAlign+''+this.ItemHeight+'bgcolor="'+this.OutBgColor+'"style="border:'+this.OutBorder+';padding:'+this.Padding+';white-space:nowrap;"title="'+MenuItems[i][5]+'"';
ItemString
+='onmouseover="this.bgColor=''+this.OverBgColor+'';this.style.border=''+this.OverBorder+'';'+this.Name+'_'+MenuItems[i][0]+'.style.display='inline';"onmouseout="this.bgColor=''+this.OutBgColor+'';this.style.border=''+this.OutBorder+'';'+this.Name+'_'+MenuItems[i][0]+'.style.display='none';">';
ItemString
+='<divstyle="display:inline;width:'+(this.ItemWidth-20)+'px;">&nbsp;'+this.ItemIcon+'<ahref="'+MenuItems[i][3]+'"target="'+MenuItems[i][4]+'"'+this.ItemAnchor+'>'+MenuItems[i][2]+'</a>&nbsp;</div>';
ItemString
+='<divid="'+this.Name+'_'+MenuItems[i][0]+'_HI"align="right"style="display:none;width:20px;"><spanstyle="font-family:Webdings">4</span></div>';
ItemString
+='<tdwidth="0"align="left"valign="top"onmouseover="'+this.Name+'_'+MenuItems[i][0]+'.style.display='inline';"onmouseout="'+this.Name+'_'+MenuItems[i][0]+'.style.display='none';">';
ItemString
+='<divid="'+this.Name+'_'+MenuItems[i][0]+'"style="position:absolute;display:none;">';
ItemString
+=this.getItems(MenuItems[i][0]);
ItemString
+='</div>';
ItemString
+='</td>';
ItemString
+='</td>';
ItemString
+='</tr>';
ItemString
+='<tr>';
ItemString
+='<tdbgcolor="#FFFFFF"style="line-height:'+this.Spacing+'px;">&nbsp;</td>';
ItemString
+='</tr>';
}

}

ItemString
+='</table>';
if(HasItems)
...{
ItemString
+='<scriptlanguage="javascript"type="text/javascript">';
ItemString
+='document.getElementById("'+this.Name+'_'+PID+'_HI").style.display="inline";';
ItemString
+=
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值