Javascript实现的简单右键菜单类

本文实例讲述了Javascript实现的简单右键菜单类。分享给大家供大家参考。具体如下:

这是自己写的一个右键菜单类,屏蔽掉了IE固有的右键菜单,一共有四个参数:第一个是出发显示右键菜单的div的id

第二个是右键菜单这个层的id,根据这个id去创建一个新的层,menuList是菜单项的列表,对应了点击一个菜单项后触发的函数,classList是菜单的class名称,以及菜单项对应的class名称,包含了鼠标滑过时的class。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-right-button-menu-class-codes/

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>右键菜单</title>

<style type="text/css">

.cmenu

{

position:absolute;

top:100px;

left:100px;

width:200px;

height:200px;

background-color:white;

border:1px solid pink;

}

.liAble

{

font-family:"宋体";

color:#6699CC;

margin-left:10px;

margin-top:5px;

list-style-type:none;

cursor:default;

}

.liMouseOver

{

margin-left:10px;

margin-top:5px;

background-color:#CCFFFF;

list-style-type:none;

cursor:default;

}

</style>

</head>

<body>

<div style="margin-left:auto; margin-right:auto; height:300px; width:60%;background-color:#CC6699" id="x">

</div>

<input type="hidden" id="value1" value="4" />

<input type="hidden" id="value2" value="5" />

<script type="text/javascript">

//右键菜单类

function RightHandMenu(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("edit");

}

function Delete()

{

alert("delete");

}

var menuList =

{

编辑:Edit,

删除:Delete

}

var classList =

{

MenuClass:'cmenu',

liAbleClass:'liAble',

liMouseOverClass:'liMouseOver'

}

var x = new RightHandMenu("x","testDiv",menuList,classList)

</script>

</body>

</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

以上是 Javascript实现的简单右键菜单类 的全部内容, 来源链接: utcz.com/z/325713.html

回到顶部