最近在做項目中，遇到一個棘手的問題，頁面上有很多功能需要實現，每個功能需要綁定一個按鈕。如果一個功能綁定一個按鈕，那么將會占用頁面很大的空間，而且可能會使頁面變得不美觀。思前想后，決定將所有按鈕做成右鍵菜單里。於是便找到了jQuery-ContextMenu這款插件。使用簡單，效果也很不錯。接下來就為大家簡述一下該如何使用這款插件。
一、引入資源文件
我們需要在html頁面里引入三個資源文件，分別jquery的js文件，jquery-contextMenu的js和css文件，如下所示：
二、將jquery-contextMenu綁定到元素中
我們假設html中待綁定的元素的代碼如下：
確定好綁定的元素后，需要寫入一下js代碼：
其中，selector字段表示待綁定元素的位置信息；items中包括“新增Folder”和“批量創建計划”兩個右擊菜單選項，callback里可以定義菜單選項需要響應的事件。
效果如下圖所示：
三、配合font-awesome使用
當我們需要給右擊菜單綁定多個菜單選項時，每項功能需要對應一個圖標，這個時候，我們可以使用font-awesome圖標來滿足我們的需求。
1）首先，我們在html中引入font-awesome的資源文件font-awesome.min.css
2）然后，在items里的icon字段寫上圖標的標簽，例如：
需要注意的是，引入的font-awesom.min.css的版本必須在4.7.0以上