JQuery右键菜单插件ContextMenu使用指南


Posted in Javascript onDecember 19, 2014

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

压缩版:
http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js

Jquery主页:   http://jquery.com/

通过此插件可以在不同的html元素内建立contextmenu,并且可以自定义样式.

<HTML>

 <HEAD>

  <TITLE> JQuery右键菜单 </TITLE>

  <script  src="jquery-1.2.6.min.js"></script>

  <script src="jquery.contextmenu.r2.js"></script>

 </HEAD>

 <BODY>

 <span class="demo1" style="color:green;">

    右键点此

 </span>

<hr />

<div id="demo2">

    右键点此

</div>

<hr />

<div class="demo3" id="dontShow">

  不显示

</div>

<hr />

<div class="demo3" id="showOne">

  显示第一项

</div>

<hr />

<div class="demo3" id="showAll">

  显示全部

</div>

<hr />

    <!--右键菜单的源-->

     <div class="contextMenu" id="myMenu1">

      <ul>

        <li id="open"><img src="folder.png" /> 打开</li>

        <li id="email"><img src="email.png" /> 邮件</li>

        <li id="save"><img src="disk.png" /> 保存</li>

        <li id="delete"><img src="cross.png" /> 关闭</li>

      </ul>

    </div>

    <div class="contextMenu" id="myMenu2">

        <ul>

          <li id="item_1">选项一</li>

          <li id="item_2">选项二</li>

          <li id="item_3">选项三</li>

          <li id="item_4">选项四</li>

        </ul>

   </div>

     <div class="contextMenu" id="myMenu3">

         <ul>

          <li id="item_1">csdn</li>

          <li id="item_2">javaeye</li>

          <li id="item_3">itpub</li>

        </ul>

    </div>

 </BODY>

 <script>

    //所有class为demo1的span标签都会绑定此右键菜单

     $('span.demo1').contextMenu('myMenu1', 

     {

          bindings: 

          {

            'open': function(t) {

              alert('Trigger was '+t.id+'\nAction was Open');

            },

            'email': function(t) {

              alert('Trigger was '+t.id+'\nAction was Email');

            },

            'save': function(t) {

              alert('Trigger was '+t.id+'\nAction was Save');

            },

            'delete': function(t) {

              alert('Trigger was '+t.id+'\nAction was Delete');

            }

          }

    });

    //所有html元素id为demo2的绑定此右键菜单

    $('#demo2').contextMenu('myMenu2', {

      //菜单样式

      menuStyle: {

        border: '2px solid #000'

      },

      //菜单项样式

      itemStyle: {

        fontFamily : 'verdana',

        backgroundColor : 'green',

        color: 'white',

        border: 'none',

        padding: '1px'

      },

      //菜单项鼠标放在上面样式

      itemHoverStyle: {

        color: 'blue',

        backgroundColor: 'red',

        border: 'none'

      },

      //事件    

      bindings: 

          {

            'item_1': function(t) {

              alert('Trigger was '+t.id+'\nAction was item_1');

            },

            'item_2': function(t) {

              alert('Trigger was '+t.id+'\nAction was item_2');

            },

            'item_3': function(t) {

              alert('Trigger was '+t.id+'\nAction was item_3');

            },

            'item_4': function(t) {

              alert('Trigger was '+t.id+'\nAction was item_4');

            }

          }

    });

    //所有div标签class为demo3的绑定此右键菜单

    $('div.demo3').contextMenu('myMenu3', {

    //重写onContextMenu和onShowMenu事件

      onContextMenu: function(e) {

        if ($(e.target).attr('id') == 'dontShow') return false;

        else return true;

      },

      onShowMenu: function(e, menu) {

        if ($(e.target).attr('id') == 'showOne') {

          $('#item_2, #item_3', menu).remove();

        }

        return menu;

      }

    });

 </script>

</HTML>

效果图:

JQuery右键菜单插件ContextMenu使用指南

很好玩很炫酷的功能吧,小伙伴们自己美化下,加入到自己的项目中去吧

Javascript 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
asp批量修改记录的代码
Jun 25 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
js 调用百度分享功能
Feb 27 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
JavaScript实现九宫格拖拽效果
Jun 28 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 #Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 #Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 #Javascript
jQuery实现视频作为全屏幕背景
Dec 18 #Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 #Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 #Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 #Javascript
You might like
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
轻松实现php文件上传功能
2017/02/17 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
Python中正则表达式的详细教程
2015/04/30 Python
python中循环语句while用法实例
2015/05/16 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
基于python调用psutil模块过程解析
2019/12/20 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
初中生300字旷课检讨书
2014/11/19 职场文书
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android