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

Hòa Nguyễn Coder

Published in Web Developer · Đã đăng vào tháng 5 20, 2014 10:00 AM

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

Nếu bạn thấy đem lại kiến thức bổ ích, hãy Click xem quảng cáo trên trang website của mình nhé! 🚀