当前位置 CSS模版园 >> 酷炫特效 >> 不错的js右键弹出菜单

不错的js右键弹出菜单

不错的js右键弹出菜单

<!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=utf-8" />
<title>网页特效 不错的js右键弹出菜单</title>
<style type="text/css">
	.rightmenu_net {
		position: absolute;
		top: 100px;
		left: 100px;
		width: 200px;
		height: 200px;
		background-color: white;
		border: 1px solid pink;
	}
	.rightmenu_net_2 {
		font-family: "宋体";
		color: #6699CC;
		margin-left: 10px;
		margin-top: 5px;
		list-style-type: none;
		cursor: default;
	}
	.rightmenu_net_3 {
		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:500px; width:60%;background-color: #008000" id="rightmenu"> </div>
<input type="hidden" id="value1" value="4" />
<input type="hidden" id="value2" value="5" />
<script type="text/javascript">
        //右键菜单类
        function menu_rightmenu(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: 'rightmenu_net',
            liAbleClass: 'rightmenu_net_2',
            liMouseOverClass: 'rightmenu_net_3'
        }
        var rightmenu = new menu_rightmenu("rightmenu", "testDiv", menuList, classList)
    </script>
</body>
</html>


声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-13-56.html

推荐模版

热门网站模版

猜您喜欢

热门网站模版

热门网站模版

评论

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)