利用JS实现键盘控制下拉列表的滚动
2014-05-07 19:55
791 查看
昨晚自己倒腾的。估计这种代码只有自己看得懂了。第一篇博文,纪念一下。
代码插入这个还是比较方便的~~
代码插入这个还是比较方便的~~
var keyHandler=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; var hoverCSS={ color: '#FFF', 'background-color': '#6E9DE4' }; var backCSS={ color:'#000', 'background-color':'#fff' }; if(e && e.keyCode==37){ // 按 左 cu_pos--; $("#hh_"+dest).find('li').eq(cu_pos+1).find('a').css(backCSS); if(cu_pos<0){ cu_pos=$("#hh_"+dest).find('li').length-1; } $("#hh_"+dest).animate({scrollTop:cu_pos*25},100); $("#hh_"+dest).find('li').eq(cu_pos).find('a').css(hoverCSS); } if(e && e.keyCode==38){ // 按 上 //要做的事情 cu_pos--; // console.log("Pressed 上"+cu_pos); $("#hh_"+dest).find('li').eq(cu_pos+1).find('a').css(backCSS); if(cu_pos<0){ cu_pos=$("#hh_"+dest).find('li').length-1; } $("#hh_"+dest).animate({scrollTop:cu_pos*25},100); $("#hh_"+dest).find('li').eq(cu_pos).find('a').css(hoverCSS); } if(e && e.keyCode==39){ // enter 右 cu_pos++; // if(cu_pos>=0){ $("#hh_"+dest).find('li').eq(cu_pos-1).find('a').css(backCSS); //$("#hh_"+dest).css("marginTop","-=12px"); // } if(cu_pos>=$("#hh_"+dest).find('li').length){ cu_pos=0; } $("#hh_"+dest).animate({scrollTop:cu_pos*25},100); $("#hh_"+dest).find('li').eq(cu_pos).find('a').css(hoverCSS); } if(e && e.keyCode==40){ // enter 下 cu_pos++; // console.log("Pressed 下"+cu_pos); // console.log(cu_pos); // console.log($("#hh_"+dest).find('li').length); // if(cu_pos>0){ $("#hh_"+dest).find('li').eq(cu_pos-1).find('a').css(backCSS); // $("#hh_"+dest).css("marginTop","+=12px"); // } if(cu_pos>=$("#hh_"+dest).find('li').length){ cu_pos=0; } $("#hh_"+dest).animate({scrollTop:cu_pos*25},100); $("#hh_"+dest).find('li').eq(cu_pos).find('a').css(hoverCSS); } if(e && e.keyCode==13){ // enter Enter // console.log("Pressed Enter"); // console.log($("#hh_"+dest).find('li').eq(cu_pos).find('a').html()); gets_id('class_'+dest).value=$("#hh_"+dest).find('li').eq(cu_pos).find('a').html(); $("#hh_"+dest).find('li').eq(cu_pos).find('a').css(backCSS); gets_id('hh_'+dest).style.display='none'; document.removeEventListener("mousedown", handler, false); document.removeEventListener("keydown", keyHandler, false); } };
相关文章推荐
- js 实现下拉列表的重复利用
- 利用chosen.js插件实现下拉可搜索多选,控制选择个数,选项框复位,修改下拉选项的功能(附代码)
- 利用JS+Ajax实现下拉列表无刷联动,及其相关
- JS实现控制月末日期的下拉列表
- js 实现下拉列表的重复利用
- 利用js和css实现Bootstrap下拉列表数据过滤
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- 利用JS 实现图片无缝隙的滚动
- 利用AjaxControlToolkit实现百度搜索时的下拉列表提示详细步骤
- ASP.NET中利用JS实现图片滚动
- js控制滚动条缓慢滚动到顶部实现代码
- JS实现支持多选的遍历下拉列表代码
- js如何控制select控件(下拉列表)
- html+js+PHP(使用了smarty模板技术)+mysql实现二级动态下拉列表(select)
- js实现用键盘控制DIV上下左右+放大缩小与变色
- 使用js实现带有停顿效果的图片滚动(按钮控制)
- 原生js实现下拉框功能(支持键盘事件)
- JS+DIV+CSS实现仿表单下拉列表效果
- C# 实现键盘控制DateTimePicker日历控件下拉
- struts中利用ajax实现仿google下拉列表自动补全功能