文章目录

jquery contextmenu右键菜单 DOM元素的上下文菜单

许多小伙伴刚接触代码的时候,看到某些效果会觉得很酷、很惊奇。

比如说在普通的网页上面可以右键复制、粘贴。

而在某些网页上面,右键出来的却是完全不同的菜单,而且还有漂亮的样式。

jquery contextmenu右键菜单

其实这些都得感谢jquery contextMenu方法。

下面我们来看一个完整实例,或许你会有用到的地方。

html代码<!doctype html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>无标题文档</title>
  <link rel="stylesheet" href="jquery.contextmenutheme.css" type="text/css"/>
  <link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
  <script src="jquery-1.8.3.min.js"></script>
  <script src="jquery.contextmenu.js" type="text/javascript"></script>
  </head>
  <body>
  <div id="the-node">
         <ul><li><span class="context-menu-one btn btn-neutral">右键点击我1</span></li></ul>
         <ul><li><span class="context-menu-one btn btn-neutral">右键点击我2</span></li></ul>
         <ul><li>右键点击我3</li></ul>
         <ul><li>右键点击我4</li></ul>
  </div>
  <script>
  $(document).ready(function(e) {
     $('#the-node').contextMenu({
         selector: 'li', 
         callback: function(key, options) {
             var m = "点击了: " + key;
             window.console && console.log(m) || alert(m); 
         },
         items: {
             "edit": {name: "编辑", icon: "edit"},
             "cut": {name: "剪切", icon: "cut"},
             "copy": {name: "复制", icon: "copy"},
             "paste": {name: "粘贴", icon: "paste"},
             "delete": {name: "删除", icon: "delete"},
             "sep1": "---------",
             "quit": {name: "退出", icon: function($element, key, item){ return 'context-menu-icon context-menu-icon-quit'; }}
         }
     });
  });
  </script>
  </body>
  </html>

亲自测试一下

你可以根据自己的需求修改jquery contextmenu相关的功能,以求达到更完美的效果。

本文网址:http://www.santii.com/article/195.html


数据更新时间:2018-12-19