网页中右键功能的实现方法之contextMenu的使用

2024-10-11 01:16:35

本文介绍一种网页中实现右键功能的方案–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">
<head>
<meta charset="utf-8">
<link href="libs/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="external nofollow" rel="stylesheet"/>
<script src="libs/jQuery/jquery-1.8.3.min.js"></script>
<script src="libs/jQuery-contextMenu/dist/jquery.contextMenu.js"></script>
</head>
<body>
<span class="context-menu-one btn btn-neutral">right click me</span>
<script>
  $(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: function(){
          return 'context-menu-icon context-menu-icon-quit';
        }}
      }
    });
    $('.context-menu-one').on('click', function(e){
      console.log('clicked', this);
    })
  });
</script>
</body>
</html>

效果图：

3.Demo and Document

https://swisnl.github.io/jQuery-contextMenu/demo.html
http://swisnl.github.io/jQuery-contextMenu/demo/on-dom-element.html

以上所述是小编给大家介绍的网页中右键功能的实现方法之contextMenu的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

使用contextMenu插件实现Bootstrap table弹出右键菜单

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

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

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

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

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

本文实例讲述了javascript实现在网页中运行本地程序的方法.分享给大家供大家参考,具体如下: <input onclick="exec('notepad.exe')" value="执行noteppad.exe" type="button"> <input onclick="exec('cmd.exe')" value="执行cmd.exe" type="button&qu
python re正则匹配网页中图片url地址的方法

最近写了个python抓取必应搜索首页http://cn.bing.com/的背景图片并将此图片更换为我的电脑桌面的程序,在正则匹配图片url时遇到了匹配失败问题. 要抓取的图片地址如图所示: 首先,使用这个pattern reg = re.compile('.*g_img={url: "(http.*?jpg)"') 无论怎么匹配都匹配不到,后来把网页源码抓下来放在notepad++中查看,并用notepad++的正则匹配查找,很轻易就匹配到了,如图: 后来我写了个测试代码,把图片地
使用pyscript在网页中撰写Python程式的方法

根据 Anaconda 的项目 pyscript,可以将 python 的代码直接写在网页中,目前只支援两种标签,分别是<py-script> 与 <py-repl>,以下是简单的示例. 使用这两行导入 pyscript <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow" rel=&
Android EditText长按菜单中分享功能的隐藏方法

常见的EditText长按菜单如下 oppo 小米需求是隐藏掉其中的分享/搜索功能,禁止将内容分享到其他应用. 最终解决方案这里先说下最终解决方案像华为/oppo等手机,该菜单实际是谷歌系统的即没有改过源代码,像小米的菜单则是自定义,该部分的源代码改动过. 两方面修改: 1.谷歌系统自带的通过 EditText.setCustomSelectionActionModeCallback()方法设置自定义的选中后动作模式接口,只保留需要的菜单项代码如下 editText.customSel
Spring中@Scheduled功能的使用方法详解

目录前言一.Spring @Scheduled Annotation 1.2 如何启用@Scheduled 注释 1.3 使用@Scheduled 注释二.固定的延时和频率使用@Scheduled 三.配合cron表达式使用@Scheduled 四.使用properties文件配置Cron 五.使用context配置Cron 总结前言 Spring 为任务调度和基于使用@Scheduled 注释的 cron 表达式的异步方法执行提供了极好的支持.可以将@Scheduled 注释与触发器元
网页中返回顶部代码(多种方法)另附注释说明

下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能方法一:用命名锚点击返回到顶部预设的id为top的元素复制代码代码如下: <a href="#top" target="_self">返回顶部</a> 方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置) 复制代码代码如下: <a href=&qu
详解ABP框架中Session功能的使用方法

如果一个应用程序需要登录,则它必须知道当前用户执行了什么操作.因此ASP.NET在展示层提供了一套自己的SESSION会话对象,而ABP则提供了一个可以在任何地方获取当前用户和租户的IAbpSession接口. 关于IAbpSession 需要获取会话信息则必须实现IAbpSession接口.虽然你可以用自己的方式去实现它(IAbpSession),但是它在module-zero项目中已经有了完整的实现. 注入Session IAbpSession通常是以属性注入的方式存在于需要它的类中,不需
网页中的图片的处理方法与代码

1 掉链接的图片处理 <img src="no.jpg" onerror="this.src='images/new.gif'"> 2 自动缩小大图经常看到一些图片很大,上传后显示会撑满屏幕.下面的例子通过检测图片的宽度,如果该图片的宽度大于"屏幕宽度-350", 则让该图就显示"屏幕宽度-350"这么大小. 原图 <img src="jsimg/wallpaper.jpg"> 设
JQuery模拟实现网页中自定义鼠标右键菜单功能

前言题外话.......最近在开发一个网站项目的时候,需要用到网页自定义右键菜单,在网上看了各路前辈大神的操作,头晕目眩,为了达到目的,突然灵机一动,于是便有了这篇文章. 先放个效果图(沾沾自喜,大神勿喷): 废话不多说,进入正题: 1.首先我们要禁用掉原网页中右键菜单 //JQuery代码 $(selector).on('contextmenu', function () { return false; }) 这样目标区域的右键菜单就无法使用了 demo1: <!DOCTYPE html>

网页中右键功能的实现方法之contextMenu的使用

相关推荐

随机推荐