这是一款基于 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>
为该 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
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!