分享一个用来添加快捷键组合的javascript类库 - keyboard.js
2012-02-08 23:30
567 查看
日期:2012/02/08
在线演示 本地下载
今天分享一款帮助大家在网站或者web应用中添加快捷键组合的类库 - keyboard.js,使用这个类库你可以很方便的捕捉输入键的组合,可以帮助你很好的添加相关快捷键的操作,希望大家喜欢!
字母或者字母组合绑定
支持Callback回调
多语言支持
支持AMD加载,例如 RequireJS
文档完整
效果请参考在线演示
在线演示 本地下载
今天分享一款帮助大家在网站或者web应用中添加快捷键组合的类库 - keyboard.js,使用这个类库你可以很方便的捕捉输入键的组合,可以帮助你很好的添加相关快捷键的操作,希望大家喜欢!
主要特性:
独立类库,当然也可以和其它类库组合使用,例如,jQuery字母或者字母组合绑定
支持Callback回调
多语言支持
支持AMD加载,例如 RequireJS
文档完整
Javascript:
$(document).ready(function(){ var gbin1 = ['g', 'b', 'i', 'n', '1'], google = ['g', 'o', 'o', 'g', 'l', 'e'], baidu = ['b', 'a', 'i', 'd', 'u'], kI = 0; document.addEventListener('keydown', function(){ var keys = KeyboardJS.activeKeys(); if(keys.length) { for(var i = 0; i < keys.length; i += 1) { if(keys[i] === gbin1[kI]) { if(kI < gbin1.length - 1) { kI += 1; } else { $("#info").html("Loading gbin1.com ... ..."); location = "http://www.gbin1.com"; } } else if(keys[i] === google[kI]) { if(kI < gbin1.length - 1) { kI += 1; } else { $("#info").html("Loading gbin1.com ... ..."); location = "http://www.google.com"; } } else if(keys[i] === baidu[kI]) { if(kI < gbin1.length - 1) { kI += 1; } else { $("#info").html("Loading gbin1.com ... ..."); location = "http://www.baidu.com"; } } else{ kI = 0; } var keysString; keysString = keys.join(', '); if(keysString!=' '){ var log=$("#log"); log.append('<b style="display:none;border:1px solid #CCC;background:#000;color:#CCC;padding: 5px 10px;margin:5px">' + keysString + '</b>').find("b").last().show(); } } } }); });
HTML
<div id="container"> <img src="img/logo.jpg"> <h3>Please typing one of site names below: <span id="log" style="position:absolute"></span></h3> <ul> <li>gbin1</li> <li>google</li> <li>baidu</li> </ul> <div id="info">Status bar</div> </div>
效果请参考在线演示
相关文章推荐
- 分享一个用来添加快捷键组合的javascript类库 - keyboard.js
- 分享一个用来添加快捷键组合的javascript类库 - keyboard.js 编辑
- 分享一个超酷的开源html5 canvas互动网络图形效果javascript类库 - sigma.js
- js数组合并(一个数组添加到另一个数组里面)方法
- js中为一个对象添加事件的正确方法
- 分享一个JS做的省市三级联动
- js生成二维码,web页面,移动h5页添加微信qq分享功能
- [js插件]分享一个文章内容信息提示插件Colortip
- 分享一个本人开发的angularjs+bootstrap+Spring+mybatis实现的java web系统项目
- .NET中用弹出窗口添加或修改一个页面,当添加或修改相关内容后按下提交按钮自动刷新页面的JS代码
- 在原生JS的DOM对象和Jquery对象的一个异常分享
- 分享一个介绍8款js框架比较的链接
- 分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
- 分享一个自定义的 console 类,让你不再纠结JS中的调试代码的兼容
- 分享一个基于jQuery,backbone.js和underscore.js的消息提示框架 - Backbone.Notifier
- 分享一个自己写的table表格排序js插件(高效简洁)
- 分享一个百度的接口地址可以用来测试json数据用
- 自己封装的一个JS分享组件
- 分享一个js省市县联动代码
- 【Android Developers Training】 34. 添加一个简单的分享行为(Action)