这是一款基于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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!