jquery插件ContextMenu设置右键菜单

2024-08-25 01:10:48

Struts项目中右键菜单一般很少用到，但是一旦客户有要求，很多人就懵圈了，比如我。这个时候，当然要表现镇定，一面拍着胸口对客户承诺说绝对可以实现，一面赶紧打开百度神器，搜搜看是否有前人已经写好的插件。

于是便找到了jQuery的ContextMenu插件。上官网看看Demo，真不错，正是我要的效果。源码下下来，却没有说明文档告诉我们该如何组装，可能写这插件的牛人们觉得步骤太简单，写出来都觉得丢人。可苦了我们这等愚昧之徒，研究半天，总算从一堆代码中取其精华弃其糟粕，形成最简练的代码，以供初学者们参考。

官网下载地址：http://plugins.jquery.com/contextMenu/

我这边下的是1.6.6版本。源码目录结构如下：

里边有个demo.html文件，这个就是我们要研究的对象。打开这个文件，可以试试效果，感觉不错吧。

但是用记事本或者其他编辑器查看源代码，你会觉得头晕。一堆的js文件和css文件，恐怖不是每个都是必须的，这就要我们自己调试了，插件作者是不会告诉我们的。

OK，由于时间关系，我已经帮大家删掉多余的代码，精简后的代码如下：

<html>
<head>
  <title>jQuery contextMenu Plugin Demo</title>

  <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
  <script src="src/jquery.contextMenu.js" type="text/javascript"></script>
  <link href="src/jquery.contextMenu.css" rel="external nofollow" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="context-menu-one">
  <strong>right click me</strong>
</div>

<script type="text/javascript" class="showcase">
$(function(){
  $.contextMenu({
    selector: '.context-menu-one',
    callback: function(key, options) {
      var m = "clicked: " + key;
      window.console && console.log(m) || alert(m);
    },
    items: {
      "edit": {name: "Edit", icon: "edit"},
      "cut": {name: "Cut", icon: "cut"},
      "copy": {name: "Copy", icon: "copy"},
      "paste": {name: "Paste", icon: "paste"},
      "delete": {name: "Delete", icon: "delete"},
      "sep1": "---------",
      "quit": {name: "Quit", icon: "quit"}
    }
  });

  $('.context-menu-one').on('click', function(e){
    console.log('clicked', this);
  })
});
</script>

</body>
</html>

运行效果：

根据这段精简后的代码，我们就可以知道使用这个插件了。

第一步：把核心文件jquery-1.8.2.min.js、jquery.contextMenu.js、jquery.contextMenu.css拷贝至我们的项目中。

第二步：编写生成菜单以及相应菜单动作的javascript脚本。

$(function(){
  $.contextMenu({
    selector: '.context-menu-one',
    callback: function(key, options) {
      var m = "clicked: " + key;
      window.console && console.log(m) || alert(m);
    },
    items: {
      "edit": {name: "Edit", icon: "edit"},
      "cut": {name: "Cut", icon: "cut"},
      "copy": {name: "Copy", icon: "copy"},
      "paste": {name: "Paste", icon: "paste"},
      "delete": {name: "Delete", icon: "delete"},
      "sep1": "---------",
      "quit": {name: "Quit", icon: "quit"}
    }
  });

  $('.context-menu-one').on('click', function(e){
    console.log('clicked', this);
  })
});

第三步：在合适的位置设置右键菜单。

<div class="context-menu-one">
  <strong>right click me</strong>
</div>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jQuery右键菜单contextMenu使用实例

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

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

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

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

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

开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页面都有引用jQuery,,开发个jQuery联动菜单插件,说动手就动手,下面跟大家分享分享. 我用的jQuery插件方式 (function($){ $.fn.casmenu=function(argvs){ //your code } })(jQuery); 其中jQuery传入的是jquery对象,需
C#设置右键菜单的方法

本文实例讲述了C#设置右键菜单的方法.分享给大家供大家参考.具体实现方法如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; namespace WindowsApplication1 { public partia
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法

本文实例讲述了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法.分享给大家供大家参考,具体如下: 1.问题背景设计一条折线图,但是图形中不用插件自带的颜色,需要自定义线条和折点的颜色 2.实现源码 (1)图形自分配颜色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-设置折线图中折线线条颜色和折线点颜色</t
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法

本文实例讲述了jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法.分享给大家供大家参考,具体如下: 方法很简单,我们只需要在数据加载成功后的事件中处理即可.具体代码如下所示: //事件 onLoadSuccess: function (data) { //模拟测试加载成功后数据Id大于20的都勾选中,并禁用checkbox for (var i = 0; i < data.rows.length; i++) { if (data.rows[i].Id > 20)
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法

本文实例讲述了jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法.分享给大家供大家参考,具体如下: 一.问题描述: $('#tb-page-list').datagrid({ url: '/BisOrderInfo/GetList', pageNumber: 2, pageSize: 10 }); 当手动设置 pageNumber大于或等于2时,查看请求的方法时,会请求2次,并且第二次的pageNumber等于1: 二.原因所在: jquery.ea
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制

我记得在刚开始接触动态HTML及JavaScript时就接触过关于鼠标右键屏蔽的脚本代码,当时这些代码很多会用在防止浏览者未经允许的复制网页上的文字或者其他内容,后来的实际应用证明这种做法是不符合用户体验的,而且破解的方法也有很多,比如我曾经写过一篇文章讲解如何解除网页禁止复制的办法. 由此可见,限制右键及复制是不明智的做法,但是今天我仍然要谈谈关于禁止网页复制.右键菜单的事儿,因为随着网页APP技术的发展,网页应用和桌面应用之间的界限越来越模糊,有一些桌面程序实际上是由网页配合JavaScri
jQuery简单实现禁用右键菜单

代码非常简单,这里就不多废话了,直接上代码: 复制代码代码如下: $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 5行代码搞定,简单吧,当然小伙伴们可以自由扩展下,可以实现屏蔽右键菜单的指定项.
jQuery插件实现手风琴二级菜单

本文实例制作了一个用jQuery插件形式实现的手风琴二级菜单,供大家参考,具体内容如下 HTML5结构要求: <div id="accordion"> <div> <p>一级菜单</p> <div> <p>二级菜单</p> <p>二级菜单</p> <p>二级菜单</p> </div> </div> <div> <p

jquery插件ContextMenu设置右键菜单

相关推荐

随机推荐