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

Bài Viết Liên Quan

Messsage

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)