zoukankan      html  css  js  c++  java
  • Javascript右键菜单类

    代码简介:

    这是自己写的一个右键菜单类,屏蔽掉了IE固有的右键菜单,一共有四个参数:第一个是出发显示右键菜单的div的id   第二个是右键菜单这个层的id,根据这个id去创建一个新的层,menuList是菜单项的列表,对应了点击一个菜单项后触发的函数,classList是菜单的class名称,以及菜单项对应的class名称,包含了鼠标滑过时的class。

    代码内容:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <title>Javascript右键菜单类_网页代码站(www.webdm.cn)</title>
    <style type="text/css">
    .cmenu
    {
    	position:absolute;
    	top:100px;
    	left:100px;
    	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; 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>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/42f19ed3-e89b-490b-a781-10e440c812b3.html

  • 相关阅读:
    @Autowired 与@Resource的区别(详细)
    mvn clean compile package install deploy
    Android Studio 之 NDK篇
    cmake处理多源文件目录的方法
    linux CMakeLists.txt 语法
    在 Android Studio 2.2 中愉快地使用 C/C++
    MySql 模糊查询
    C++静态库与动态库详解
    配置Yum源repo文件及搭建本地Yum服务器
    yum命令
  • 原文地址:https://www.cnblogs.com/webdm/p/2063014.html
Copyright © 2011-2022 走看看