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

2024-04-25 15:39:34

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

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

通过此插件可以在不同的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使用实例

在下面我们将设计一个场景,表格grid需要在每行实现鼠标右键,增加,删除,保存操作.grid我就用gridview了,随便用微软提供的样式,测试用例不用搞的多好看嘛,我也不是做美工了,哈哈,偷偷懒. 先上效果图,是有些同志说的有图才有真相嘛: ui代码: 复制代码代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits=
jQuery插件ContextMenu自定义图标

jQuery的ContextMenu插件使用起来非常简单(当前前提是看了我的上一篇微博,哈哈),但是想改菜单的图标,很多人又要懵圈了.因为ContextMenu插件只提供了有限的几个图标,如剪切.拷贝.删除等等. 修改图标的相关代码: $(function(){ $.contextMenu({ selector: '.context-menu-one', callback: function(key, options) { var m = "clicked: " + key; wind
网页中右键功能的实现方法之contextMenu的使用

本文介绍一种网页中实现右键功能的方案–contextMenu. 1.下载下载地址 https://github.com/swisnl/jQuery-contextMenu 下载得到压缩文件jQuery-contextMenu-master.zip 解压后,使用dist目录下css.js. 2.使用方法使用步骤: (1) 引用css.js. (2) html.js代码. 简单例子如下: 代码test.html: <!DOCTYPE html> <html lang="en&q
JS组件Bootstrap ContextMenu右键菜单使用方法

今天来总结下bootstrap的一个小组件的应用.好了,不说废话,进入正题吧. 一.ContextMenu介绍一个需求:表格行调序,支持多选调序,并且可以不连续多选.什么意思呢?先来看看需要实现的效果图: 需求是:需要将选中的6.8.9行移动到第2行和第3行之间.撇开业务不说,单纯从技术层面来说,要想使用最少操作达到上述效果,博主想到了右键功能,如果能够在第2行或者第3行上面点击鼠标右键,通过右键菜单功能将选中的行移动到相应的位置,这样是不是最简单呢.说做咱就做,于是找组件,搜索"bootst
使用contextMenu插件实现Bootstrap table弹出右键菜单

如今Bootstrap这个前端框架已被许多人接受并应用在不同的项目中,其中"开发高效,设备兼容"的特点表现得非常明显.再加上它默认的美观的UI组件,简直就是很多前端的大爱啊!!! 今天在这里跟大家分享Bootstrap table弹出右键菜单的实现方法. 最近遇到有一个需求,需要在Bootstrap table上使用右键.网上搜了半天没有找到,最后发现Bootstrap table不支持右键(官方文档给出的答案 https://github.com/wenzhixin/bootstra
jquery插件ContextMenu设置右键菜单

Struts项目中右键菜单一般很少用到,但是一旦客户有要求,很多人就懵圈了,比如我.这个时候,当然要表现镇定,一面拍着胸口对客户承诺说绝对可以实现,一面赶紧打开百度神器,搜搜看是否有前人已经写好的插件. 于是便找到了jQuery的ContextMenu插件.上官网看看Demo,真不错,正是我要的效果.源码下下来,却没有说明文档告诉我们该如何组装,可能写这插件的牛人们觉得步骤太简单,写出来都觉得丢人.可苦了我们这等愚昧之徒,研究半天,总算从一堆代码中取其精华弃其糟粕,形成最简练的代码,以供初学者们
开发 Internet Explorer 右键功能表(ContextMenu)

参考 MSDN Library[Adding Entries to the Standard Context Menu]开发 ContextMenu 1. IE 额外的 ContextMenu 是透过註册机码 HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt 来建立 2. 所以只要在该位置下新增一个 Key 值,例如:新增[Make 0rz]则 IE 中按下右键就会出现相同名称的功能 3. 如果我们想要在该功能上可以使用
3种不同的ContextMenu右键菜单实现代码

简单使用的右键菜单,希望能帮助大家.下面是截图和实例代码实例预览 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
JQuery右键菜单插件ContextMenu使用指南

插件下载地址: 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,并且可以自定义样式. 复制代码
vue中自定义右键菜单插件

前言: 作为一个刚刚入门前端的搬砖工作者,写博客只是为了能够记录自己因为业务使用过的一些插件,为了后续更好的使用和改造本文分享了vue中自定义右键菜单插件的具体代码,供大家参考,具体内容如下演示用法通过npm安装插件 npm i vue-context -S 在main.js中引入并注册 import Vue from 'vue'; import VueContext from 'vue-context'; new Vue({ components: { VueContext
分享14个很酷的jQuery导航菜单插件

导航按钮是网站的非常重要的一部分,因其将网站的所有部分而集中一处,jQuery导航菜单插件在其中扮演重要的角色. 本文介绍了14个很酷的jQuery导航菜单插件,它们够漂亮.简单,并且完全兼容各种类型的web浏览器. 1.Facets Navigation Demo | Download 2.Rocking & Rolling Demo | Download 3.Garage Door Menu Demo | Download 4.Little Boxes Menu Demo | Downloa
vue 右键菜单插件简单、可扩展、样式自定义的右键菜单

今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerightmenu) 安装 npm install rightmenu --save-dev 开始 //main.js import vue from "vue"; import rightMenu from "rightMenu"; vue.use(rightMenu)
javascript自定义右键菜单插件

本文实例为大家分享了javascript自定义右键菜单插件的具体代码,供大家参考,具体内容如下 1.使用方式 js文件引入<script src="RightMenu.js"></script> 初始化: let rightMenu = new RightMenu({ targetId:'menu',//需要改变右键菜单的元素id menuItems: items//菜单项数据,json数组 }) 2.menuItems参数 items = [ { id: 'a
jquery实现右键菜单插件

今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能.也就是在网页点击鼠标右键的时候不是弹出系统的菜单而是我们制定的内容.这样可以拓展右键的功能.实现过程不多说了,写出来的代码和效果如下: js部分: 复制代码代码如下: //创建右键菜单 var epMenu={ create:function(point,option){ var menuNode=document.getElementById('epMenu'); if(!menuNode){
jQuery菜单插件superfish使用指南

下载地址:http://plugins.jquery.com/project/Superfish 文档说明:http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started Superfish的一些特点及效果: 使用纯Css实现动态效果,跨浏览器,支持最烂浏览器IE6 可设置下拉菜单在鼠标离开时自动隐藏时间.默认是800毫秒支持淡入淡出动画支持键盘响应对含有子菜单的母菜单自动加入提示箭头支持阴影效果,但需要有好的浏览器支
jQuery标签编辑插件Tagit使用指南

一.Tagit插件功能提高网站交互性,增加用户体验.至于其它的功能,还真没有.用一个input text就可以替换了它.但是text没有输入提示功能,而tagit拥有这个功能.官方示例如下图: 将关键词标签化,成为一个整体.方便删除与浏览. 二.Tagit官方地址 http://aehlke.github.io/tag-it/ 官方地址上有使用说明,也有用例.用例的颜色搭配也可以选择.不过选来选去也就是这几种,Tagit插件使用jqueryui,所以jqueryui提供的样式也兼容.jquer
jQuery拖拽插件gridster使用指南

gridster.js 是一个 jQuery 插件用来构建直观的可拖放的布局,支持多列布局,你还可以动态的添加和删除表格中的元素. 1.gridster插件功能实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本地测试总是出现这样那样的问题,一是无法移动,二是在磁铁的附近有一个黑点,可能是定位使用的.但是如果在网站中正常使用,应该不会出现这样的黑点.gridster插件的属性和

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

相关推荐

随机推荐