定制你的IE右键菜单

Author: Date: 2001年 46期

?牐犑褂霉齏indows的用户对于右键菜单肯定不陌生,在使用Windows的时候,右键菜单无处不在,对于用户来说是非常方便。
  ?牐牭牵阡劳车氖焙颍绻梢远杂没Х梦实耐径ㄖ埔桓鲇壹说ダ词迪侄哉鐾镜牡己剑俏抟啥苑梦收呓呛芊奖愕摹?
  ?牐犗旅嫖颐墙肑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及以上版本中才能正常显示。