这是一款基于bootstrap的jquery右键菜单插件。该bootstrap右键菜单使用Bootstrap dropdown组件来制作，并通过tether插件进行定位，具有多级菜单，灵活，响应式等特点。
使用方法
在页面中引入jquery，bootstrap相关文件，font-awesome字体文件，以及jquery右键菜单插件jquery.context-menu.min.js。
<link rel="stylesheet" href="path/to/bootstrap.min.css"><link rel="stylesheet" href="path/to/font-awesome.min.css"><link rel="stylesheet" href="path/to/tether.min.css"><script src="path/to/jquery.min.js"></script><script src="path/to/bootstrap.min.js"></script><script src="path/to/tether.min.js"></script><script src="path/to/jquery.context-menu.min.js"></script> |
CSS样式
为该bootstrap右键菜单添加下面的必要的CSS样式。
.context-menu.dropdown-menu { display: block; left: 0px; opacity: 0; position: absolute; top: 0px; transition: visibility 0s 0.1s, opacity 0.1s linear; visibility: hidden;}.context-menu.dropdown-menu.open { visibility: visible; opacity: 1; transition: opacity 0.1s linear;}.context-menu.dropdown-menu a { cursor: pointer; }.dropdown-submenu .dropdown-toggle:after { content: "\f0da"; display: inline-block; float: right; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; padding-top: 3px; text-rendering: auto; -webkit-font-smoothing: antialiased;}.dropdown-submenu .dropdown-menu { top: 0; left: 100%;}#cnxt-cursor { height: 0px; opacity: 0; position: absolute; visibility: hidden; width: 0px;} |
初始化插件
右键菜单的内容通过js来设置，这样在更换右键菜单时，不需要更改DOM元素，提高插件的灵活度。下面的js代码定义了一个右键菜单。
let _menuItems = [ { type: "title", text: "Modifica" }, { type: "item", icon: "clone", text: "复制", key: "copy", action: _debug }, { type: "item", icon: "scissors", text: "剪切", key: "cut", action: _debug }, { type: "item", icon: "clipboard", text: "粘贴", key: "paste", action: _debug }, { type: "divider" }, { type: "submenu", text: "附件...", items: [ { type: "title", text: "附件..." }, { type: "item", icon: "phone", text: "电话", key: "phone", action: _debug }, { type: "item", icon: "home", text: "联系地址", key: "addresses", action: _debug }, { type: "item", icon: "globe", text: "Browser", key: "browser", action: _debug }, { type: "item", icon: "envelope-o", text: "电子右键", key: "mail", action: _debug }, { type: "item", icon: "calendar", text: "Calendario", key: "calendar", action: _debug }, { type: "item", icon: "clock-o", text: "Orologio", key: "clock", action: _debug }, { type: "item", icon: "calculator", text: "Calcolatrice", key: "calc", action: _debug } ] }, { type: "submenu", text: "Condividi con...", items: [ { type: "title", text: "Condividi con..." }, { type: "item", icon: "google-plus-official", text: "Google+", key: "google_plus", action: _debug }, { type: "item", icon: "facebook-official", text: "Facebook", key: "facebook", action: _debug }, { type: "item", icon: "twitter", text: "Twitter", key: "twitter", action: _debug } ] }, { type: "divider" }, { type: "title", text: "Pagina" }, { type: "item", icon: "refresh", text: "Ricarica", action: function() { window.location.reload(); } }, { type: "item", icon: "home", text: "Torna alla home", action: function() { window.location.href = "/"; } }]; |
在页面DOM元素加载完毕之后，通过下面的方法来初始化该bootstrap右键菜单插件。
$(window).contextMenu({ items: _menuItems }); |
该bootstrap右键菜单插件的github地址为：https://github.com/Byloth/jQuery.ContextMenu.js
