如图所示点击表单会出现一个弹出层，弹出层内容可以用键盘的上下左右键位控制，我自己写的代码有问题，不管点击键盘的向上键还是向下键都会返回第一个，而不是依次的关系。我用的插件是基于jq的easyui
我写的代码如下
function bindEvents(target){ var opts = $.data(target, 'combo').options; var combo = $.data(target, 'combo').combo; var panel = $.data(target, 'combo').panel; var input = combo.find('.combo-text'); var arrow = combo.find('.combo-arrow'); $(document).unbind('.combo'); combo.unbind('.combo'); panel.unbind('.combo'); input.unbind('.combo'); arrow.unbind('.combo'); if (!opts.disabled){ $(document).bind('mousedown.combo', function(e){ $('div.combo-panel').panel('close'); }); panel.bind('mousedown.combo', function(e){ return false; }); input.bind('focus.combo', function(){ showPanel(target); }).bind('mousedown.combo', function(e){ e.stopPropagation(); }).bind('keyup.combo', function(e){ switch(e.keyCode){ case 37: // left case 38: // up opts.selectPrev.call(target); break; case 39: // right case 40: // down opts.selectNext.call(target); break; case 13: // enter opts.selectCurr.call(target); break; case 27: // esc hidePanel(target); break; default: if (opts.editable){ opts.filter.call(target, $(this).val()); } } return false; }); arrow.bind('click.combo', function(){ input.focus(); }).bind('mouseenter.combo', function(){ $(this).addClass('combo-arrow-hover'); }).bind('mouseleave.combo', function(){ $(this).removeClass('combo-arrow-hover'); }); } } |
天盟APP下载
