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 相关文章推荐
广告代码静态化js通用函数
May 09 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
最简单的tab切换实例代码
May 13 Javascript
AngularJS入门教程之REST和定制服务详解
Aug 19 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 Javascript
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的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
浅析PHP绘图技术
2013/07/03 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
JS实现小米轮播图
2020/09/21 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
linux下安装easy_install的方法
2013/02/10 Python
使用python分析git log日志示例
2014/02/27 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
python实现字典嵌套列表取值
2019/12/16 Python
用python对excel查重
2020/12/07 Python
pycharm实现猜数游戏
2020/12/07 Python
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
马智宇婚礼主持词
2014/03/22 职场文书
师德演讲稿范文
2014/05/06 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
2014年统战工作总结
2014/12/09 职场文书
2014年底个人工作总结
2015/03/10 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
解析python中的jsonpath 提取器
2022/01/18 Python