套件可以從這個網站下載(含sample)
簡單說就是利用jQuery plugin來實作在網頁上點選右鍵會有自定選單的功能
HTML：
1 | <!-- jquery.contextMenu.css 、jquery.contextMenu.js、jquery.ui.position.js一定要連結進來，jQuery主要部份可以直接用google的外部連結 --> |
2 | <div class="context-menu"> |
3 | <strong>請按右鍵-轉向其他網頁</strong> |
4 | </div> |
Javascript：
1 | $(document).ready(function(){ |
2 | $(function(){ |
3 | $.contextMenu({ |
4 | //選擇區塊 |
5 | selector: '.context-menu', |
6 | //callback函數 |
7 | callback: function(key) { |
8 | alert(key); |
9 | }, |
10 | //Menu |
11 | items: { |
12 | //第一個選項(edit為key值、name為畫面上顯示的字、icon為顯示的圖片，可以從jquery.contextMenu.css改) |
13 | "edit": { |
14 | name: "Edit", icon: "edit", |
15 | //第二層sub-menu |
16 | items: { |
17 | "sub-edit01" : { name : "sub-Edit01"}, |
18 | "sub-edit02" : { name : "sub-Edit02"} |
19 | } |
20 | }, |
21 | //第二個選項 |
22 | "cut": {name: "Cut", icon: "cut"}, |
23 | "copy": {name: "Copy", icon: "copy"}, |
24 | "paste": {name: "Paste", icon: "paste"}, |
25 | "delete": {name: "Delete", icon: "delete"}, |
26 | //區格線1 |
27 | "sep1": "---------", |
28 | //disabled為true後該選項就不能點選 |
29 | "quit": {name: "Quit", icon: "quit" , disabled : true}, |
30 | //區格線2 |
31 | "sep2": "---------" |
32 | } |
33 | }); |
34 | }); |
35 | }); |