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 相关文章推荐
jquery插件开发注意事项小结
Jun 04 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 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数组转xml的代码分享
2015/05/14 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
JavaScript对象学习经验整理
2013/10/12 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
node.js实现快速截图
2016/08/27 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
原生JavaScript实现进度条
2021/02/19 Javascript
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
对Django url的几种使用方式详解
2019/08/06 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
党校培训思想汇报
2014/01/03 职场文书
材料会计岗位职责
2014/03/06 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
财产保全担保书
2015/01/20 职场文书
明星邀请函
2015/02/02 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
使用javascript解析二维码的三种方式
2021/11/11 Javascript
python ConfigParser库的使用及遇到的坑
2022/02/12 Python
SQL SERVER存储过程用法详解
2022/02/24 SQL Server