深度优先

这个家伙好懒，除了文章什么都没留下

0%

【html】鼠标右键菜单

发表于 分类于
本文字数： 15k 阅读时长 ≈ 13 分钟

网页上需要有个右键显示菜单的功能，无奈自带的UI上没有这个功能。

先准备自己写个的，但写得太丑了，写不下去^,^，只好作罢。

网上搜了个简单Demo，做了一些修改，去掉了一些没必要的东西（高深的看不懂）

想着留着以后肯定还会用得着的，既然有轮子，又何必再造轮子

效果图：

html代码部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<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代码部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
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代码部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
 /**
 * 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;
}