十四、插件自带的菜单项控件

1，效果图

2，样例代码

<button class="context-menu-one">按钮1</button>

<script type="text/javascript">
$(function(){
    $.contextMenu({
        selector: '.context-menu-one',
        items: {
            // <input type="text">
            name: {
                name: "单行文本输入框",
                type: 'text',
                value: "hangge.com",
                events: {
                    keyup: function(e) {
                        // 打印出每次按下键的keyCode
                        window.console && console.log('key: '+ e.keyCode);
                    }
                }
            },
            sep1: "---------",
            // <input type="checkbox">
            yesno: {
                name: "复选框",
                type: 'checkbox',
                selected: true
            },
            sep2: "---------",
            // <input type="radio">
            radio1: {
                name: "单选框1",
                type: 'radio',
                radio: 'radio',
                value: '1'
            },
            radio2: {
                name: "单选框2",
                type: 'radio',
                radio: 'radio',
                value: '2',
                selected: true
            },
            radio3: {
                name: "单选框3",
                type: 'radio',
                radio: 'radio',
                value: '3'
            },
            radio4: {
                name: "单选框4",
                type: 'radio',
                radio: 'radio',
                value: '4',
                disabled: true
            },
            sep3: "---------",
            // <select>
            select: {
                name: "下拉框",
                type: 'select',
                options: {1: 'one', 2: 'two', 3: 'three'},
                selected: 2
            },
            // <textarea>
            area1: {
                name: "多行文本输入框",
                type: 'textarea',
                value: "欢迎访问 hangge.com",

            },
            area2: {
                name: "多行文本输入框（指定高度）",
                type: 'textarea',
                value: "欢迎访问 hangge.com",
                height: 40
            }
        },
        events: {
            show: function(opt) {
                //从data属性中获取输入控件数据
                if(this.data("inputData") != null) {
                  $.contextMenu.setInputValues(opt, this.data("inputData"));
                }
            },
            hide: function(opt) {
                //将输入控件当前值保存到data属性中
                //保存形式为：{name: "foo", yesno: true, radio: "3"}
                this.data("inputData", $.contextMenu.getInputValues(opt));
                console.log(this.data("inputData"));
            }
        }
    });
});
</script>

十五、自定义菜单项控件

1，效果图

2，样例代码

<button class="context-menu-one">按钮1</button>

<script type="text/javascript">
    //自定义一个color控件
    $.contextMenu.types.color = function(item, opt, root) {
       // this === item.$node
       $('<span>选择颜色<ul>'
           + '<li class="label1">红色</li>'
           + '<li class="label2">绿色</li>'
           + '<li class="label3">蓝色</li>'
           + '<li class="label4">黄色</li>'
         + '</ul></span>')
           .appendTo(this)
           .on('click', 'li', function() {
               console.log('选择了：' + $(this).text());
               // 隐藏菜单
               root.$menu.trigger('contextmenu:hide');
           });

       this.addClass('labels').on('contextmenu:focus', function(e) {
           // setup some awesome stuff
       }).on('contextmenu:blur', function(e) {
           // tear down whatever you did
       }).on('keydown', function(e) {
           // some funky key handling, maybe?
       });
    };

    //初始化菜单（这里我们用到了自定义的color控件）
    $.contextMenu({
       selector: '.context-menu-one',
       callback: function(key, options, rootMenu, originalEvent) {
           console.log("点击了：" + key);
       },
       items: {
           edit: {name: "编辑", icon: "edit"},
           color: {type: "color"},
       }
    });
</script>

<style>
  .labels > span > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
    float: none;
  }
  .labels > span > ul > li {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #CCC;
    overflow: hidden;
    text-indent: -2000px;
  }
  .labels > span > ul > li.selected,
  .labels > span > ul > li:hover { border: 1px solid #000; }
  .labels > span > ul > li + li { margin-left: 5px; }
  .labels > span > ul > li.label1 { background: red; }
  .labels > span > ul > li.label2 { background: green; }
  .labels > span > ul > li.label3 { background: blue; }
  .labels > span > ul > li.label4 { background: yellow; }
</style>