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 相关文章推荐
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
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
PHP验证码函数代码(简单实用)
2013/09/29 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
javascript中this关键字详解
2016/12/12 Javascript
tab栏切换原理
2017/03/22 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
vue3.0 上手体验
2020/09/21 Javascript
pymysql 开启调试模式的实现
2019/09/24 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
pycharm的python_stubs问题
2020/04/08 Python
零基础小白多久能学会python
2020/06/22 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
银行简历自我评价
2014/02/11 职场文书
体育教师自我鉴定
2014/02/12 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
python状态机transitions库详解
2021/06/02 Python
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers