插件说明

contextMenu 是一个专门用于 Web 应用的右键菜单插件。

GitHub 主页:https://github.com/swisnl/jQuery-contextMenu

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>contextMenu</title> 
<!--contextMenu 依赖 jQuery--> 
<script src="jquery-3.1.1.js" charset="utf-8"></script> 
<!--使用 contextMenu 要引入 jquery.contextMenu.js 和 jquery.contextMenu.css--> <link href="contextMenu/jquery.contextMenu.css" rel="stylesheet" type="text/css" /> <script src="contextMenu/jquery.ui.position.min.js" type="text/javascript"></script> <script src="contextMenu/jquery.contextMenu.js" type="text/javascript"></script>
</head>
<body>
<button class="context-menu-one">按钮1</button>
<script type="text/javascript">
$(function() {
//初始化菜单
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
console.log("点击了:" + key);
},
items: {
"edit": {name: "编辑", icon: "edit"},
"delete": {name: "删除", icon: "delete"},
"sep1": "---------",
"quit": {name: "退出", icon: function(){
return 'context-menu-icon context-menu-icon-quit';
}}
}
});
});
</script>
</body>
</html>

1

 

作者 admin

百度广告效果展示