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

x

Xin chào! Hãy ủng hộ chúng tôi bằng cách nhấp vào quảng cáo trên trang web. Việc này giúp chúng tôi có kinh phí để duy trì và phát triển website ngày một tốt hơn. (Hello! Please support us by clicking on the ads on this site. Your clicks provide us with the funds needed to maintain and improve the website continuously.)

Ngoài ra, hãy đăng ký kênh YouTube của chúng tôi để không bỏ lỡ những nội dung hữu ích! (Also, subscribe to our YouTube channel to stay updated with valuable content!)

Đăng Ký