自定义右键菜单

最新推荐文章于 2025-08-15 22:56:20 发布

weixin_30340353

最新推荐文章于 2025-08-15 22:56:20 发布

阅读量55

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/kuikui/archive/2012/02/13/2349529.html

自定义右键菜单
实现原理
为body添加一个div，当点击右键的时候，显示div。

1、创建一个RightMenu函数
属性有设置背景backgroundColor、设置上边框borderTop、设置右边框borderRight、设置下边框borderBottom、设置左边框borderLeft，并为属性指定默认值。
方法有添加项AddItem、添加线AddLine、初始化Init。

2、AddItem和AddLine方法介绍
首先，创建一个数组this.MenuContent = [];
将添加项和添加线保存在这个数组中。
AddItem方法
name指名称 fn指点击时出发的函数 img 指图片
this.AddItem = function (name,fn,img){
this.MenuContent[this.MenuContent.length] = [name , fn , img];
}
AddLine方法
this.AddLine = function (){
this.MenuContent[this.MenuContent.length] = "line";
}

3、初始化
创建一个div，并将这个div添加到body中。根据this.MenuContent中的每一项，判断是添加项还是线。最后将div的位置设置为鼠标右键点击的位置。

4、最后，设置一个全局状态属性rightMenuStatus，判断是创建了RightMenu函数（或叫类）的对象。

<!DOCTYPE html> <html> <head> <title>自定义右键菜单---www.cnblogs.com/kuikui</title> <style type="text/css"> td, body{font-size: 12px;} </style> <script type="text/javascript"> function RightMenu() { if (window.rightMenuStatus) return; window.rightMenuStatus = true; this.backgroundColor = "#d4d0c8"; this.borderTop = "1px solid #fff"; this.borderLeft = "1px solid #fff"; this.borderBottom = "1px solid #969696"; this.borderRight = "1px solid #969696"; this.MenuContent = []; this.AddItem = function (name, fn, img) { this.MenuContent[this.MenuContent.length] = [name, fn, img]; } this.AddLine = function () { this.MenuContent[this.MenuContent.length] = "line"; } this.Init = function () { var div = document.createElement("div"); with (div.style) { position = "absolute"; left = top = "0px"; width = "150px"; lineHeight = "20px"; backgroundColor = this.backgroundColor; borderTop = this.borderTop; borderLeft = this.borderLeft; borderBottom = this.borderBottom; borderRight = this.borderRight; cursor = "default"; zIndex = 2000; } document.body.appendChild(div); var s = ""; for (var i = 0; i < this.MenuContent.length; i++) { if (this.MenuContent[i] == "line") { s += "<div style=\"height:0px;line-height:0px;overflow:hidden;border-top:1px solid #888;border-bottom:1px solid #fff;\"></div>"; } else { if (this.MenuContent[i][2]) { s += "<div style=\"width:100%;\" onclick=\"" + this.MenuContent[i][1] + "\" onmouseover=\"style.background=\'#0a246a\';style.color=\'#fff\';\" onmouseout=\"style.background=\'\';style.color=\'\';\"> <img alt=\"\" src=\"" + this.MenuContent[i][2] + "\" />" + this.MenuContent[i][0] + "</div>"; } s += "<div style=\"width:100%;\" onclick=\"" + this.MenuContent[i][1] + "\" onmouseover=\"style.background=\'#0a246a\';style.color=\'#fff\';\" onmouseout=\"style.background=\'\';style.color=\'\';\"> " + this.MenuContent[i][0] + "</div>"; } div.innerHTML = s; div.oW = div.offsetWidth; div.oH = div.offsetHeight; div.style.display = "none"; document.oncontextmenu = function (event) { event = event || window.event; var nx = document.body.scrollLeft + event.clientX; var ny = document.body.scrollTop + event.clientY; if (event.clientX + div.oW + 20 > document.body.offsetWidth) { nx = nx - div.oW; } if (event.clientY + div.oH + 20 > document.body.offsetHeight) { ny = ny - div.oH; } div.style.left = nx; div.style.top = ny; div.style.display = "block"; this.onclick = function () { setTimeout(function () { div.style.display = "none"; }, 100); this.onclick = null; } return false; } } } } </script> </head> <body> <script type="text/javascript"> var rm = new RightMenu(); rm.AddItem("项目1", "alert(1)"); rm.AddItem("项目2", "alert(2)", "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_aa.jpg"); rm.AddItem("项目3", "alert(3)"); rm.AddItem("项目4", "alert(4)"); rm.AddLine(); rm.AddItem("项目5", "alert(5)", "http://images.cnblogs.com/cnblogs_com/kuikui/354173/t_aa.jpg"); rm.AddItem("项目6", "alert(6)"); rm.AddItem("项目7", "alert(7)"); rm.Init(); </script> </body> </html>

运行代码

转载于:https://www.cnblogs.com/kuikui/archive/2012/02/13/2349529.html