上文说到菜单被创建出来了,现在要说的是第二部分的:
( 2 ),选择菜单,点击菜单
选择菜单和点击菜单实际上时鼠标的 MouseMove 和 Click 事件。在上文提到的 menustyle 里面,我是通过 JavaScript 提供的 window.createPopup 函数来实现弹出菜单,弹出菜单的内容为一个表格。在表格中的每一项都提供了 MouseMove 和 Click 事件。
在 MouseMove 事件发生的时候,我就让他显示出不同的风格。
当发生 Click 事件的时候,就调用函数 fnclick ,使之发生我们的需要的任务。现在具体来介绍 menustyle ()函数。
f unction menuStyle(){
if(window.navigator.appName == "Microsoft Internet Explorer" && window.navigator.appVersion.substring(window.navigator.appVersion.indexOf("MSIE") + 5, window.navigator.appVersion.indexOf("MSIE") + 8) >= 5.5)
isIe = 1;
else
isIe = 0;
if(isIe){
menuContent = '
1<table cellpadding="0" cellspacing="0" height="0" id="rightMenu" style="font:menu;color:menutext;" width="0"><tr height="1"><td colspan="4" style="background:black"></td></tr><tr height="10"><td style="background:black"></td><td style="background:Snow"><table cellpadding="0" cellspacing="0" nowrap="" style="font:menu;color:menutext;cursor:default;">'; // 这一行是画了个表格,从下面开始,添加表格里面的项目,同时给出了 MouseOver 的风格等。最关键的一个地方是 onClick 事件发生调用的函数为 parent.fnclickmenu ,特别提醒的是调用的是父窗口的函数。
2
3for(m=0;m<menuitems.length;m++){ #9999cc\';this.style.color="\'menutext\';"" &&="" +='<tr height="17" onMouseOver="this.style.background=\' <td="" if(menuitems[m][0]="" menucontent="" menuitems[m][2])="" nowrap="" onclick="parent.fnclickmenu(\''+menuItems[m][1]+'\')" onmouseout="this.style.background=\'Snow\';this.style.color=\'menutext\';" style="background:threedface" width="1"></menuitems.length;m++){></table></td><td nowrap="" width="21"><img src="' + menuItems[m][2] + '"/></td><td nowrap="">' + menuItems[m][0] + '</td><td nowrap="" width="21"></td><td nowrap="" style="background:threedface" width="1"></td></tr>';
4
5else if(menuItems[m][0])
6
7menuContent += '<tr height="17" onclick="parent.fnclickmenu(\''+menuItems[m][1]+'\')" onmouseout="this.style.background=\'Snow\';this.style.color=\'menutext\';" onmouseover="this.style.background=\'#9999cc\';this.style.color=\'menutext\';"><td nowrap="" style="background:threedface" width="1"></td><td nowrap="" width="21"></td><td nowrap="">' + menuItems[m][0] + '</td><td nowrap="" width="21"></td><td nowrap="" style="background:threedface" width="1"></td></tr>';
8
9else
10
11menuContent += '<tr><td colspan="5" height="4"></td></tr><tr><td colspan="5"><table cellspacing="0"><tr><td height="1" width="2"></td><td height="1" style="background:threedshadow" width="0"></td><td height="1" width="2"></td></tr><tr><td height="1" width="2"></td><td height="1" style="background:threedhighlight" width="100%"></td><td height="1" width="2"></td></tr></table></td></tr><tr><td colspan="5" height="3"></td></tr>';
12
13}
14
15menuContent += '</table>
1<td style="background:threedshadow"></td>
1<td style="background:threeddarkshadow"></td>
1<tr height="1"><td style="background:threedlightshadow"></td><td style="background:threedhighlight"></td><td style="background:threedface"></td><td style="background:threedshadow"></td><td style="background:threeddarkshadow"></td></tr>
1<tr height="1"><td style="background:threedlightshadow"></td><td colspan="3" style="background:threedshadow"></td><td style="background:threeddarkshadow"></td></tr>
1<tr height="1"><td colspan="5" style="background:threeddarkshadow"></td></tr>
';
// 下面就弹出了一个菜单。
menuPopup = window.createPopup();
// 菜单里面的东西为上面画出的表格。
menuPopup.document.body.innerHTML = menuContent;
结合上文的 ShowMenu (),函数,就明白了如何实现弹出菜单功能的方法了。在 fnclickmenu 函数中。你就可以轻松的加上你想处理的各种功能了。
各位看官,如果不明白还希望能够和我交流。Email:l_[email protected]