菜鸟求教js弹出式菜单代码详解
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content=" " />
<meta name="description" content=" ！" />
<title> </title>
<style type="text/css">
.zzjs_net
{
position:absolute;
top:100px;
left:100px;
width:200px;
height:200px;
background-color:white;
border:1px solid pink;
}
.zzjs_net_2
{
font-family:"宋体";
color:#6699CC;
margin-left:10px;
margin-top:5px;
list-style-type:none;
cursor:default;
}
.zzjs_net_3
{
margin-left:10px;
margin-top:5px;
background-color:#CCFFFF;
list-style-type:none;
cursor:default;
}
</style>
</head>
<body>
<a href="http://www.zzjs.net/"> </a> <hr>
<div style="margin-left:auto; margin-right:auto; height:500px;background-color: #ffffff
" width:60%; id="www_zzjs_net">
</div>
<input type="hidden" id="value1" value="4" />
<input type="hidden" id="value2" value="5" />
<script type="text/javascript">
//右键菜单类
function menu_wwwzzjsnet(div, menuDiv, menuList, classList) {
var oThis = this;
this._menuList =
{
}
this._classList =
{
objClass: '',
MenuClass: '',
liAbleClass: '',
liMouseOverClass: ''
}
this.Init = function() {
this._obj = $(div);
this._obj.oncontextmenu = function(e) { oThis.ShowMenu(e) };
this._obj.className = this._classList.objClass;
document.onclick = function() { oThis.HiddenMenu() };
objToObj(this._classList, classList);
objToObj(this._menuList, menuList);
}
this.CreateMenu = function() {
if ($(menuDiv)) {
alert("该ID已被占用");
return;
}
this._menu = document.createElement("DIV");
this._menu.id = menuDiv;
this._menu.oncontextmenu = function(e) { stopBubble(e) };
this._menu.className = this._classList.MenuClass;
this._menu.style.display = "none";
document.body.appendChild(this._menu);
}
this.CreateMenuList = function() {
for (var pro in this._menuList) {
var li = document.createElement("LI");
li.innerHTML = pro;
this._menu.appendChild(li);
li.className = this._classList.liAbleClass;
li.onclick = this._menuList[pro];
li.onmouseover = function() { oThis.ChangeLiClass(this, oThis._classList.liMouseOverClass) }
li.onmouseout = function() { oThis.ChangeLiClass(this, oThis._classList.liAbleClass) }
}
}
this.ChangeLiClass = function(obj, name) {
obj.className = name
}
this.ShowMenu = function(e) {
var e = e || window.event;
stopBubble(e);
var offsetX = e.clientX;
var offsetY = e.clientY;
with (this._menu.style) {
display = "block";
top = offsetY + "px";
left = offsetX + "px";
}
}
this.HiddenMenu = function() {
this._menu.style.display = "none";
}
this.Init();
this.CreateMenu();
this.CreateMenuList();
}
function stopBubble(oEvent) {
if (oEvent.stopPropagation) oEvent.stopPropagation();
else oEvent.cancelBubble = true;
if (oEvent.preventDefault) oEvent.preventDefault();
else oEvent.returnValue = false;
}
function $(div) {
return 'string' == typeof div ? document.getElementById(div) : div;
}
function objToObj(destination, source) {
for (var pro in source) {
destination[pro] = source[pro];
}
return destination;
}
//构造右键菜单
function Edit() {
alert("您点击了编辑按钮");
}
function Delete() {
alert("您点击了删除按钮");
}
var menuList =
{
编辑: Edit,
删除: Delete
}
var classList =
{
MenuClass: 'zzjs_net',
liAbleClass: 'zzjs_net_2',
liMouseOverClass: 'zzjs_net_3'
}
var www_zzjs_net = new menu_wwwzzjsnet("www_zzjs_net", "testDiv", menuList, classList)
</script>
</body>
</html>
[解决办法]
主要是运行不了。。。
