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>