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 相关文章推荐
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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
德生PL990的分析评价
2021/03/02 无线电
一个用于网络的工具函数库
2006/10/09 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
js日期时间补零的小例子
2013/03/05 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
python sort、sorted高级排序技巧
2014/11/21 Python
python获取多线程及子线程的返回值
2017/11/15 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python pandas 时间日期的处理实现
2019/07/30 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
Python join()函数原理及使用方法
2020/11/14 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
借款协议书
2014/04/12 职场文书
公司年底活动方案
2014/08/17 职场文书
旅游投诉信范文
2015/07/02 职场文书
导游词之清晏园
2019/11/22 职场文书
python中tkinter复选框使用操作
2021/11/11 Python