jQuery插件ContextMenu自定义图标

2024-10-29 00:43:40

jQuery的ContextMenu插件使用起来非常简单（当前前提是看了我的上一篇微博，哈哈），但是想改菜单的图标，很多人又要懵圈了。因为ContextMenu插件只提供了有限的几个图标，如剪切、拷贝、删除等等。

修改图标的相关代码：

$(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);
  })
});

图标效果：

现在我们想增加一个“Help”选项，图标为一个问号图形，该怎么办呢？

首先，得准备一张16*16的png图片。网上搜索到合适图片，再用Photoshop或者美图秀秀裁剪一下就OK。把图片命名为help.png，将该图片拷贝至指定的images文件夹中。

然后在上面那段代码中加上以下这句代码：

"help": {name: "Help", icon: "help"}

再接着修改jquery.contextMenu.css文件，找到定义图标图片的位置，添加Help图标的相应代码。

.context-menu-item.icon-help { background-image: url(images/help.png); }

好了，大功告成，效果如下：

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

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>
开发 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. 如果我们想要在该功能上可以使用
jQuery右键菜单contextMenu使用实例

在下面我们将设计一个场景,表格grid需要在每行实现鼠标右键,增加,删除,保存操作.grid我就用gridview了,随便用微软提供的样式,测试用例不用搞的多好看嘛,我也不是做美工了,哈哈,偷偷懒. 先上效果图,是有些同志说的有图才有真相嘛: ui代码: 复制代码代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits=
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,并且可以自定义样式. 复制代码
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,真不错,正是我要的效果.源码下下来,却没有说明文档告诉我们该如何组装,可能写这插件的牛人们觉得步骤太简单,写出来都觉得丢人.可苦了我们这等愚昧之徒,研究半天,总算从一堆代码中取其精华弃其糟粕,形成最简练的代码,以供初学者们
网页中右键功能的实现方法之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自定义图标

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

本文实例讲述了jQuery插件formValidator自定义函数扩展功能的方法.分享给大家供大家参考,具体如下: jQuery formValidator表单验证插件是什么?感兴趣的读者可参考<jQuery formValidator表单验证插件>以及本站其他相关文档此处省略若干文字. 实际项目中的表单应用是多种多样的,随之而来的验证也是多变的,但Jquery formValidator为我们提供了自定义函数接口,个人认为是其最主要的强大之处.废话不多说,直接实例. 例一:座机和手机,至少
基于jQuery插件实现环形图标菜单旋转切换特效

feature.presenter.1.5.css body { margin: 0; font-family: Tahoma; } .feature-presenter { position: absolute; } .feature-presenter-icon { background-color: white; text-align: center; transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95); -we
详解angular2采用自定义指令（Directive）方式加载jquery插件

由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目, 那么如何把jquery插件放到angular2中呢?采用自定义指令! 在上下文之前要引入jquery,这点不再描述首先创建一个指令,采用@input方式,来获取jquery插件所需要的参数. 在ngOnChanges时,也就是参数通过@input传入时,初始化jquery插件, 初始化jquery插件需要获取dom元素,所以我们引入ElementRef,用来获取dom元素这里需要讲一下,jqu
自定义jQuery插件方式实现强制对象重绘的方法

本文实例讲述了自定义jQuery插件方式实现强制对象重绘的方法.分享给大家供大家参考.具体实现方法如下: jQuery.fn.redraw = function(){ jQuery(this).each(function(){ this.style.display='none'; this.offsetHeight; // no need to store this anywhere, the reference is enough this.style.display='block'; });
jQuery插件Validate实现自定义校验结果样式

本文实例介绍了jQuery插件Validate实现自定义校验结果样式的详细代码,分享给大家供大家参考,具体内容如下效果如下: 具体步骤: 1.引入依赖包 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/ja
自定义一个jquery插件[鼠标悬浮时候出现说明label]

最近在学习jquery,看了几天,决定做个小东西练练手.入门级的可以看看. 先看下面这个小东西有什么功能,有模有用. 功能:当你鼠标悬浮在你的html元素上面的时候,它会显示一个help说明性的label. 效果图: 原始: 当你的鼠标悬浮在'单击我吧1'时: 当你的鼠标悬浮在'textbox'时: 看了效果图,若是有兴趣的话,仔细看看代码吧,代码有注释 html 代码: 复制代码代码如下: <%@ Page Language="C#" AutoEventWireup=&quo
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子

jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明需要使用jQuery库文件和AjaxFileUpload库文件使用实例一,包含文件部分复制代码代码如下: <script type="text/javascript" src="jquery.js"></script> <scr
在网站上应该用的30个jQuery插件整理

当然你现在可能不善于用,但我敢肯定你会发现他们在你未来的项目中使用!. Nivo滑块毫无疑问,这个插件是世界上最真棒jQuery的滑块图片,并配有超过15个过渡效果. Anything Slider 任何滑块从所有最通用的滑块.您可以添加绝对的东西,从视频到简单的文字和图像,这是真棒. 幻灯片幻灯片是,本着简约的jQuery幻灯片插件.挤满了一套有用的功能,以帮助新手和高级开发人员创造优雅和用户友好的幻灯片. jQuery的周期插件 jQuery的周期插件支持许多不同类型的过渡效果的幻灯片插

jQuery插件ContextMenu自定义图标

相关推荐

随机推荐