网页上需要有个右键显示菜单的功能，无奈自带的UI上没有这个功能。
先准备自己写个的，但写得太丑了，写不下去^,^，只好作罢。
网上搜了个简单Demo，做了一些修改，去掉了一些没必要的东西（高深的看不懂）
想着留着以后肯定还会用得着的，既然有轮子，又何必再造轮子
效果图：
html代码部分：
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-8">
<title>右键菜单Demo</title>
<link rel="stylesheet" type="text/css" href="css/context.standalone.css">
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/context.js"></script>
</head>
<body>
<div id="notDynamic" style="position: absolute; left: 0; height: 100%; width: 100%; background: yellow;">
点右键的DIV
</div>
<script>
test_menu2 = [{
header: '右鍵菜单'
},
{
icon: 'glyphicon-plus',
text: '添加',
action: function(e, selector) {
alert('Create clicked on ' + selector.prop("tagName") + ":" + selector.attr("id"));
}
},
{
icon: 'glyphicon-edit',
text: '编辑',
action: function(e, selector) {
alert('Edit clicked on ' + selector.prop("tagName") + ":" + selector.attr("id"));
}
},
{
icon: 'glyphicon-list-alt',
text: '更多',
subMenu: [{
text: '文本',
action: function(e, selector) {
alert('Text clicked on ' + selector.prop("tagName") + ":" + selector.attr("id"));
}
},{
text: '文本',
action: function(e, selector) {
alert('Text clicked on ' + selector.prop("tagName") + ":" + selector.attr("id"));
}
}]
}
];
context.init({
preventDoubleContext: false
});
//在DIV上调用右键菜单
context.attach('#notDynamic', test_menu2);
</script>
</body>
</html>
js代码部分：
context = (function() {
var options = {
fadeSpeed: 200,
filter: function($obj) {
// Modify $obj, Do not return
},
preventDoubleContext: true,
compress: true//紧缩
};
function initialize(opts) {
options = $.extend({}, options, opts);
$(document).on('click', function() {
$('.dropdown-context').fadeOut(options.fadeSpeed, function() {
$('.dropdown-context').css({
display: ''
}).find('.drop-left').removeClass('drop-left');
});
});
if(options.preventDoubleContext) {
$(document).on('contextmenu', '.dropdown-context', function(e) {
e.preventDefault();
});
}
$(document).on('mouseenter', '.dropdown-submenu', function() {
var $sub = $(this).find('.dropdown-context-sub:first'),
subWidth = $sub.width(),
subLeft = $sub.offset().left,
collision = (subWidth + subLeft) > window.innerWidth;
if(collision) {
$sub.addClass('drop-left');
}
});
}
function updateOptions(opts) {
options = $.extend({}, options, opts);
}
function buildMenu(data, id, subMenu) {
var subClass = (subMenu) ? ' dropdown-context-sub' : '',
compressed = options.compress ? ' compressed-context' : '',
$menu = $('<ul class="dropdown-menu dropdown-context' + subClass + compressed + '" id="dropdown-' + id + '"></ul>');
return buildMenuItems($menu, data, id, subMenu);
}
function buildMenuItems($menu, data, id, subMenu, addDynamicTag) {
var linkTarget = '';
for(var i = 0; i < data.length; i++) {
if(typeof data[i].divider !== 'undefined') {
var divider = '<li class="divider';
divider += (addDynamicTag) ? ' dynamic-menu-item' : '';
divider += '"></li>';
$menu.append(divider);
} else if(typeof data[i].header !== 'undefined') {
var header = '<li class="nav-header';
header += (addDynamicTag) ? ' dynamic-menu-item' : '';
header += '">' + data[i].header + '</li>';
$menu.append(header);
} else if(typeof data[i].menu_item_src !== 'undefined') {
var funcName;
if(typeof data[i].menu_item_src === 'function') {
if(data[i].menu_item_src.name === "") { // The function is declared like "foo = function() {}"
for(var globalVar in window) {
if(data[i].menu_item_src == window[globalVar]) {
funcName = globalVar;
break;
}
}
} else {
funcName = data[i].menu_item_src.name;
}
} else {
funcName = data[i].menu_item_src;
}
$menu.append('<li class="dynamic-menu-src" data-src="' + funcName + '"></li>');
} else {
if(typeof data[i].href == 'undefined') {
data[i].href = '#';
}
if(typeof data[i].target !== 'undefined') {
linkTarget = ' target="' + data[i].target + '"';
}
if(typeof data[i].subMenu !== 'undefined') {
var sub_menu = '<li class="dropdown-submenu';
sub_menu += (addDynamicTag) ? ' dynamic-menu-item' : '';
sub_menu += '"><a tabindex="-1" href="' + data[i].href + '">' + data[i].text + '</a></li>'
$sub = (sub_menu);
} else {
var element = '<li';
element += (addDynamicTag) ? ' class="dynamic-menu-item"' : '';
element += '><a tabindex="-1" href="' + data[i].href + '"' + linkTarget + '>';
if(typeof data[i].icon !== 'undefined')
element += '<span class="glyphicon ' + data[i].icon + '"></span> ';
element += data[i].text + '</a></li>';
$sub = $(element);
}
if(typeof data[i].action !== 'undefined') {
$action = data[i].action;
$sub
.find('a')
.addClass('context-event')
.on('click', createCallback($action));
}
$menu.append($sub);
if(typeof data[i].subMenu != 'undefined') {
var subMenuData = buildMenu(data[i].subMenu, id, true);
$menu.find('li:last').append(subMenuData);
}
}
if(typeof options.filter == 'function') {
options.filter($menu.find('li:last'));
}
}
return $menu;
}
function addContext(selector, data) {
if(typeof data.id !== 'undefined' && typeof data.data !== 'undefined') {
var id = data.id;
$menu = $('body').find('#dropdown-' + id)[0];
if(typeof $menu === 'undefined') {
$menu = buildMenu(data.data, id);
$('body').append($menu);
}
} else {
var d = new Date(),
id = d.getTime(),
$menu = buildMenu(data, id);
$('body').append($menu);
}
$(selector).on('contextmenu', function(e) {
e.preventDefault();
e.stopPropagation();
currentContextSelector = $(this);
$('.dropdown-context:not(.dropdown-context-sub)').hide();
$dd = $('#dropdown-' + id);
$dd.find('.dynamic-menu-item').remove(); // Destroy any old dynamic menu items
$dd.find('.dynamic-menu-src').each(function(idx, element) {
var menuItems = window[$(element).data('src')]($(selector));
$parentMenu = $(element).closest('.dropdown-menu.dropdown-context');
$parentMenu = buildMenuItems($parentMenu, menuItems, id, undefined, true);
});
$dd.addClass('dropdown-context-sub').css({
top: e.pageY + 10,
left: e.pageX - 13
}).fadeIn(options.fadeSpeed);
});
}
function destroyContext(selector) {
$(document).off('contextmenu', selector).off('click', '.context-event');
}
return {
init: initialize,
settings: updateOptions,
attach: addContext,
destroy: destroyContext
};
})();
var createCallback = function(func) {
return function(event) {
func(event, currentContextSelector)
};
}
currentContextSelector = undefined;css代码部分：
/**
* ContextJS Styles
* For use WITHOUT Twitters Bootstrap CSS
*/
.nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: 20px;
color: #999;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-transform: uppercase;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
text-align:left;
}
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu .divider {
*width: 100%;
height: 1px;
margin: 9px 1px;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
.dropdown-menu a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #333333;
white-space: nowrap;
text-decoration: none;
}
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.dropdown-menu .active > a, .dropdown-menu .active > a:hover {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
background-color: #0081c2;
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-repeat: repeat-x;
outline: 0;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.dropdown-menu .disabled > a, .dropdown-menu .disabled > a:hover {
color: #999999;
}
.dropdown-menu .disabled > a:hover {
text-decoration: none;
cursor: default;
background-color: transparent;
}
.open {
*z-index: 1000;
}
.open > .dropdown-menu {
display: block;
}
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
border-top: 0;
border-bottom: 4px solid #000000;
content: "\2191";
}
.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu > .dropdown-menu.drop-left{
left:-100%;
}
.dropdown-submenu:hover .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
float: right;
width: 0;
height: 0;
margin-top: 5px;
margin-right: -10px;
border-color: transparent;
border-left-color: #cccccc;
border-style: solid;
border-width: 5px 0 5px 5px;
content: " ";
}
.dropdown-submenu:hover > a:after {
border-left-color: #ffffff;
}
.dropdown .dropdown-menu .nav-header {
padding-right: 20px;
padding-left: 20px;
}
/**
* Context Styles
*/
.dropdown-context .nav-header {
cursor: default;
}
.dropdown-context:before, .dropdown-context-up:before, .dropdown-context-left:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-context:after, .dropdown-context-up:after, .dropdown-context-left:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
.dropdown-context-up:before, .dropdown-context-up:after {
top: auto;
bottom: -7px;
z-index: 9999;
}
.dropdown-context-up:before {
border-right: 7px solid transparent;
border-top: 7px solid #ccc;
border-bottom: none;
border-left: 7px solid transparent;
}
.dropdown-context-up:after {
border-right: 6px solid transparent;
border-top: 6px solid #ffffff;
border-left: 6px solid transparent;
border-bottom: none;
}
.dropdown-context-left:before {
left: auto;
right: 9px;
}
.dropdown-context-left:after {
left: auto;
right: 9px;
}
.dropdown-context-sub:before, .dropdown-context-sub:after {
display: none;
}
.dropdown-context .dropdown-submenu:hover .dropdown-menu {
display: none;
}
.dropdown-context .dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.compressed-context a{
padding-left: 14px;
padding-top: 0;
padding-bottom: 0;
font-size: 13px;
}
.compressed-context .divider{
margin: 5px 1px;
}
.compressed-context .nav-header{
padding:1px 13px;
}
.dynamic-menu-src {
display: none;
}
扫一扫
632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
