点击这里体验效果

如果要屏蔽页面原来的右键菜单，请设置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. Unknown lifecycle phase "mvn". You must specify a valid lifecycle phase or a goal in the format <plugin-prefix>:<goal> or <plugin-group-id>:<plugin-artifact-id>[:<plugin-version>]:<goal>

    在用maven命令启动storm时候,命令行是:mvn exec:java -Dexec.mainClass="TopologyMain" -Dexec.args="sr ...

  2. PHP扩展-扩展的生成和编译

    首先说明一下,PHP扩展有两种编译方式:方式一:在编译PHP时直接将扩展编译进去方式二:扩展被编译成.so文件,在php.ini里配置加载路径: 以下开始说明创建PHP扩展并编译的步骤:下载PHP源码 ...

  3. HTML5系列：HTML5本地存储

    1. Web Storage存储 HTML4在客户端存储数据通常使用Cookie存储机制将数据保存在用户的客户端,但使用Cookie方式存储客户端数据存在一系列的制约发展因素,如限制存储数据空间大小. ...

  4. 【Win 10应用开发】多窗口视图

    Windows App一般情况下,同一时刻只能有一个应用程序实例在运行,为了在特殊需求下可以同时呈现不同的UI,SDK提供了多视图操作支持. 应用程序可以创建新的应用视图,以新的视图为基础可以呈现与主 ...

  5. 分享一个LiteDB做的简单考试系统辅助工具

    凌晨,被安排在公司值班,因为台风“灿鸿”即将登陆,风力太大,办公楼,车间等重要部分需要关注.所以无聊,那就分享一下,今天给朋友临时做的一个小的考试系统辅助工具吧.其实非常小,需求也很简单,但是可以根据 ...

  6. Android APK签名

    一.为什么要签名? 开发Android的人这么多,完全有可能大家都把类名,包名起成了一个同样的名字,这时候如何区分?签名这时候就是起区分作用的. 由于开发商可能通过使用相同的Package Name来 ...

  7. MySQL复合分区

    到底还是开源软件,MySQL对复合分区的支持远远没有Oracle丰富. 在MySQL 5.6版本中,只支持RANGE和LIST的子分区,且子分区的类型只能为HASH和KEY. 譬如: CREATE T ...

  8. jdk8中java.util.concurrent包分析

    并发框架分类 1. Executor相关类 Interfaces. Executor is a simple standardized interface for defining custom th ...

  9. 【JAVA】基于MVC架构Java技术荟萃案例演练

    基于JAVA-MVC技术的顾客管理项目案例总结 作者 白宁超 2016年6月9日22:47:08 阅读前瞻:本文源于对javaweb相关技术和资料汇总,涉及大量javaweb基础技术诸如:Servle ...

  10. HashMap和HashTable到底哪不同？

    HashMap和HashTable有什么不同?在面试和被面试的过程中,我问过也被问过这个问题,也见过了不少回答,今天决定写一写自己心目中的理想答案. 代码版本 JDK每一版本都在改进.本文讨论的Has ...