点击这里体验效果

如果要屏蔽页面原来的右键菜单，请设置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. c#设计模式-适配器模式

    一. 适配器(Adapter)模式 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本接口不匹配而无法在一起工作的两个类能够在一起工作. 名称由来 这很像变压器(Adapter),变压 ...

  2. The currently selected variant "arm-debug" uses split APKs, but none of the 1 split apks are compatible with the current device with density "213" and ABIs "x86".

    出现这种错误一般是在电脑上用模拟器运行APK的吧. 可以在build.gradle中这样配置下: android{ ... defaultConfig { applicationId "XX ...

  3. CATransition转场动画

    背景: 最近在温习动画,分享个简单系统的转场动画 viewcontroller *VC=[self.storyboard instantiateViewControllerWithIdentifier ...

  4. 前端学PHP之命名空间

    × 目录 [1]定义 [2]多命名空间 [3]名称解析[4]访问内部元素[5]全局空间[6]别名和导入 前面的话 从广义上来说,命名空间是一种封装事物的方法.在很多地方都可以见到这种抽象概念.例如,在 ...

  5. Bootstrap Metronic 学习记录（二）菜单栏

    1.简介 1)  .环境配置 2)  .提取页面 2).动态生成菜单(无限级别树) 2.系统环境配置 项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQ ...

  6. 记一次ASP.NET MVC性能优化（实际项目中）

    前言 在开发中为了紧赶项目进度而未去关注性能的问题,在项目逐渐稳定下来后发现性能令人感到有点忧伤,于是开始去关注这方面,本篇为记录在开发中遇到的问题并解决,不喜勿喷.注意:以下问题都是在移动端上出现, ...

  7. EasyUI DataGrid 修改每页显示数量的最大值&&导出Grid到Excel

    首先,最近在搞那个DataGrid的导出,发现,网上的用JS导出到本地的方法虽然可用,但是只能导出DataGrid当前的数据,例如说,DataGrid默认是最大显示50行,但是如果有多页,那么就无法显 ...

  8. C# 在word中查找及替换文本

    C# 在word中查找及替换文本 在处理word文档时,很多人都会用到查找和替换功能.尤其是在处理庞大的word文档的时候,Microsoft word的查找替换功能就变得尤为重要,它不仅能让我们轻易 ...

  9. Java基础--反射机制的知识点梳理

    什么是反射? 正常编译执行java文件时,会生成一个.class文件,反射就是一个反编译的过程,它可以通过.class文件得到一个java对象.一个类会有很多组成部分,比如成员变量,成员方法,构造方法 ...

  10. 重温Servlet学习笔记--response对象

    在用户浏览网页时,服务器对于客户端浏览器做出的响应被封装成一个HttpServletResponse对象,要对浏览器操作只需要操作这个response对象即可.response的功能分类及介绍: 响应 ...