网页中右键功能的实现方法之contextMenu的使用
2017-02-20 09:30
751 查看
本文介绍一种网页中实现右键功能的方案–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的使用
- 实现文件右键“打开方式”菜单功能(查看系统这种功能对比实现)(读注册表的方法)
- 在网页中实现右键单击功能
- Zero Clipboard js+swf实现的复制功能使用方法
- 使用ASM4.0实现AOP的功能,监控每个方法的执行时间
- 使用Java实现简单的server/client回显功能的方法介绍
- 用javascript 实现网页鼠标右键弹出菜单功能
- 使用服务端和客户端两种方法 模拟网易邮箱实现全选,全不选的功能
- 动态方法调用和使用通配符实现类似struts1.x的dispatchAction功能
- 举例说明BroadcastReceiver的使用方法----实现android手机开机之后显示画面的功能
- 使用Java实现简单的server/client回显功能的方法介绍
- DIV始终固定在网页右下角位置的CSS实现方法,返回顶部功能
- ubuntu安装使用xvfb+CutyCapt实现网页抓图功能
- Adobe AIR右键菜单和系统托盘(Tray)功能以及实现方法
- 使用js实现基于可视布局信息的网页噪音去除的测试方法
- Adobe AIR右键菜单和系统托盘(Tray)功能以及实现方法
- 使用递归方法实现,向FTP服务器上传整个目录结构、从FTP服务器下载整个目录到本地的功能
- WPF中ContextMenu(右键菜单)使用Command在部分控件上默认为灰色的处理方法
- ASP.NET jQuery 食谱25 (使用jQuery UI的Autocomplete方法实现文本框的自动搜索填充功能)
- 不使用JS如何在网页中屏蔽右键和左键选定,最强屏蔽功能