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控制台调试的方法
Mar 07 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 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
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
Python中如何导入类示例详解
2019/04/17 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
外贸公司实习自我鉴定
2013/09/24 职场文书
应用艺术专业个人的自我评价
2014/01/03 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
企业财务管理制度范本
2015/08/04 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
django 认证类配置实现
2021/11/11 Python