源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

网页中右键功能的实现方法之contextMenu的使用

  • 时间:2020-02-23 05:29 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:网页中右键功能的实现方法之contextMenu的使用
本文介绍一种网页中实现右键功能的方案–contextMenu。 [b]1.下载[/b] 下载地址 [url=https://github.com/swisnl/jQuery-contextMenu]https://github.com/swisnl/jQuery-contextMenu[/url] 下载得到压缩文件jQuery-contextMenu-master.zip 解压后,使用dist目录下css、js。 [b]2.使用方法[/b] 使用步骤: (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>
效果图: [img]http://files.jb51.net/file_images/article/201702/201702200930541.jpg[/img] 3.Demo and Document [url=https://swisnl.github.io/jQuery-contextMenu/demo.html]https://swisnl.github.io/jQuery-contextMenu/demo.html[/url] [url=http://swisnl.github.io/jQuery-contextMenu/demo/on-dom-element.html]http://swisnl.github.io/jQuery-contextMenu/demo/on-dom-element.html[/url] 以上所述是小编给大家介绍的网页中右键功能的实现方法之contextMenu的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部