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

响应键盘其实并不复杂

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

})

posted on 2009-04-23 15:40 trance 阅读(394) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

trance

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

导航

公告