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

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

响应键盘 其实并不复杂

在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;   
    }   
   })


})