jQuery contextMenu使用

钦高峯
2023-12-01

地址: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。亦可设置为接受输入的菜单。

转载于:https://www.cnblogs.com/CinYung/p/6893150.html

 类似资料: