这是一款基于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右键菜单插件。
