jQuery右键菜单contextMenu使用实例
在下面我们将设计一个场景，表格grid需要在每行实现鼠标右键，增加，删除，保存操作。grid我就用gridview了，随便用微软提供的样式，测试用例不用搞的多好看嘛，我也不是做美工了，哈哈，偷偷懒。
先上效果图，是有些同志说的有图才有真相嘛： 
ui代码：
代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 runat="server">
<title></title>
<%-- --%>
<script src="Script/jquery.js" type="text/javascript"></script>
<script src="Script/jquery.contextmenu.r2.js" type="text/javascript"></script>
<style type="text/css">
.SelectedRow
{
background: yellow;
}
.contextMenu
{
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$('#GridView1 tr:gt(0)').contextMenu('menu',
{
bindings:
{
'add': function(t, target) {
alert('Trigger：' + t.id + ' 增加' + " taget by:" + $("td:eq(0)", target).text());
},
'delete': function(t, target) {
alert('Trigger：' + t.id + ' 删除' + " taget by:" + $("td:eq(0)", target).text());
$(target).remove();
},
'save': function(t, target) {
alert('Trigger：' + t.id + ' 保存' + " taget by:" + $("td:eq(0)", target).text());
},
'About': function(t, target) {
alert('Code by http://www.cnblogs.com/whitewolf/');
}
},
onShowMenu: function(e, menu) {
if (parseInt($("td:eq(0)", e.currentTarget).text()) > 10) {
$("#save", menu).remove();
}
$(e.currentTarget).siblings().removeClass("SelectedRow").end().addClass("SelectedRow");
return menu;
}
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="contextMenu" id="menu">
<ul>
<li id="add">
<img src="image/Home_Age_UnSelect.jpg" width="16" height="16" />
编辑</li>
<li id="delete">
<img src="image/Home_Age_UnSelect.jpg" width="16" height="16" />
删除</li>
<li id="save">
<img src="image/Home_Age_UnSelect.jpg" width="16" height="16" />
保存</li>
<li id="About">
<img src="image/Home_Age_UnSelect.jpg" width="16" height="16" />
关于</li>
</ul>
</div>
<asp:GridView ID="GridView1" runat="server" Width="100%" BackColor="White" BorderColor="#CCCCCC"
BorderStyle="None" BorderWidth="1px" CellPadding="3">
<RowStyle ForeColor="#000066" />
<FooterStyle BackColor="White" ForeColor="#000066" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
</asp:GridView>
</div>
</form>
</body>
</html>
注：
1：contextMenu我们互根据数据记录隐藏一些菜单项，这个可以在onShowMenu事件中，根据
e.currentTarget触发源获取数据，在根据remove菜单项。比如测试用例中的：如果id>10则不允许保存
if (parseInt($("td:eq(0)", e.currentTarget).text()) > 10) {
$("#save", menu).remove();
}
2:事件注册：根据第二个参数target获取数据，第一个参数t获取菜单项。比如：
代码如下:
'add': function(t, target) {
alert('Trigger：' + t.id + ' 增加' + " taget by:" + $("td:eq(0)", target).text());
},
在这里需要用到ajax和服务端通讯，可以采用我的上一篇组件：jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法，将会更简单应用ajax通讯。
在我下的源代码中这里有点问题：
原来的，这里的currentTarget始终为undefined。
代码如下:
if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu);
$.each(cur.bindings, function(id, func) {
$('#' + id, menu).bind('click', function(e) {
hide();
func(trigger, currentTarget);
});
});
if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu);
$.each(cur.bindings, function(id, func) {
$('#' + id, menu).bind('click', function(ev) {
hide();
func(trigger, e.currentTarget);
});
});
这样就一切正常了。
内容很少，一切就在此打断，结束 ，over！
附件下载：Demo
相关推荐
-
JS组件Bootstrap ContextMenu右键菜单使用方法
今天来总结下bootstrap的一个小组件的应用.好了,不说废话,进入正题吧. 一.ContextMenu介绍 一个需求:表格行调序,支持多选调序,并且可以不连续多选.什么意思呢?先来看看需要实现的效果图: 需求是:需要将选中的6.8.9行移动到第2行和第3行之间.撇开业务不说,单纯从技术层面来说,要想使用最少操作达到上述效果,博主想到了右键功能,如果能够在第2行或者第3行上面点击鼠标右键,通过右键菜单功能将选中的行移动到相应的位置,这样是不是最简单呢.说做咱就做,于是找组件,搜索"bootst
-
使用contextMenu插件实现Bootstrap table弹出右键菜单
如今Bootstrap这个前端框架已被许多人接受并应用在不同的项目中,其中"开发高效,设备兼容"的特点表现得非常明显.再加上它默认的美观的UI组件,简直就是很多前端的大爱啊!!! 今天在这里跟大家分享Bootstrap table弹出右键菜单的实现方法. 最近遇到有一个需求,需要在Bootstrap table上使用右键.网上搜了半天没有找到,最后发现Bootstrap table不支持右键(官方文档给出的答案 https://github.com/wenzhixin/bootstra
-
开发 Internet Explorer 右键功能表(ContextMenu)
参考 MSDN Library[Adding Entries to the Standard Context Menu]开发 ContextMenu 1. IE 额外的 ContextMenu 是透过註册机码 HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt 来建立 2. 所以只要在该位置下新增一个 Key 值,例如:新增[Make 0rz]则 IE 中按下右键就会出现相同名称的功能 3. 如果我们想要在该功能上可以使用
-
jquery插件ContextMenu设置右键菜单
Struts项目中右键菜单一般很少用到,但是一旦客户有要求,很多人就懵圈了,比如我.这个时候,当然要表现镇定,一面拍着胸口对客户承诺说绝对可以实现,一面赶紧打开百度神器,搜搜看是否有前人已经写好的插件. 于是便找到了jQuery的ContextMenu插件.上官网看看Demo,真不错,正是我要的效果.源码下下来,却没有说明文档告诉我们该如何组装,可能写这插件的牛人们觉得步骤太简单,写出来都觉得丢人.可苦了我们这等愚昧之徒,研究半天,总算从一堆代码中取其精华弃其糟粕,形成最简练的代码,以供初学者们
-
JQuery右键菜单插件ContextMenu使用指南
插件下载地址: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js 压缩版: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js Jquery主页: http://jquery.com/ 通过此插件可以在不同的html元素内建立contextmenu,并且可以自定义样式. 复制代码
-
网页中右键功能的实现方法之contextMenu的使用
本文介绍一种网页中实现右键功能的方案–contextMenu. 1.下载 下载地址 https://github.com/swisnl/jQuery-contextMenu 下载得到压缩文件jQuery-contextMenu-master.zip 解压后,使用dist目录下css.js. 2.使用方法 使用步骤: (1) 引用css.js. (2) html.js代码. 简单例子如下: 代码test.html: <!DOCTYPE html> <html lang="en&q
-
3种不同的ContextMenu右键菜单实现代码
简单使用的右键菜单,希望能帮助大家.下面是截图和实例代码 实例预览 <!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>
-
jQuery插件ContextMenu自定义图标
jQuery的ContextMenu插件使用起来非常简单(当前前提是看了我的上一篇微博,哈哈),但是想改菜单的图标,很多人又要懵圈了.因为ContextMenu插件只提供了有限的几个图标,如剪切.拷贝.删除等等. 修改图标的相关代码: $(function(){ $.contextMenu({ selector: '.context-menu-one', callback: function(key, options) { var m = "clicked: " + key; wind
-
jQuery右键菜单contextMenu使用实例
在下面我们将设计一个场景,表格grid需要在每行实现鼠标右键,增加,删除,保存操作.grid我就用gridview了,随便用微软提供的样式,测试用例不用搞的多好看嘛,我也不是做美工了,哈哈,偷偷懒. 先上效果图,是有些同志说的有图才有真相嘛: ui代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits=
-
vue添加自定义右键菜单的完整实例
一.写原生方法 1.在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: <li v-for="item in resourceList" :key="item.id" @click="handleClickFolder(item)" @contextmenu.prevent="openMenu($event,item)" > ... </li> 2.在页面编写右键菜单内容:
-
jQuery 无限级菜单的简单实例
我将CSS完全分离出来用jQuery附加式样,就是为了多级染色,并且生成目录树和控制式样也很容易,生成时也不需要考虑式样.数据表建议用事先Order排序的方式,不要读取数据的时候才分级排序,这样性能会较佳. 我把它做成了个.Net的控件,作为轻量级的无限目录树,还是相当好用的.只是还不完善,我先慢慢修改,等差不多了再发布出来. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu
-
jquery树形菜单效果的简单实例
<!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-
-
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind("contextmenu", function(e){ return false; }); }); 效果图: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE H
-
jQuery EasyUI右键菜单实现关闭标签/选项卡
本文实例为大家分享了jQuery EasyUI右键菜单可以选择关闭标签/选项卡操作,供大家参考,具体内容如下 目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind("contextmenu", function(e){ return false; }); }); 效果图: 方式一: <%@ page language="java" import="java.uti
-
jquery实现在网页指定区域显示自定义右键菜单效果
本文实例讲述了jquery实现在网页指定区域显示自定义右键菜单效果.分享给大家供大家参考.具体如下: 这是一个jquery实现的网页右键菜单效果,与其它自定义的右键菜单不同之处在于,本菜单只在指定区域内才有效,若超出指定区域的话,点击右键后显示的仍是浏览器的右键菜单.运行效果后,请在橘色区域内点击鼠标右键,会弹出一个带图标的自定义右键菜单,和浏览器的右键菜单完全不一样哦! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-ar
-
jQuery实现自定义右键菜单的树状菜单效果
本文实例讲述了jQuery实现自定义右键菜单的树状菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery的自定义右键菜单,在树状结构的子节点(下级没有节点)上单击右键才会弹出自定义菜单,而且菜单是自动根据鼠标位置来定位的.当鼠标在菜单以外的任意空白处单击一下后会自动消失.这里想特别说明一点所谓的"菜单以外",可以有两种解剖方式--1.除了鼠标在菜单区域内的所有位置:2.如下图所示的A.B.C.D四个区域.显然用第一种方法来剖析会更简单直接一点.源码中的!IsInArea就