网页中制作右键菜单

最新推荐文章于 2024-05-11 08:38:06 发布

原创最新推荐文章于 2024-05-11 08:38:06 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #div #border #class #html

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

需要在网页上做右键菜单，这不得不借助javascript。看了一下，有以下几个关键点：

1：菜单需要用div分层来定义。
2：接管浏览器的右键菜单方法： document.oncontextmenu = showMenu;
3：在必要时弹出菜单，这可以通过判定当前element的属性，在输出html时，需要对特定单位设定特定的Style。
比如；<TD class="menuDD">右键菜单2</TD> menuDD就是特定的style。
     判断的方法是：
     if (event.srcElement.className == "menuDD")
     处理是：如果是指定Style，那就显示我们的div菜单，否则，返回true,交给系统处理。
4：显示菜单前，需要为菜单计算显示位置：
    这个主要通过 document.body 和 event的属性，以及菜单本身的预定义偏移值来确定。很简单，不多说。
5：鼠标在菜单上移动的效果处理。
   这主要是要体现菜单的通常效果。也就是移到某Item，移出某Item的菜单显示效果。
   定义相应的处理函数：onMouseover="highlightMenu()" onMouseout="lowlightMenu()"
   相应函数里，无非是改变特定菜单项的显示效果。
6：执行菜单的功能。
   在div中定义执行功能的方法：onClick="onMenuGoto();" onMenuGoto可以根据div中各单元提供的属性执行功能。
7：隐藏菜单的功能。
   当点击其它地方时，应该隐藏菜单。
   document.body.onclick = hideMenu;
   隐藏菜单无非就是将 visibility 置 "hidden";

  下面是示例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<style>

.skin0 {

position:absolute;

padding-top:2px;

text-align:left;

width:200px;

border:2px solid black;

background-color:menu;

font-family:"宋体";

line-height:20px;

cursor:default;

visibility:hidden;

border:2 outset buttonhighlight;

}

.menuitems {

padding:2px 2px 2px 1px;

}

.menuDD{

background:pink;

}

</style>

</HEAD>

<!--

function showMenu(){

if (event.srcElement.className != "menuDD") {

return true;

}

var rightedge = document.body.clientWidth-event.clientX;

var bottomedge = document.body.clientHeight-event.clientY;

if (rightedge <pm.offsetWidth){

pm.style.left = document.body.scrollLeft + event.clientX - pm.offsetWidth;

}else{

pm.style.left = document.body.scrollLeft + event.clientX;

}

if (bottomedge <pm.offsetHeight){

pm.style.top = document.body.scrollTop + event.clientY - pm.offsetHeight;

}else{

pm.style.top = document.body.scrollTop + event.clientY;

}

pm.style.visibility = "visible";

return false;

}

function hideMenu(){

pm.style.visibility="hidden";

}

function highlightMenu() {

if (event.srcElement.className == "menuitems") {

event.srcElement.style.backgroundColor = "highlight";

event.srcElement.style.color = "white";

}

function lowlightMenu() {

if (event.srcElement.className == "menuitems") {

event.srcElement.style.backgroundColor = "";

event.srcElement.style.color = "black";

window.status = "";

}

function onMenuGoto(){

if (event.srcElement.className == "menuitems" &event.srcElement.url!=null) {

if (event.srcElement.getAttribute("target") != null){

window.open(event.srcElement.url, event.srcElement.getAttribute("target"));

}

else{

window.location = event.srcElement.url;

}

//-->

</SCRIPT>

<BODY>

<div id="pm" class="skin0" onMouseover="highlightMenu()" onMouseout="lowlightMenu()"

onClick="onMenuGoto();">

<div class="menuitems" target="_bank" url="http://www.google.com">Google</div>

<div class="menuitems" target="_bank" url="http://www.baidu.com.cn">baidu</div>

<div class="menuitems" onclick="alert(this.innerHTML);">Hi, I'm javascript.</div>

</div>

右键菜单测试

<TR>

<TD>eeeeeeeee</TD>

<TD>eeeeeeeeeeeeee</TD>

<TD>eeeeeeeeeeeee</TD>

</TR>

<TR>

<TD>wwwwwwwe</TD>

</TR>

<TR>

<TD>eeeeeeeeee</TD>

<TD>ewewe</TD>

</TR>

</TABLE>

<!--

if (document.all) {

document.oncontextmenu = showMenu;

document.body.onclick = hideMenu;

}

//-->

</SCRIPT>

</BODY>

</HTML>