点击这里体验效果

如果要屏蔽页面原来的右键菜单，请设置disable_native_context_menu:true

以下是源代码：

 <!DOCTYPE html>

 <html>

 <head>

 <title>jQuery右键菜单，上下文菜单-柯乐义</title>

 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.8.2.min.js"

 charset="utf-8"></script>

 <style type="text/css" media="screen">

 html, body

 {

 height: 100%;

 }

 body

 {

 font-family: 'lucida grande' , tahoma, verdana;

 font-size: 15px;

 color: #555;

 width: 700px;

 margin: 0 auto;

 padding: 30px 0;

 }

 h1, h2

 {

 color: #222;

 }

 ul

 {

 list-style-type: none;

 list-style-position: inside;

 margin: 0;

 padding: 0;

 }

 /* all context menus have this class */

 .context-menu

 {

 -webkit-border-radius: 5px;

 -moz-border-radius: 5px;

 border-radius: 5px;

 background-color: #f2f2f2;

 border: 1px solid #999;

 list-style-type: none;

 margin: 0;

 padding: 0;

 }

 .context-menu a

 {

 display: block;

 padding: 3px;

 text-decoration: none;

 color: #333;

 }

 .context-menu a:hover

 {

 background-color: #666;

 color: white;

 }

 /* second context menu */

 #context-menu-2

 {

 border: 1px solid #333;

 background-color: orange;

 margin: 0;

 padding: 0;

 }

 .target1, .target2 li, .target3 li

 {

 background-color: #ddd;

 color: #333;

 border: 1px solid #c6c6c6;

 padding: 5px;

 }

 .target1

 {

 width: 130px;

 }

 .target2 li, .target3 li

 {

 margin-top: 5px;

 }

 .target1 li.green, .target2 li.green, .target3 li.green

 {

 background-color: green;

 color: #fff;

 }

 .big-font

 {

 font-size: 25px;

 }

 </style>

 </head>

 <body>

 <h1>

 jQuery右键菜单示例·柯乐义</h1>

 <h2>

 例 1</h2>

 <p>

 单个div的上下文菜单。 Note that the native context menu is disabled by passing {disable_native_context_menu:

 true} as the options hash and last argument of the plugin. The native context menu

 is enabled by default.

 </p>

 <div class="target1">

 右击我</div>

 <h2>

 例 2 - 使用鼠标左键点击</h2>

 <p>

 You can use the same syntax, but use any other selector to target multiple elements

 with the same context menu. Notice the leftClick: true which indicates that it should

 trigger on left click instead of right click.

 </p>

 <ul class="target2">

 <li>请左击我，右击没效果。</li>

 <li>请左击我，右击没效果。</li>

 <li>请左击我，右击没效果。</li>

 </ul>

 <a href ="http://keleyi.com/a/bjac/qjaheda1.htm" target="_blank">原文</a><br />

 <h2>

 例 3 - 突出当前点击项</h2>

 <p>

 You can use the showMenu and hideMenu options to highlight the current context menu

 target.

 </p>

 <ul class="target3">

 <li>右击我</li>

 <li>右击我</li>

 <li>右击我</li>

 </ul>

 <div>

 本插件的不足支出就是不支持jquery1.9以上版本。</div>

 <script src="http://keleyi.com/keleyi/phtml/jqplug/8/jquery.contextMenu.js" type="text/javascript" charset="utf-8"></script>

 <script type="text/javascript" charset="utf-8">

 $(document).ready(function () {

 //例1

 $('.target1').contextMenu('context-menu-1', {

 '右键菜单项1': {

 click: function (element) { // element is the jquery obj clicked on when context menu launched

 alert('点击了右键菜单项');

 },

 klass: "menu-item-1" // a custom css class for this menu item (usable for styling)

 },

 '右键菜单项2': {

 click: function (element) { alert('点击了第二项'); },

 klass: "second-menu-item"

 }, '返回首页': { click: function (element) { location.href = "http://keleyi.com"; } }

 });

 //例2

 $('.target2 li').contextMenu('context-menu-2', {

 '彩上绿色!': {

 click: function (element) { // element is the jquery obj clicked on when context menu launched

 element.addClass('green');

 },

 klass: "menu-item-1" // a custom css class for this menu item (usable for styling)

 },

 '变大!': {

 click: function (element) { element.addClass('big-font') },

 klass: "second-menu-item"

 }, '打开原文': { click: function (element) { window.open("http://keleyi.com/a/bjac/qjaheda1.htm"); } }

 }, { disable_native_context_menu: true, leftClick: true }

 );

 //例3

 $('.target3 li').contextMenu('context-menu-2', {

 '变大!': {

 click: function (element) { element.addClass('big-font') },

 klass: "menu-item-1" // a custom css class for this menu item (usable for styling)

 }

 }, {

 disable_native_context_menu: true,

 showMenu: function (element) { element.addClass('green'); },

 hideMenu: function (element) { element.removeClass('green'); }

 });

 });

 </script>

 </body>

 </html>

