Hướng dẫn tạo jQuery right click context menu

Hướng dẫn tạo jQuery right click context menu

Trong Ví dụ này sẽ hướng chỉ cho các bạn tạo một Context menu. khi các bạn click chuột phải vào một biểu tượng nào đó. sẽ Show ra một menu như (COPY,PASE,CUT,...) khi bạn tạo thành công được Context-Menu sẽ làm cho bạn thuận tiện hơn khi bạn muốn làm một việc gì đó trên trang web của bạn.

 

code css

.test	
{ 	width: 300px;
	height:300px;
	margin: 0px auto;
	background-color:green;
	border: 1px solid #fsdfds;
}

code html

<div class="test box menu-1">
<strong>right click me</strong>	
</div>

code js

$(function () {
	$.contextMenu({
		selector: '.test',
		build: function ($trigger, e) {
			console.log(e);
			return {
				callback: function (key, options) {
					var m = "clicked: " + key;
					console.log(m);
				},
				items: items	
			};
		}
	});	
	var items = {
			"edit": {
				name: "Edit",
				icon: "edit"
			},
			"cut": {
				name: "Cut",
				icon: "cut"
			},
			"copy": {
				name: "Copy",
				icon: "copy"
			},
			"paste": {
				name: "Paste",
				icon: "paste"
			},
			"delete": {
				name: "Delete",
				icon: "delete"
			},
			"sep1": "---------",
			"quit": {
				name: "Quit",
				icon: "quit"
			}	
	};
});

Download:https://mega.co.nz/#!SANxHL5I!deiNdTUQvDalZrk5dcXhG0vs0nJQfQDFkKX8OQL42TE