一个稍微复杂的响应键盘菜单选择效果

 一个稍微复杂的响应键盘菜单选择效果

响应键盘 其实并不复杂

在jQuery中所有的鼠标和键盘事件都能方便的被捕捉到

捕捉鼠标点击：

$(document).mousedown(function(e){ // 1 == left; 2 == middle; 3 == right     

switch(e.which){
   case 1: alert("Left");
   break;
   case 2: alert("Middle");
   break;
   case 3: alert("Right");
   }
})

响应键盘按键：

$(document).keydown(function(e){ //用 $(document).keydown(fn)来相应键盘事件
   switch(e.which){
    case 27: hideul();
    break;
    case 38: countup();
    break;
    case 40: countdown();
    break;
    case 39: countrit();   
    break;
    case 37: countlft();
    break;
    case 13: sure();
    break;
    default: return false;   
    }   
   })

前两天写了个下拉菜单点选的小东西 也是由于项目需要   贴一下代码 当然可以直接看 DEMO

http://www.titan24.com/scripts/test/ 里面有个地方没有做好 就是响应键盘的时候 没有实现循环翻转 哪位高人帮着改一下 不胜感激。

//  JavaScript Document By Trance
$(document).ready( function (){ 
var  t = false ;        
var  target;
var  hidinput;
function  cur(ele){   // 标记当前函数 
   ele = $(ele) ?  $(ele):ele;
   ele.addClass( " cur " ).siblings().removeClass( " cur " ); 
   }        
function  showsub(ele){  // 显示子列表
   ele = $(ele) ?  $(ele):ele;
   ele.find( " ul " ).show();
   cur(ele.find( " ul " ).find( " li:first " ));
   ele.siblings( " li " ).find( " ul " ).hide();  
   }

$( " #play " ).find( " span " ).click( 
    function (){  // 点击调出相应列表
     var  _this = $( this );
     var  y , x;
    x = _this.css( " left " );   
     var  _ul = _this.siblings( " ul.sel_ply " );
   
     if ($( " #play span " ).index(_this[ 0 ]) < 4 ){  // 第四个列表开始向上显示
     y =  parseInt(_this.css( " top " )) + parseInt(_this.height()) + 33 + " px " ;      
     _ul.css({top:y,left:x}).show();
     cur(_ul.children( " li:first " ));  // 默认标记第一个 方便响应键盘
     } else {
     y =  parseInt(_this.css( " top " )) - parseInt( 4 + _ul.height()) + " px " ;    
     _ul.css({top:y,left:x}).show(); 
     cur(_ul.children( " li:first " )); 
      // cur(_ul.children("li:last")) //默认标记最后一个 方便响应键盘
     }  
   
    $( " ul.sel_ply " ).not(_ul).hide();   
    _ul.find( " em " ).html(_this.attr( " title " ));
    target = $( this );  // 点哪个就给哪个赋值
    hidinput = $( this ).next( " input " );  // 输入框也同时填上值
    }      
   )

$( " #play " ).find( " li " ).hover(
      function (){  // 划过显示子选项
      cur( this );
      showsub( this );   
      },
      function (){
      $( this ).find( " ul " ).hide();     
      }
     )


$( " #play " ).find( " li li " ).click( function (){  // 选中赋值 同时给隐藏的input赋值
    var  _this = $( this );
    var  aim = _this.html();       
   target.html(aim);
   hidinput.val(aim);
   cur( this );
   hideul();
    // 下面是排它功能 默认不启用
    /* var cli=$("#play li li");
   for(i=0; i<cli.length; i++){
    if(cli.eq(i).html()==aim && cli.eq(i)!==_this){
     cli.eq(i).remove();
     }
    } */
  
})

var  hidelist = function  hideul(){  // 隐藏所有列表 取消选择状态
   $( " #play " ).find( " ul " ).hide();
   $( " #play li " ).removeClass( " cur " );
   }
  
function  countdown(){  // 下选 键盘down键
    var  _cdul = $( " #play ul:visible " ).children( " li.cur " ); 
    var  nxt = _cdul.next( " li " )  ?  _cdul.next( " li " ) : $( " #play ul:visible " ).find( " li:first " );  // 从这里开始选择器不对了
    cur(nxt);
    showsub(nxt); 
   } 
  
function  countup(){  // 上选 键盘up键
    var  prv = $( " #play ul:visible > li.cur " ).prev( " li " )  ?  $( " #play ul:visible > li.cur " ).prev( " li " ) : $( " #play ul:visible " ).find( " li:last " ); 
    cur(prv);
    showsub(prv);
   } 
  
function  countrit(){  // 子菜单下选 键盘 right 键  
    var  _cul = $( " #play ul:visible > li.cur " ).find( " ul " ); 
    var  _cui = _cul.find( " li.cur " );
    var  _cnx = _cui.next( " li " )  ?  _cui.next( " li " ):_cul.find( " li:first " );
   cur(_cnx);
   } 
  
function  countlft(){  // 子菜单上选 键盘 left 键  
    var  _cul = $( " #play ul:visible > li.cur " ).find( " ul " );  
    var  _cui = _cul.find( " li.cur " )  ?  _cul.find( " li.cur " ) : _cul.find( " li:last " );
    var  _cnx = _cui.prev( " li " );
   cur(_cnx);
   }
  
function  sure(){  // 回车确定 赋值
   $( " #play " ).find( " ul:visible li li.cur " ).click();  
   } 

$( " #play " ).mousedown( function (e){     
if (e.which == 3 ){  //  1 == left; 2 == middle; 3 == right 右键隐藏  
   hideul();
   } 
}).hover( function (){  // 离开延时隐藏 1.5秒默认
     if (t){
     clearTimeout(t);
     }    
    }, function (){
     t = setTimeout(hidelist, 1500 );
     }
   )

$(document).keydown( function (e){  // 用 $(document)来相应键盘事件
    switch (e.which){
     case   27 : hideul();
     break ;
     case   38 : countup();
     break ;
     case   40 : countdown();
     break ;
     case   39 : countrit();   
     break ;
     case   37 : countlft();
     break ;
     case   13 : sure();
     break ;
     default :  return   false ;   
    }   
   })


})