[jQuery]contextMenu plugin 網頁右鍵功能

套件可以從這個網站下載(含sample)

簡單說就是利用jQuery plugin來實作在網頁上點選右鍵會有自定選單的功能

HTML：

<!-- jquery.contextMenu.css 、jquery.contextMenu.js、jquery.ui.position.js一定要連結進來，jQuery主要部份可以直接用google的外部連結 -->
<div class="context-menu">
	<strong>請按右鍵-轉向其他網頁</strong>
</div>

Javascript：

$(document).ready(function(){
	$(function(){
		$.contextMenu({
			//選擇區塊
			selector: '.context-menu', 
			//callback函數
			callback: function(key) {
				alert(key);
			},
			//Menu
			items: {
				//第一個選項(edit為key值、name為畫面上顯示的字、icon為顯示的圖片，可以從jquery.contextMenu.css改)
				"edit": {
					name: "Edit", icon: "edit",
					//第二層sub-menu
					items: {
						"sub-edit01" : { name : "sub-Edit01"},
						"sub-edit02" : { name : "sub-Edit02"}
					}
				},
				//第二個選項
				"cut": {name: "Cut", icon: "cut"},
				"copy": {name: "Copy", icon: "copy"},
				"paste": {name: "Paste", icon: "paste"},
				"delete": {name: "Delete", icon: "delete"},
				//區格線1
				"sep1": "---------",
				//disabled為true後該選項就不能點選
				"quit": {name: "Quit", icon: "quit" , disabled : true},
				//區格線2
				"sep2": "---------"
			}
		});
	});
});