点击这里体验效果

如果要屏蔽页面原来的右键菜单，请设置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. jQuery DateTimePicker 日期和时间插件

    jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等. 日期选择插件是一个配 ...

  2. Python标准库的threading.Thread类(转自别人的翻译)

    这个类表示在单独的控制线程中运行的活动.有两种方法可以指定这种活动,给构造函数传递回调对象,或者在子类中重写run() 方法.其他方法(除了构造函数)都不应在子类中被重写.换句话说,在子类中只有__i ...

  3. 创建第一个 local network（II）- 每天5分钟玩转 OpenStack（81）

    上一节通过 Web GUI 创建了 “first_local_net”,本节我们需要搞清楚底层网络结构有了哪些变化? 点击 “first_local_net” 链接,显示 network 的 subn ...

  4. 苹果系统安装虚拟机 Mac如何安装虚拟机教程

    1.前言    大家在用 Mac 系统的时候,可能有时难免还是要用到 Windows 系统.在 Mac 上使用 Windows 系统有二种方法.一种是在 Mac上安装双系统,适合要在机器上处理一些大型 ...

  5. C# 对象锁——Monitor

    Monitor里边有一些static方法,可以用于在对象上获取同步锁,来进行一些进程同步控制操作 用法及注意点如下: using System; using System.Collections.Ge ...

  6. Apache Sqoop - Overview——Sqoop 概述

    Apache Sqoop - Overview Apache Sqoop 概述 使用Hadoop来分析和处理数据需要将数据加载到集群中并且将它和企业生产数据库中的其他数据进行结合处理.从生产系统加载大 ...

  7. 【原】IOS合并lib(.a)库的终极可用方法(可用于解决duplicate symbol静态库冲突)

    网上流传了太多关于合并lib库的方法,自己也尝试过,但大多失败.有感于这种急于解决问题,经过百般尝试后依旧无果的无奈心情,小翁在这里用一个实例来完整阐述如何在mac中合并lib静态库. 这里以移动广告 ...

  8. Blob初探

    简介 Blob在js中意味着二进制大数据.实现该接口的对象有3个属性,分别是type(MIME),size(byte)和 一个切割方法:slice(在大文件分片上传可能用到).另外,File实现了Bl ...

  9. ORA-00257 archiver error 处理思路

    1.首先查下oerr给出的简要说明 2.查询V$RECOVERY_AREA_USAGE信息 3.根据实际空间剩余情况先适当增加归档目录的大小,保证先恢复业务 4.查看备份是否存在问题 1.首先查下oe ...

  10. CentOS 7.2 yum方式安装MySQL 5.7

    CentOS 7之后的版本yum的默认源中使用MariaDB替代原先MySQL,因此安装方式较为以往有一些改变: 下载mysql的源 wget http://dev.mysql.com/get/mys ...