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的一行代码轻松实现拖动效果
Dec 28 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
简单谈谈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连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
jQuery设计思想
2017/03/07 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
深入理解vue中的$set
2017/06/01 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
Python中的Numpy入门教程
2014/04/26 Python
Python中字符串对齐方法介绍
2015/05/21 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
实例代码讲解Python 线程池
2020/08/24 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
C语言开发工程师测试题
2016/12/20 面试题
工程招投标邀请书
2014/01/30 职场文书
年级组长自我鉴定
2014/02/22 职场文书
2015年宣传工作总结
2015/04/08 职场文书
五一晚会主持词
2015/07/01 职场文书