一、基本介紹
1，插件說明
（1）contextMenu 是一個專門用於 Web 應用的右鍵菜單插件。
（2）與一般的菜單插件不同，contextMenu 不需要將其自身綁定到觸發對象上。這就使得我們可以隨時注入和刪除觸發器，而不必重新初始化或更新 contextMenu。
（3）contextMenu 可以根據需要創建菜單，即根據觸發元素的不同而不同。同時還支持動態創建上下文菜單。
（2）與一般的菜單插件不同，contextMenu 不需要將其自身綁定到觸發對象上。這就使得我們可以隨時注入和刪除觸發器，而不必重新初始化或更新 contextMenu。
（3）contextMenu 可以根據需要創建菜單，即根據觸發元素的不同而不同。同時還支持動態創建上下文菜單。
- 多種上下文菜單觸發方式：右鍵單擊、左鍵單擊、鼠標懸停、自定義觸發事件
- 在觸發對象添加或移除的時候，委托處理事件不需要重新初始化
- 按需動態創建菜單
- 支持命令圖標（可選）
- 支持多種菜單輸入元素：text, textarea, checkbox, radio, select
- 支持自定義 html 元素
- 支持顯示/隱藏回調來更新命令的狀態
- 即使有數百個觸發對象也只占用很小的內存
- 自動調整菜單的位置以適應窗口
- 支持啟用/禁用命令
- 支持嵌套子菜單
- 支持全鍵盤互動
- 支持 HTML5<menu>
- 支持通過 CSS 設置樣式
3，安裝配置
- 使用 contextMenu 要引入 jquery.contextMenu.js 和 jquery.contextMenu.css
- 同時由於 contextMenu 依賴 jQuery（必須）和 jQuery UI position（非必須，但還是推薦使用），還必須將這兩個引入進來。
|
1
2
3
4
|
<
script
src
=
"jquery-3.1.1.js"
charset
=
"utf-8"
></
script
>
<
script
src
=
"contextMenu/jquery.ui.position.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"contextMenu/jquery.contextMenu.js"
type
=
"text/javascript"
></
script
>
<
link
href
=
"contextMenu/jquery.contextMenu.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
|
二，基本用法
1，在單一的元素上添加菜單
（1）效果圖- 我們在“按鈕1”上綁定一個菜單，右鍵點擊即可彈出菜單。
- 點擊菜單項后菜單消失，同時在控制台中輸出對應菜單項的命令。
（2）樣例代碼
注意：
本樣例中右鍵菜單的觸發元素是 button 按鈕，它在頁面初始化時就已經在那里了。
但即使我們右鍵菜單先初始化，后面再在頁面上動態創建對應的觸發元素也是沒有問題的。
本樣例中右鍵菜單的觸發元素是 button 按鈕，它在頁面初始化時就已經在那里了。
但即使我們右鍵菜單先初始化，后面再在頁面上動態創建對應的觸發元素也是沒有問題的。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<title></title>
<script src=
"jquery-3.1.1.js"
charset=
"utf-8"
></script>
<script src=
"contextMenu/jquery.ui.position.min.js"
type=
"text/javascript"
></script>
<script src=
"contextMenu/jquery.contextMenu.js"
type=
"text/javascript"
></script>
<link href=
"contextMenu/jquery.contextMenu.css"
rel=
"stylesheet"
type=
"text/css"
/>
</head>
<body>
<button class=
"context-menu-one"
>按鈕1</button>
<script type=
"text/javascript"
>
$(
function
() {
//初始化菜單
$.contextMenu({
selector:
'.context-menu-one'
,
callback:
function
(key, options) {
console.log(
"點擊了："
+ key);
},
items: {
"edit"
: {name:
"編輯"
, icon:
"edit"
},
"cut"
: {name:
"剪切"
, icon:
"cut"
},
"copy"
: {name:
"復制"
, icon:
"copy"
},
"paste"
: {name:
"粘貼"
, icon:
"paste"
},
"delete"
: {name:
"刪除"
, icon:
"delete"
},
"sep1"
:
"---------"
,
"quit"
: {name:
"退出"
, icon:
function
(){
return
'context-menu-icon context-menu-icon-quit'
;
}}
}
});
});
</script>
</body>
</html>
|
2，在多個元素上添加菜單
（1）效果圖
這個樣例同上面的區別是讓頁面上所有的 li 元素都使用同一個菜單，即右鍵點擊任意一個 li 元素都會顯示菜單。
同時點擊菜單項后，控制台中除了會輸出菜單命令，還會輸出對應的 li 元素的文本信息。
（2）樣例代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<ul>
<li><button>按鈕1</button></li>
<li><button>按鈕2</button></li>
<li>按鈕3</li>
<li>按鈕4</li>
</ul>
<script type=
"text/javascript"
>
$(
function
() {
//初始化菜單
$.contextMenu({
selector:
'li'
,
callback:
function
(key, options) {
console.log(
"點擊了："
+ key);
console.log(
"來源："
+ $(
this
).text());
},
items: {
"edit"
: {name:
"編輯"
, icon:
"edit"
},
"cut"
: {name:
"剪切"
, icon:
"cut"
},
"copy"
: {name:
"復制"
, icon:
"copy"
},
"paste"
: {name:
"粘貼"
, icon:
"paste"
},
"delete"
: {name:
"刪除"
, icon:
"delete"
},
"sep1"
:
"---------"
,
"quit"
: {name:
"退出"
, icon:
function
(){
return
'context-menu-icon context-menu-icon-quit'
;
}}
}
});
});
</script>
|
三、子菜單
items 節點里還可以嵌套配置，contextMenu 便會自動生成相應的子菜單。
1，效果圖
下面我們創建一個擁有三級子菜單的菜單。
2，樣例代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<button
class
=
"context-menu-one"
>按鈕1</button>
<script type=
"text/javascript"
>
$(function() {
//初始化菜單
$.contextMenu({
selector:
'.context-menu-one'
,
callback: function(key, options) {
console.log(
"點擊了："
+ key);
},
items: {
"edit"
: {name:
"編輯"
, icon:
"edit"
},
"cut"
: {name:
"剪切"
, icon:
"cut"
},
"sep1"
:
"---------"
,
"fold1"
: {
name:
"布局"
,
items: {
"fold1-key1"
: {name:
"相對定位"
},
"fold1-key2"
: {name:
"絕對定位定位"
},
"fold2"
: {
name:
"對齊"
,
items: {
"fold2-key1"
: {name:
"左對齊"
},
"fold2-key2"
: {name:
"右對齊"
},
"fold2-key3"
: {name:
"居中顯示"
}
}
},
}
},
}
});
});
</script>
|
四、給菜單項單獨配置回調方法
我們知道所有的菜單項點擊后都會觸發配置的 callback 方法。其實每個菜單項也可以配置自己的 callback 方法。當然這個菜單項如果一旦有自定的 callback 方法，點擊后是不會再調用外面那個 callback 方法了。
1，效果圖
我們給“編輯”項添加了個單獨的 callback 方法，可以發現點擊后觸發的方法和其它兩個菜單項不一樣。
2，樣例代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<button class=
"context-menu-one"
>按鈕1</button>
<script type=
"text/javascript"
>
$(
function
() {
//初始化菜單
$.contextMenu({
selector:
'.context-menu-one'
,
callback:
function
(key, options) {
console.log(
"點擊了："
+ key);
},
items: {
"edit"
: {
name:
"編輯"
,
icon:
"edit"
,
callback:
function
(itemKey, opt, rootMenu, originalEvent) {
console.log(
"“編輯”菜單項被點擊了"
);
}
},
"cut"
: {name:
"剪切"
, icon:
"cut"
},
"copy"
: {name:
"復制"
, icon:
"copy"
},
}
});
});
</script>
|
原文出自：www.hangge.com 轉載請保留原文鏈接：https://www.hangge.com/blog/cache/detail_1821.html