文章目录

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

2018-01-24 20:36:59

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

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

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

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相关的功能,以求达到更完美的效果。

本文网址:


数据更新时间:2020-07-11