成都网站建设设计

将想法与焦点和您一起共享

如何分析可添加快捷键组合的JavaScript类库keyboard.js

这篇文章给大家介绍如何理解可添加快捷键组合的JavaScript类库keyboard.js,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

创新互联建站,为您提供重庆网站建设成都网站制作、网站营销推广、网站开发设计,对服务成都餐厅设计等多个行业拥有丰富的网站建设及推广经验。创新互联建站网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈,认真对待每位客户,为客户提供赏心悦目的作品。 与客户共同发展进步,是我们永远的责任!

今天分享一款帮助大家在网站或者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('' + keysString + '').find("b").last().show();                  }               }          }         });  });

HTML

          

Please typing one of site names below: 

     
             
  • gbin1
  •          
  • google
  •          
  • baidu
  •      
     Status bar
 

CSS

body{      background: #ccc;  }   #container{      margin: 0 auto;      background: #202020;      width: 960px;      color: #E3E3E3;      padding: 15px;      margin-top: 0;  }   h3{      font-size:16px;      font-family: Arial;      font-weight: normal;  }   #log b{      position:relative;  }   #info{      background: #303030;      padding: 10px;      font-size: 10px;      color: #888;  }

关于如何理解可添加快捷键组合的JavaScript类库keyboard.js就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


本文题目:如何分析可添加快捷键组合的JavaScript类库keyboard.js
转载来源:http://chengdu.cdxwcx.cn/article/gohpjd.html

其他资讯