zoukankan      html  css  js  c++  java
  • 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。亦可设置为接受输入的菜单。
  • 相关阅读:
    ActiveX控件开发总结(续)
    Guru of the Week 条款04: 类的构造技巧
    tk
    C++中一个空类的大小为什么是1?
    虚继承
    计算机单位
    Guru of the week:#18 迭代指针.
    kingofark关于学习C++和编程的50个观点
    Guru of the Week 条款06:正确使用const
    Guru of the Week 条款07:编译期的依赖性
  • 原文地址:https://www.cnblogs.com/CinYung/p/6893150.html
Copyright © 2011-2022 走看看