转载自：http://keleyi.com/a/bjac/qjaheda1.htm

http://www.cnblogs.com/jihua/p/webfront.html

jquery右键菜单的更多相关文章

  1. 几款jQuery右键菜单插件介绍

    在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...

  2. jQuery右键菜单contextMenu使用实例

    在最近项目中需要频繁的右键菜单操作.我采用了contextMenu这款jQuery插件. 参考网址:http://www.jb51.net/article/58709.htm 官网demo http: ...

  3. Jquery 右键菜单(ContextMenu)插件使用记录

    目前做的项目需要在页面里面用右键菜单,在网上找到两种jquery的右键菜单插件,但是都有各种问题.所以就自己动手把两种插件结合了下. 修改后的右键菜单插架可以根据绑定的触发页面元素不同,复用同一个菜单 ...

  4. js jQuery 右键菜单 清屏

    主要用到了oncontextmenu事件,在oncontextmenu事件中使用return false 屏蔽掉原生右键菜单,再使用event获取鼠标的坐标位置,设置自定义菜单的位置. http:// ...

  5. jQuery右键菜单contextMenu实例

    URL: http://www.cnblogs.com/whitewolf/archive/2011/09/28/2194795.html http://www.blogjava.net/superc ...

  6. js(jquery)右键菜单插件的实现

    今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能.也就是在网页点击鼠标右键的时候不是弹出系统的菜单而是我们制定的内容.这样可以拓展右键的功能.实现过程不多说了,写出来的代码和效果如下: js部分: ...

  7. jQuery右键菜单ContextMenu使用笔记

    插件下载地址:http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js 和http://ww ...

  8. 几款jQuery右键菜单插件

    1.jQuery Very Simple ContextMenu Plugin 2.ContextJS Project Page:http://lab.jakiestfu.com/contextjs/ ...

  9. JQuery之ContextMenu(右键菜单)

    插件下载地址:http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js压缩版:http://www.tre ...

随机推荐

  1. [转]关于typedef的用法总结

    不管实在C还是C++代码中,typedef这个词都不少见,当然出现频率较高的还是在C代码中.typedef与#define有些相似,但更多的是不同,特别是在一些复杂的用法上,就完全不同了,看了网上一些 ...

  2. jQuery插件：jqGrid引入及基本属性

    1. jqGrid下载 jqGrid下载地址: http://www.trirand.com/blog/ jqGrid Demo: http://www.guriddo.net/demo/guridd ...

  3. 数据访问模式：Identity Map（标识映射）模式

    1.Identity Map模式简介 Identity Map(标识映射)模式是通过将所有已加载对象放在一个映射中确保所有对象只被加载一次,并且在引用这些对象时使用该映射来查找对象.在处理数据并发访问 ...

  4. 打造自己的html5视频播放器

    前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓“打造自己的”,就是要自己重写video标签 ...

  5. Delaunay Triangulation in OpenCascade

    Delaunay Triangulation in OpenCascade eryar@163.com 摘要:本文简要介绍了Delaunay三角剖分的基础理论,并使用OpenCascade的三角剖分算 ...

  6. jQuery-easyui实现关闭全部tabs

    有时候当我们打开很多tabs选项卡时,要关闭它只能一个一个的进行关闭,显然太麻烦,这时可以在选项卡的最右边添加一个按钮 实现关闭全部. function openTab(text, url, icon ...

  7. lintcode最长回文子串(Manacher算法)

    题目来自lintcode, 链接:http://www.lintcode.com/zh-cn/problem/longest-palindromic-substring/ 最长回文子串 给出一个字符串 ...

  8. Html标签的语义化

    为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要.所谓标签语义化,就是指标签的含义. 为了更好的理解标签的语义化,先看下面这个例子: 1 <tab ...

  9. Hibernate学习之——Hibernate环境搭建

    之前在写关于安卓闹钟的教程,写了一半就没后一半了,其实自己也没做好,在校外实习,校内毕业实习又有任务,只能先放放了,等毕业实习结束之后,在继续安卓闹钟开发之旅,相信这个时间不会很久的.现在毕业实习用到 ...

  10. 1Z0-053 争议题目解析330

    1Z0-053 争议题目解析330 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 330.What will be the end result of this set of RM ...