定制你的IE右键菜单
?牐牭牵阡劳车氖焙颍绻梢远杂没Х梦实耐径ㄖ埔桓鲇壹说ダ词迪侄哉鐾镜牡己剑俏抟啥苑梦收呓呛芊奖愕摹?
?牐犗旅嫖颐墙肑avaScript一步一步创建这样的菜单。
#1?牐牭谝徊? 加入菜单使用的样式
?牐犑紫仁褂肅SS为菜单层定制样式。
?牐?<style>
?牐?<!--
?牐?.skin0 {??
?牐爌osition:absolute;
?牐爐ext-align:left;
?牐爓idth:200px;??
?牐燽order:2px solid black;
?牐燽ackground-color:menu;
?牐爁ont-family:宋体;
?牐爈ine-height:20px;??
?牐燾ursor:default;??
?牐爒isibility:hidden;??
?牐爙
?牐?.skin1{ ??
?牐燾ursor:default;??
?牐爁ont:menutext;??
?牐爌osition:absolute;
?牐爐ext-align:left;
?牐燜ont-family: 宋体;
?牐爁ont-size: 9pt;
?牐爓idth:120px;
?牐燽ackground-color:menu;??
?牐燽order:1 solid buttonface;
?牐爒isibility:hidden;
?牐燽order:2 outset buttonhighlight;
?牐爙??
?牐?.menuitems {padding-left:15px;
?牐爌adding-right:10px;
?牐爙??
?牐?--></style>
#1?牐牭诙? 加入Javascript处理函数
?牐牸尤氪?理函数,把下面的代码放到网页中的<HEAD>和</HEAD>标签之间:
?牐?<SCRIPT LANGUAGE=“JavaScript1.2”>
?牐?<!--开始
?牐?//为菜单定制使用的样式。
?牐爒ar menuskin = “skin1”??
?牐?//设置是否在状态栏中显示菜单项上URL。置为0表示不显示,置为1则显示。
?牐爒ar display_url = 0;
?牐?//定义函数showmenuie5(),该函数用来显示菜单。
?牐爁unction showmenuie5()
?牐爗
?牐?//首先得到鼠标位置
?牐爒ar rightedge = document.body.clientWidth-event.clientX;
?牐爒ar bottomedge = document.body.clientHeight-event.clientY;
?牐?/ ★判断鼠标位置,确定菜单位置 ★/
?牐爄f (rightedge < ie5menu.offsetWidth)
?牐爄e5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
?牐爀lse
?牐爄e5menu.style.left = document.body.scrollLeft + event.clientX;
?牐爄f (bottomedge < ie5menu.offsetHeight)
?牐爄e5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
?牐爀lse
?牐爄e5menu.style.top = document.body.scrollTop + event.clientY;
?牐?//然后显示菜单。
?牐爄e5menu.style.visibility = “visible”;??
?牐爎eturn false;
?牐爙
?牐?//定义隐藏菜单的函数。
?牐爁unction hidemenuie5()
?牐爗??
?牐爄e5menu.style.visibility = “hidden”;
?牐爙
?牐?//定义函数highlightie5(),在鼠标移动到菜单项上时使该菜单项高亮显示
?牐爁unction highlightie5()
?牐爗
?牐?//判断如果是菜单项,则高亮显示,设置其颜色为系统默认颜色。
?牐爄f(event.srcElement.className == “menuitems”)
?牐爗??
?牐爀vent.srcElement.style.backgroundColor = “highlight”;
?牐爀vent.srcElement.style.color = “white”;
?牐?//如果在状态栏中显示URL选项为真,则在状态栏中显示相应URL。
?牐爄f (display_url)
?牐爓indow.status = event.srcElement.url;
?牐爙??
?牐爙??
?牐?/★ 定义函数lowlightie5(),该函数与上面的函数功能恰好相反,该函数取消高亮显示。★/
?牐爁unction lowlightie5()
?牐爗??
?牐爄f (event.srcElement.className == “menuitems”)
?牐爗??
?牐爀vent.srcElement.style.backgroundColor = “”;
?牐爀vent.srcElement.style.color = “black”;
?牐爓indow.status = “”;
?牐爙
?牐爙
?牐?/★ 定义函数jumptoie5(),该函数处理单击菜单项中的选项的事件。
?牐牎?/
?牐爁unction jumptoie5()
?牐爗??
?牐爄f (event.srcElement.className == “menuitems”)
?牐爗
?牐爄f (event.srcElement.getAttribute(“target”)!= null)
?牐爓indow.open(event.srcElement.url, event.srcElement.getAttribute(“target”));??
?牐爀lse
?牐爓indow.location = event.srcElement.url;
?牐爙??
?牐爙??
?牐?// 结束 -->
?牐?</script>
#1?牐牭谌? 设置和调用Javascript处理函数
?牐犖颐切枰谕持卸ㄒ逵糜谙允静说サ牟悖?
?牐營D为ie5menu
?牐犗煊?onMouseOver事件的函数为highlightie5()
?牐犗煊?onMouseOut事件的函数为lowlightie5()
?牐犗煊?onClick事件的函数为jumptoie5()。
?牐牥严旅娴拇敕诺酵持械?<BODY>和</BODY>标签之间:
?牐?<div id=“ie5menu” class=“skin0” onMouseover=“highlightie5()” onMouseout=“lowlightie5()” onClick=“jumptoie5();”>
?牐?<div class=“menuitems” url=“javascript?焗istory.go(1);”>前进</div>
?牐?<div class=“menuitems” url=“javascript?焗istory.back();”>后退</div>
?牐?<hr>
?牐?<div class=“menuitems” url=“http://www.cpcw.com”>主页</div>
?牐?<hr>
?牐?<div class=“menuitems” url=“http://www.cpcw.com” target=“_blank”>电脑报</div>
?牐?<div class=“menuitems” url=“http://www.sina.com.cn” target=“_blank”>新浪</div>
?牐?<div class=“menuitems” url=“http://www.shou.com” target=“_blank”>搜狐</div>
?牐?<div class=“menuitems” url=“http://www.163.net/” target=“_blank”>163电子邮局</div>
?牐?<hr>
?牐?<div class=“menuitems” url=“mailto?焒ozu@sina.com”>联系我们</div>
?牐?</div>
?牐?<!--下面的代码判断是否为IE5,然后处理。 -->
?牐?<script language=“JavaScript1.2”>
?牐爄f (document.all && window.print)
?牐爗??
?牐爄e5menu.className = menuskin??
?牐燿ocument.oncontextmenu = showmenuie5??
?牐燿ocument.body.onclick = hidemenuie5??
?牐爙
?牐?</script>
?牐犎缓笥肐E5打开该网页,就可以看到效果。你还可以自己修改创建出自己特色的个性化右键菜单。不过要注意的是:上面实现的功能耐需要在IE5及以上版本中才能正常显示。