jQuery contextMenu使用

地址：jQuery contextMenu

需要以下文件：

• jquery.contextMenu.css
• jquery.min.css
• jquery.contextMenu.js
• jquery.ui.position.js

PS：第一次使用的時，是給spread.sheet添加右鍵菜單，頁面被多個spread充滿，因為沒有添加jquery.contextMenu.css，一度無法顯示右鍵菜單。直到使用空白頁面測試時，才發現是樣式的問題。

簡單使用：

        $.contextMenu({
            selector: '.context-menu-one', 
            callback: function(key, options) {
                var m = "clicked: " + key;
                window.console && console.log(m) || alert(m); 
            },
            items: {
                "edit": {name: "Edit", icon: "edit"},
                "cut": {name: "Cut", icon: "cut"},
               copy: {name: "Copy", icon: "copy"},
                "paste": {name: "Paste", icon: "paste"},
                "delete": {name: "Delete", icon: "delete"},
                "sep1": "---------",
                "quit": {name: "Quit", icon: function(){
                    return 'context-menu-icon context-menu-icon-quit';
                }}
            }
        });

上述代碼引用了jQuery contextMenu的示例，即，使用 $.contextMenu(options) 的方式初始化，具體可見options。

其中：

• selector: jQuery選擇器，必須有
• callback：為點擊右鍵菜單后的統一的回調
• items: 為具體菜單，其中item設置自己的callback

其他常用：

1. 控制是否創建右鍵菜單，創建前操作等，可設置options.build，例如，設置Spread.Sheet的右鍵菜單時：
   1. 點擊4個不同區域（viewport、colHeader、rowHeader、corner）時，是否創建右鍵菜單
   2. 創建右鍵菜單前，設置Spread.Sheet的選中區域（Spread.Sheet只有左鍵單擊時，主動修改選中區域）
2. 菜單是否可見、可用等，可設置options.items。亦可設置為接受輸入的菜單。