当前位置: > > > jQuery - 右键菜单插件contextMenu使用详解6(菜单输入组件、控件自定义)

jQuery - 右键菜单插件contextMenu使用详解6(菜单输入组件、控件自定义)

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

每个菜单项除了可以显示文字外,还可以通过 type 属性配置成各种输入控件,具体可用类型如下:
  • text:单行文本输入框
  • textarea:多行文本输入框(可指定高度)
  • checkbox:复选框
  • radio:单选框
  • select:下拉框

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>
评论0