点击这里体验效果

如果要屏蔽页面原来的右键菜单，请设置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. angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe

    angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...

  2. LINQ to Entities 不支持 LINQ 表达式节点类型“ArrayIndex”

    我就不屁话,能一张图就解决的就不说话了 2015-03-28 14:53:24,440 [10] ERROR log - System.NotSupportedException: LINQ to E ...

  3. 利用扩展事件进行调优和Troubleshooting PPT分享

        本篇主题是我在2015年中国数据库大会(DTCC)上的分享,扩展事件从2008版本出来到现在已经有6-7年,国内却很少有相关资料和使用,现在分享一下PPT,希望对大家有所帮助.       可 ...

  4. 利用typescript使backbone强类型智能提示

    模型类一旦多了没有强类型和智能提示是相当痛苦的,所以. 仅仅用ts定义一个模型类: class Person extends Backbone.Model { defaults = { Name:&q ...

  5. 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...

  6. 数据可视化-EChart2.0使用总结2

    接上一篇博客,这篇博客主要讨论EChart里面的散点图.气泡图和雷达图.   4.散点图-Scatter Chart 适合场景:三维数据集,但是只有两个维度需要比较.比较的是X轴和Y轴的数据,第三个数 ...

  7. MySQL学习笔记十五：优化(2)

    一.数据库性能评测关键指标 1.IOPS:每秒处理的IO请求次数,这跟磁盘硬件相关,DBA不能左右,但推荐使用SSD. 2.QPS:每秒查询次数,可以使用show status或mysqladmin ...

  8. js操作label,给label赋值,和取label的值

    取值:var Label_text=document.getElementById('test_label').innerHTML; 赋值:document.getElementById('test_ ...

  9. MapReduce的理解

    1 什么是MapReduce? Map本意可以理解为地图,映射(面向对象语言都有Map集合),这里我们可以理解为从现实世界获得或产生映射.Reduce本意是减少的意思,这里我们可以理解为归并前面Map ...

  10. 如何访问facebook (转)

    对于普通大众,访问facebook需要两个条件:1)使用代理 2)翻译网页内容.本文将介绍怎样安全高速地访问诸如facebook之类的国外网站,并提供相关软件下载. 工具/原料 chromeGAE软件 ...