jQuery插件ContextMenu自定义图标


Posted in Javascript onMarch 15, 2017

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

图标效果:

jQuery插件ContextMenu自定义图标

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

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

jQuery插件ContextMenu自定义图标

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

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

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

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

好了,大功告成,效果如下:

jQuery插件ContextMenu自定义图标

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
iframe 异步加载技术及性能分析
Jul 19 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
继续学习javascript闭包
Dec 03 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
详解vue的diff算法原理
May 20 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
JavaScript对象引用与赋值实例详解
Mar 15 #Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 #Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 #Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 #Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 #Javascript
jQuery动态产生select option下拉列表
Mar 15 #Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 #Javascript
You might like
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
浅析php学习的路线图
2013/07/10 PHP
使用php实现截取指定长度
2013/08/06 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
验证手机号码的JS方法分享
2013/09/10 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
vue中appear的用法
2017/08/17 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
python学生管理系统代码实现
2020/04/05 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
关键字throw与throws的用法差异
2016/11/22 面试题
保卫科工作岗位职责
2014/03/01 职场文书
核心价值观演讲稿
2014/05/13 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
感谢信怎么写
2015/01/21 职场文书
邀请函格式范文
2015/02/02 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle