MouseTrap扩展插件列表

问说网 · 发布于 2015-09-10 · 字数3939 · 浏览 1005 · 评论 0

任何的公共方法可以通过MouseTrap的扩展覆盖,得到新的功能,一些好用的插件列表如下,其中某些扩展让MouseTrap更加强大和完美。

Global bindings

View or Download

This extension allows you to specify keyboard events that will work anywhere including inside textarea/input fields.

Usage looks like:

Mousetrap.bindGlobal('ctrl+s', function() {
    _save();
});

This means that a keyboard event bound using Mousetrap.bind will only work outside of form input fields, but using Moustrap.bindGlobal will work in both places.

If you wanted to create keyboard shortcuts that only work when you are inside a specific textarea you can do that too by creating your own extension.

Bind dictionary

View or Download

This extension overwrites the default bind behavior and allows you to bind multiple combinations in a single bind call.

Usage looks like:

Mousetrap.bind({
    'a': function() { console.log('a'); },
    'b': function() { console.log('b'); }
});

You can optionally pass in keypress, keydown or keyup as a second argument.

Other bind calls work the same way as they do by default.

Pause/unpause

View or Download

This extension allows Mousetrap to be paused and unpaused without having to reset keyboard shortcuts and rebind them.

Usage looks like:

// stop Mousetrap events from firing
Mousetrap.pause();
// allow Mousetrap events to fire again
Mousetrap.unpause();

Record

View or Download

This extension allows you to record keyboard shortcuts from your application. For example if you wanted to let users specify their own keyboard shortcuts for performing actions on your page you could ask them to enter a shortcut.

Usage looks like:

<button onclick="recordSequence()">Record</button>

<script>
    function recordSequence() {
        Mousetrap.record(function(sequence) {
            // sequence is an array like ['ctrl+k', 'c']
            alert('You pressed: ' + sequence.join(' '));
        });
    }
</script>

Using extensions

To use any of these extensions all you have to do is include the javascript on your page after you include Mousetrap.

相关链接

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2015-04-03使用CSS和Photoshop创建可以重复使用的背景图片
  • 2017-01-19用JavaScript实现给出的盒子的序列是否可连为一矩型
  • 2016-12-02FlyJSONP轻量级的跨域AJAX请求插件
  • 2015-08-08使用Python发送和接收Email电子邮件
  • 2016-12-02Response JS创建高性能的支持移动设备的网站
  • 2016-05-16说的太好了!UI设计新手7条法则助你逆袭(一)
  • 2016-05-16圣诞节字体抢先学!一起学习可爱甜美糖果字体
  • 2016-05-283种方法实现网页自动刷新重新加载
  • 发布评论

    为您推荐

    十分钟搞清字符集和字符编码
    问说网 · 发布于 2016-07-15

    十分钟搞清字符集和字符编码

    在介绍字符集之前,我们先了解下为什么要有字符集。我们在计算机屏幕上看到的是实体化的文字,而在计算机存储介质中存放的实际是二进制的比特流。

    用JavaScript实现给出的盒子的序列是否可连为一矩型
    AustenJuliet · 发布于 2017-01-19

    用JavaScript实现给出的盒子的序列是否可连为一矩型

    by cpglkg <script>var arr=[5,10,15];function rect(arr,width){ arr.sort(fun…

    Playground.js基于JavaScript游戏开发框架

    Playground.js是一个基于JavaScript的Web游戏开发框架,主要实现了你可以轻松的访问和控制用户的电脑,比如访问鼠标和键盘、控制声音和精心设计…

    • Playground.js基于JavaScript游戏开发框架
    • Playground.js基于JavaScript游戏开发框架
    • Playground.js基于JavaScript游戏开发框架
    • Playground.js基于JavaScript游戏开发框架
    问说网 · 发布于 2016-03-06 · 浏览 1371 · 评论 0

    超实用!如何打造一个非凡且有趣的响应式设计

    响应式设计的秘诀,是创建一个不论大小尺寸都美观的网站。在点开你的设计软件着手动工之前,你需要考虑很多。这是个额外步骤,最终成品却总能证明它的价值所在。很明显,设…

    • 超实用!如何打造一个非凡且有趣的响应式设计
    • 超实用!如何打造一个非凡且有趣的响应式设计
    • 超实用!如何打造一个非凡且有趣的响应式设计
    • 超实用!如何打造一个非凡且有趣的响应式设计
    WhyetJo · 发布于 2016-05-15 · 浏览 876 · 评论 0

    不看后悔!设计师应该具备的品牌意识

    维护品牌靠的是所有人的努力。对于我们设计师来说,我们确实不是专门做品牌的。但我们可以通过做好本职工作,为品牌建设添砖加瓦。是什么让你与别人不同?就是每一个细小的…

    • 不看后悔!设计师应该具备的品牌意识
    • 不看后悔!设计师应该具备的品牌意识
    • 不看后悔!设计师应该具备的品牌意识
    • 不看后悔!设计师应该具备的品牌意识
    ElinorMark · 发布于 2016-05-17 · 浏览 1033 · 评论 0

    不做加班族!提高工作效率的17个PS技巧

    亲爱的设计师朋友们,还在为做不完设计稿?夜夜加班?没时间陪媳妇而苦恼吗? 相信今天分享的这篇提高工作效率的17个PS技巧文章可以帮助你脱离苦海,远离加班族,抱回…

    • 不做加班族!提高工作效率的17个PS技巧
    • 不做加班族!提高工作效率的17个PS技巧
    • 不做加班族!提高工作效率的17个PS技巧
    • 不做加班族!提高工作效率的17个PS技巧
    HaydnBartholomew · 发布于 2016-05-17 · 浏览 1070 · 评论 0

    简单几招提升你的设计

    UI系列实战第二篇,主要将图层样式的投影和渐变叠加的使用,这一次主要讲PS中图层样式的一些使用技巧,你喜欢或者不喜欢,教程就在这里,不弃不离。

    • 简单几招提升你的设计
    • 简单几招提升你的设计
    • 简单几招提升你的设计
    • 简单几招提升你的设计
    CroninBevis · 发布于 2016-05-17 · 浏览 1171 · 评论 0
    问说网 · 发布于 2016-07-12

    phpStudy让天下没有难配的PHP环境

    该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin+Zend Loader,一次性安装,无须配置即可使用,是非常方便、好用的PHP调试环境…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13134 文章
    495 评论
    2059 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 3020

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2801

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 2911

    图片素材

    关注 图片素材

    文章 29463 · 浏览 2335

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2534

    更多 推荐作者

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 惢碎葬爱

    文章 96 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!