`
klinmy
  • 浏览: 11717 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

简单适用的JS右键菜单

jQueryEXTCSSJavaScriptHTML 
阅读更多



 右键菜单网上大把，有些很复杂，功能也很丰富，看了半天也看不懂，哎，我们这种菜鸟也只适合几十行的代码了，所以就写了个几十行的代码，原则就是：简单适用，别人一看就懂，至少思路很简单。。

 

 

说明：样式和菜单的组织格式是参考ExtJS的。

一个简单的Jquery插件形式的。

(function(jQuery) {
	// ContextMenu插件
	jQuery.contextMenu = function(container, configData) {
		// 默认情况下使用document.body作为容器
		if(!container) container = document.body;
		
		var $container = jQuery(container);
		var IMAGE_PATH = configData.imagePath || "";// 图标文件的路径
		// 菜单的 html element ID
		var menuId = getRandomId();
	
		configData.menuItems = configData.menuItems || []; 
		/** menuItems 中的数据组装格式
		  	menuItems:[{code: 'new', text: '新增', image:'addStep.gif', click:"doAdd();"},
					 {code: 'edit', text: '编辑', image:'delItem.gif', click:"toEdit();"},
					 {code: 'delete', text: '删除', click:"doDelete();", tag:''}, 
					 {text:'-'},
					 {code: 'view', text: '查看', click:"toView();"}]
		 */
		var htmlContent = buildMenuHtml(configData.menuItems, menuId);
		$container.append(htmlContent);
		
		var $menuObject = jQuery('#' + menuId);	// 缓存菜单的DIV对象
		// 处理移入移出的效果事件 
		var $menuItems = jQuery("#" + menuId + " .x-menu-list-item");
		$menuItems.mouseover(function(){
			jQuery(this).addClass("x-menu-item-active");
		});
		
		$menuItems.mouseout(function(){
			jQuery(this).removeClass("x-menu-item-active");
		});
	
		$container.bind('contextmenu', function(e) {
			var posX = e.pageX;
			var posY = e.pageY;
			
			if (jQuery(window).width() < posX + $menuObject.width()) posX -= $menuObject.width();
			if (jQuery(window).height() < posY + $menuObject.height()) posY -= $menuObject.height();
			// 如果有前置函数，执行前置函数，根据返回值判断是否需要做一些动作
			if(!!configData.preFunction && jQuery.isFunction(configData.preFunction)){
				if(!configData.preFunction(e, $menuItems)){// 如果返回false 表示不继续弹出菜单
					e.preventDefault();
					return false;
				}
			}
			// 设置弹出菜单的位置，并弹出菜单
			$menuObject.css(
				{'left':posX,'top':posY}
			).show();
			e.preventDefault();
			return false;
		});
		
		jQuery(document).bind('mouseup', function(){
			$menuObject.hide();
		});
		jQuery(window).bind('blur', function(){
			$menuObject.hide();
		});
		
		// 生成随机数
		function getRandomId(){
			return (Math.random() + "").replace(".", "");
		}
		
		// 根据菜单数据的数组生成HTML
		function buildMenuHtml(_menuItems, _menuId){

			var htmlContent = "<div id='"+ _menuId +"' class='x-menu'><ul class='x-menu-list''>";
			for(var i = 0; i < _menuItems.length; i++){
				var _menu = _menuItems[i] || {};
				//{code: '', text: '', image:'', click:function(){}, tag:''}
				_menu.id = _menu.id || "MI_" + getRandomId();
				_menu.code = _menu.code || "";
				_menu.text = _menu.text || "未命名";
				_menu.image = IMAGE_PATH + (_menu.image || "s.gif");
				_menu.tag = _menu.tag || "";
				_menu.click = _menu.click || "javascipt:void(0);";
				
				if(_menu.text == "-"){// 分割条
					htmlContent += "<li class='x-menu-sep-li'><span class='x-menu-sep'>&nbsp;</span></li>";
					continue;
				}
				
				/** 菜单节点的模版，参与ExtJS
				 * <li class="x-menu-list-item" id="ext-gen67">
				 * <a href="#" class="x-menu-item" id="ext-gen68">
			     * <img class="x-menu-item-icon " src="images/addStep.gif">添加零件</a>
				 * </li>
				 */
				htmlContent += "<li class='x-menu-list-item' id='" + _menu.id + "' code='"+ _menu.code +"'>" +
								"<a href='#' class='x-menu-item' id='A"+ _menu.id +"' onclick='" + _menu.click + "'>" +
								"<img class='x-menu-item-icon' src='" + _menu.image + "'>" + _menu.text +
								"</a></li>";	
			}
			
			htmlContent += "</ul></div>";
			return htmlContent;
		}
		
	};
	
	// 形成插件
	jQuery.fn.contextMenu = function(configData){
		// 设置默认的窗口为body
		this.each(function(){
			new jQuery.contextMenu(this, configData);
		});
		return this;
	};
	
})(jQuery);

 

 

 

用法也如下：

	jQuery(function(){
		
				
		// 右键菜单的配置数据
		var configData = {
			imagePath: 'images/',
			menuItems:[{code: 'new', text: '新增', image:'addStep.gif', click:"doAdd();", tag:''},
					 {code: 'edit', text: '编辑', image:'delItem.gif', click:"toEdit();", tag:''},
					 {code: 'delete', text: '删除', click:"doDelete();", tag:''}, 
					 {text:'-'},
					 {code: 'view', text: '查看', click:"toView();"}],
			preFunction:function(e, $menuItems){
				// 隐藏delete菜单项
				for(var i = 0; i < $menuItems.length; i++){
					var $item = jQuery($menuItems[i]);
					if($item.attr("code") == "delete"){
						$item.hide();
					}
				}
				return true;
			}
		};
		//jQuery.contextMenu("#elem", configData);
		//jQuery.contextMenu(null, configData);
		//jQuery(document.body).contextMenu(configData);
		jQuery("#elem").contextMenu(configData);
		
	});

 

================================================================

 

懒得传附件了，全部代码如下，图片为ExtJS的：

<html><head>
    <title>Form UI</title>
    <link type="text/css" rel="stylesheet" href="css/formstyle.css">
    <script type="text/javascript" src="javascripts/jquery-1.4.2.js" charset="gb2312"></script>

<style type="text/css">    

*{
	font-size:12px;
	color:#000;
	    margin: 0;
    padding: 0;
}

body {
    font-family:helvetica,tahoma,verdana,sans-serif;padding:20px;padding-top:32px;font-size:12px;background-color:#fff !important;
}

ol, ul {
    list-style: none outside none;
}

#rightMenu {
    left: 460px;
    position: absolute;
    top: 59px;
    visibility: visible;
    z-index: 15000;
}
.x-menu {
    background: url("images/menu.gif") repeat-y scroll 0 0 #F0F0F0;
    border: 1px solid #718BB7;
    padding: 2px;display:none;
    position: absolute;
    z-index: 15000;
}

.x-menu-list {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
}

.x-menu li {
    line-height: 100%;
}

.x-menu-list-item {
    -moz-user-select: none;
    display: block;
    font: 11px tahoma,arial,sans-serif;
    padding: 1px;
    white-space: nowrap;
}

.x-menu a.x-menu-item {
    color: #222222;
    cursor: pointer;
    display: block;
    line-height: 16px;
    outline: 0 none;
    padding: 3px 21px 3px 3px;
    text-decoration: none;
    white-space: nowrap;
}

.x-menu a {
    text-decoration: none !important;
}

a:link {
    color: #000000;
    font-size: 12px;
    line-height: 20px;
    text-decoration: none;
}

.x-menu-item-icon {
    background-position: center center;
    border: 0 none;
    height: 16px;
    margin: 0 8px 0 0;
    padding: 0;
    vertical-align: top;
    width: 16px;
}

.x-menu-sep {
    background-color: #E0E0E0;
    border-bottom: 1px solid #FFFFFF;
    display: block;
    font-size: 1px;
    line-height: 1px;
    margin: 2px 3px;
    overflow: hidden;
}

.x-menu li.x-menu-sep-li {
    font-size: 1px;
    line-height: 1px;
}

.x-menu-item-active {
    background: url("images/item-over.gif") repeat-x scroll left bottom #EBF3FD;
    border: 1px solid #AACCF6;
    padding: 0;
}
.x-menu-item-active a.x-menu-item {
    color: #233D6D;
}

</style>
</head><body>
<h1>RightMenu 展示</h1>

<!--
<div id="rightMenu" class="x-layer x-menu" id="ext-gen59">
<ul class="x-menu-list" id="ext-gen63">
<li class="x-menu-list-item" id="ext-gen67">
<a href="#" class="x-menu-item" id="ext-gen68">
<img class="x-menu-item-icon " src="images/addStep.gif">添加零件</a>
</li>
<li class="x-menu-list-item " id="ext-gen69">
<a href="#" class="x-menu-item" id="ext-gen70">
<img class="x-menu-item-icon " src="images/s.gif">修改零件</a>
</li>
<li class="x-menu-list-item " id="ext-gen71">
<a href="#" class="x-menu-item" id="ext-gen72">
<img class="x-menu-item-icon " src="images/delItem.gif" id="ext-gen81">删除零件</a>
</li>
<li class="x-menu-list-item " id="ext-gen73">
<a href="#" class="x-menu-item" id="ext-gen74">
<img class="x-menu-item-icon " src="images/s.gif">添加附件</a>
</li>
<li class="x-menu-sep-li" id="ext-gen75">
<span class="x-menu-sep" id="ext-gen76">&nbsp;</span>
</li>
<li class="x-menu-list-item " id="ext-gen77">
<a href="#" class="x-menu-item" id="ext-gen78">
<img class="x-menu-item-icon " src="images/s.gif" id="ext-gen83">查看零件</a>
</li>
</ul>
</div>
-->
<input type="button" value="隐藏部分" />

<div id="elem" style="height:500;width:800; background-color:#0d0d0d;"></div>


<script>
	jQuery(function(){
		
		/*
		$liList = jQuery("#rightMenu ul li.x-menu-list-item");
		//alert($liList.length);
		$liList.mouseover(function(){
			jQuery(this).addClass("x-menu-item-active");
		});
		
		$liList.mouseout(function(){
			jQuery(this).removeClass("x-menu-item-active");
		});
		*/
		
		// 右键菜单的配置数据
		var configData = {
			imagePath: 'images/',
			menuItems:[{code: 'new', text: '新增', image:'addStep.gif', click:"doAdd();", tag:''},
					 {code: 'edit', text: '编辑', image:'delItem.gif', click:"toEdit();", tag:''},
					 {code: 'delete', text: '删除', click:"doDelete();", tag:''}, 
					 {text:'-'},
					 {code: 'view', text: '查看', click:"toView();"}],
			preFunction:function(e, $menuItems){
				// 隐藏delete菜单项
				for(var i = 0; i < $menuItems.length; i++){
					var $item = jQuery($menuItems[i]);
					if($item.attr("code") == "delete"){
						$item.hide();
					}
				}
				return true;
			}
		};
		//jQuery.contextMenu("#elem", configData);
		//jQuery.contextMenu(null, configData);
		//jQuery(document.body).contextMenu(configData);
		jQuery("#elem").contextMenu(configData);
		
	});
	

(function(jQuery) {
	// ContextMenu插件
	jQuery.contextMenu = function(container, configData) {
		// 默认情况下使用document.body作为容器
		if(!container) container = document.body;
		
		var $container = jQuery(container);
		var IMAGE_PATH = configData.imagePath || "";// 图标文件的路径
		// 菜单的 html element ID
		var menuId = getRandomId();
	
		configData.menuItems = configData.menuItems || []; 
		/** menuItems 中的数据组装格式
		  	menuItems:[{code: 'new', text: '新增', image:'addStep.gif', click:"doAdd();"},
					 {code: 'edit', text: '编辑', image:'delItem.gif', click:"toEdit();"},
					 {code: 'delete', text: '删除', click:"doDelete();", tag:''}, 
					 {text:'-'},
					 {code: 'view', text: '查看', click:"toView();"}]
		 */
		var htmlContent = buildMenuHtml(configData.menuItems, menuId);
		$container.append(htmlContent);
		
		var $menuObject = jQuery('#' + menuId);	// 缓存菜单的DIV对象
		// 处理移入移出的效果事件 
		var $menuItems = jQuery("#" + menuId + " .x-menu-list-item");
		$menuItems.mouseover(function(){
			jQuery(this).addClass("x-menu-item-active");
		});
		
		$menuItems.mouseout(function(){
			jQuery(this).removeClass("x-menu-item-active");
		});
	
		$container.bind('contextmenu', function(e) {
			var posX = e.pageX;
			var posY = e.pageY;
			
			if (jQuery(window).width() < posX + $menuObject.width()) posX -= $menuObject.width();
			if (jQuery(window).height() < posY + $menuObject.height()) posY -= $menuObject.height();
			// 如果有前置函数，执行前置函数，根据返回值判断是否需要做一些动作
			if(!!configData.preFunction && jQuery.isFunction(configData.preFunction)){
				if(!configData.preFunction(e, $menuItems)){// 如果返回false 表示不继续弹出菜单
					e.preventDefault();
					return false;
				}
			}
			// 设置弹出菜单的位置，并弹出菜单
			$menuObject.css(
				{'left':posX,'top':posY}
			).show();
			e.preventDefault();
			return false;
		});
		
		jQuery(document).bind('mouseup', function(){
			$menuObject.hide();
		});
		jQuery(window).bind('blur', function(){
			$menuObject.hide();
		});
		
		// 生成随机数
		function getRandomId(){
			return (Math.random() + "").replace(".", "");
		}
		
		// 根据菜单数据的数组生成HTML
		function buildMenuHtml(_menuItems, _menuId){

			var htmlContent = "<div id='"+ _menuId +"' class='x-menu'><ul class='x-menu-list''>";
			for(var i = 0; i < _menuItems.length; i++){
				var _menu = _menuItems[i] || {};
				//{code: '', text: '', image:'', click:function(){}, tag:''}
				_menu.id = _menu.id || "MI_" + getRandomId();
				_menu.code = _menu.code || "";
				_menu.text = _menu.text || "未命名";
				_menu.image = IMAGE_PATH + (_menu.image || "s.gif");
				_menu.tag = _menu.tag || "";
				_menu.click = _menu.click || "javascipt:void(0);";
				
				if(_menu.text == "-"){// 分割条
					htmlContent += "<li class='x-menu-sep-li'><span class='x-menu-sep'>&nbsp;</span></li>";
					continue;
				}
				
				/** 菜单节点的模版，参与ExtJS
				 * <li class="x-menu-list-item" id="ext-gen67">
				 * <a href="#" class="x-menu-item" id="ext-gen68">
			     * <img class="x-menu-item-icon " src="images/addStep.gif">添加零件</a>
				 * </li>
				 */
				htmlContent += "<li class='x-menu-list-item' id='" + _menu.id + "' code='"+ _menu.code +"'>" +
								"<a href='#' class='x-menu-item' id='A"+ _menu.id +"' onclick='" + _menu.click + "'>" +
								"<img class='x-menu-item-icon' src='" + _menu.image + "'>" + _menu.text +
								"</a></li>";	
			}
			
			htmlContent += "</ul></div>";
			return htmlContent;
		}
		
	};
	
	// 形成插件
	jQuery.fn.contextMenu = function(configData){
		// 设置默认的窗口为body
		this.each(function(){
			new jQuery.contextMenu(this, configData);
		});
		return this;
	};
	
})(jQuery);
	
	
	

</script>

</body></html>

 

 

 

 

  • 大小: 3.3 KB
分享到：
| Flex4 画线，把直线打折
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS设置鼠标右键菜单

    本文将深入探讨如何利用JavaScript实现自定义鼠标右键菜单的功能。 首先，我们需要理解浏览器的默认行为。当用户在网页上点击鼠标右键时，通常会弹出一个包含基本浏览器操作（如"查看源代码"、"保存页面"等）的标准...

    基于Bootstrap外观的JavaScript右键菜单插件

    这次我们要分享的也是一款JavaScript右键菜单插件，它的外观是基于Bootstrap的，因此UI比之前那款要漂亮许多，另外这款右键菜单插件也支持自定义区域菜单显示功能，你可以在初始化的时候指定需要弹出菜单的网页区域...

    iframe里无右键菜单

    标题"iframe里无右键菜单"正是针对这一需求，描述中提到的解决方案是创建一个既简单又实用的方法来实现这一功能。 `contextmenu`是HTML5中的一个事件，它与右键菜单相关。当用户在页面上执行右键点击时，浏览器会...

    右键菜单(javaScript)

    在标签“右键菜单”中，我们可以推测这个压缩包可能包含一个简单的示例或者教程，用于展示如何用JavaScript实现这样的功能。文件名“右键菜单.html”表明这可能是一个HTML文件，其中包含了JavaScript代码来实现右键...

    HTML+javaScript右键菜单

    在HTML+JavaScript右键菜单的实现中，JSP可能被用作后端服务，处理与菜单相关的数据请求或逻辑，例如根据用户状态或权限动态生成菜单项。 实现步骤如下： 1. 创建HTML结构：在HTML文件中，定义一个用于存放菜单的...

    禁止鼠标右键及svg中自定义右键菜单

    总结起来，禁止鼠标右键和在SVG中自定义右键菜单涉及到JavaScript事件处理和DOM操作。通过监听`contextmenu`事件并调用`preventDefault()`方法，可以阻止浏览器的默认右键菜单。而在SVG中，我们可以结合CSS和...

    JS自定义右键菜单

    在JavaScript（JS）中，自定义右键菜单是一项常见的需求，尤其在网页开发中，它能够为用户提供更个性化的交互体验。本教程将详细介绍如何利用JS实现一个通用且最多支持两级菜单的自定义右键菜单小控件。 首先，我们...

    一个非常简洁高效的JS右键菜单

    ### 知识点详解：创建一个简洁高效的JavaScript右键菜单 #### 一、理解JavaScript右键菜单的概念 右键菜单，或称为上下文菜单，是在用户界面设计中常见的一种交互方式，通过鼠标右键点击来展示一系列选项或操作。...

    基于jquery的网页右键菜单设置，js多级菜单

    "js多级菜单设置"是指在右键菜单中嵌套子菜单，形成层次结构。例如，一级菜单可以是“编辑”、“查看”，二级菜单则可能是“复制”、“粘贴”等。这样的设计使得用户能更快地找到和执行所需的功能，同时保持界面整洁...

    右键菜单需要用到js

    本话题主要关注如何利用JavaScript（js）实现右键菜单功能。JavaScript是一种广泛应用于Web开发的编程语言，它可以为网页增加动态功能和交互性。在创建右键菜单时，JavaScript允许我们监听鼠标事件，特别是鼠标右键...

    JQuery简单右键菜单

    本文将深入探讨如何使用jQuery来创建一个简单的右键菜单，这在许多网页应用中是一个常见的需求。 一、jQuery基础 在开始创建右键菜单之前，我们需要了解jQuery的基本用法。jQuery通过选择器选取DOM元素，然后对这些...

    echarts组织结构图及自定义右键菜单

    以下是一个简单的示例代码片段，展示了如何实现自定义右键菜单： ```javascript // 初始化ECharts实例 var myChart = echarts.init(document.getElementById('main')); // 配置项和数据 var option = { // ... ...

    Vue20右键菜单组件菜单内容可以随意自定义

    在这个项目中，我们讨论的是一个Vue 2.0的右键菜单组件，允许开发者自定义菜单内容，从而更好地满足各种应用场景的需求。 首先，右键菜单是一种常见的交互元素，通常用于提供用户在特定上下文中的操作选项。在Web...

    网页添加右键菜单网页添加右键菜单

    为了创建更复杂的自定义菜单，我们可以使用JavaScript来创建DOM元素，模拟出类似浏览器右键菜单的效果。这些元素通常会以弹出框或者下拉菜单的形式出现，用户可以选择其中的项来执行相应的操作。例如，我们可以创建...

    【JavaScript源代码】Vue+element-ui添加自定义右键菜单的方法示例.docx

    本文将详细介绍如何在基于Vue.js框架的项目中结合Element UI库，实现一个简单的自定义右键菜单功能。通过以下步骤，您将了解到从创建绑定事件到菜单显示及样式的全过程。 #### 二、绑定右键菜单事件 1. **使用`...

    Jquery右键菜单插件ContextJS

    **jQuery右键菜单插件ContextJS...总之，`ContextJS`为jQuery开发者提供了一种简单而强大的方式来创建和管理右键菜单。通过合理利用其提供的API，你可以轻松地定制出符合项目需求的交互体验，提升用户的使用满意度。

    JavaScript右键菜单

    ### JavaScript右键菜单知识点解析 #### 一、项目概述 本项目主要介绍了一种通过JavaScript实现的右键菜单功能，该功能旨在为用户提供一个便捷、实用的上下文菜单选项。菜单项包括创建、修改和删除等功能，用户可以...

    jQuery实现右键菜单源码

    这个例子展示了如何使用jQuery创建一个简单的右键菜单，当用户在指定的`#content`元素上右键点击时，会显示一个包含三个菜单项的菜单。当用户点击菜单项时，会弹出提示框显示所选内容，而当用户在页面其他地方点击时...

    【JavaScript源代码】vue添加自定义右键菜单的完整实例.docx

    例如，`vue-context-menu`是一个方便的Vue插件，允许你更简单地创建和管理右键菜单。安装它： ```bash npm install vue-contextmenu --save ``` 然后在你的应用中引入并使用它： ```javascript import ...

    Javascript右键创建菜单源码

    通过这个简单的示例，我们可以了解到JavaScript处理右键菜单的基本原理。在实际项目中，你可以根据需求扩展这个功能，比如添加更多的菜单项、处理菜单项的回调函数，甚至动态生成菜单结构。希望这个源码能帮助你更好...

Magicbox
Global site tag (gtag.js) - Google Analytics