## 7.6.1.快速使用 :id=start
```javascript
layui.use(['contextMenu'], function () {
var contextMenu = layui.contextMenu;
// 重寫整個頁面右鍵菜單
contextMenu.bind('html', [{
icon: 'layui-icon layui-icon-snowflake',
name: '菜單一',
click: function (e, event) {
// 通過$(event.currentTarget)可獲取事件觸發的元素
alert('點擊了菜單一');
}
}, {
name: '菜單二',
click: function (e) {
alert('點擊了菜單二');
}
}]);
});
```
- 參數一： 綁定元素；
- 參數二：菜單數組；
菜單數組可支持無限極：
```javascript
[{
icon: 'xxxxx',
name: '菜單三',
subs: [{
icon: 'xxxxx',
name: '子菜單一',
click: function (e, event) {
alert('點擊了子菜單一');
}
}]
}]
```
- icon：   圖標
- name：   菜單名
- click：   點擊事件
- subs：   子菜單(支持無限極)
!> click事件里面的e是右鍵菜單的事件對象，event才是綁定的目標元素的事件對象
## 7.6.2.自定義使用 :id=div
```javascript
// 用于點擊事件
$('#btn').click(function (e) {
var x = $(this).offset().left;
var y = $(this).offset().top + $(this).outerHeight();
contextMenu.show([{
name: '按鈕菜單一',
click: function () {
}
}], x, y, e);
e.preventDefault();
e.stopPropagation();
});
```
你可以自己綁定事件，通過show方法顯示出來，contextMenu.show(item, x, y, e)方法參數說明：
- 參數一： 菜單數組
- 參數二： x坐標；
- 參數三： y坐標；
- 參數四： e
## 7.6.3.動態元素綁定 :id=show
對于動態生成的元素可以使用事件委托的方式來綁定：
```javascript
// 對.btn元素綁定鼠標右鍵
$ (document). bind('contextmenu', '.btn', function (e) {
contextMenu.show([{
icon: 'layui-icon layui-icon-set',
name: '刪除',
click: function (e, event) {
layer.msg('點擊了刪除');
}
}],e. clientX, e. clientY, e);
return false;
});
```
你需要自己寫contextmenu事件綁定，然后使用contextMenu的show方法顯示出來。
