Mousetrap-サイトにホットキーを簡単かつ簡単に追加できるjavascriptライブラリ。 しかし、私はすでに私にとても夢中になっていたので、Ruby on Railsプロジェクトにそれを簡単で楽しいものにすることを決めました。 つまり、レール用のrubyライブラリでラップします。 これがgem mousetrap-railsの由来です 。
接続
プロジェクトでライブラリを使用するに
Gemfile
、アプリケーションの
Gemfile
行を追加します
gem 'mousetrap-rails'
そして実行する
$ bundle install
次に、ジェネレーターを実行します。これにより、keybindings.js.coffeeの使用例を含むcoffescriptファイルが作成され、jsアプリケーションマニフェストに
//= require mousetrap
を追加してライブラリがAsset Pipelineに接続されます。
$ rails generate mousetrap:install
使用する
作成されたファイルにすでに含まれているjavascript関数を使用して、ボックスから
data-keybinding
属性（
data-keybinding
）を使用してページナビゲーションを作成できます。
たとえば、ビューコード
= link_to 'Homepage', root_path, data: { keybinding: 'h' }
'h'
クリックしてホームページに移動できます
これにより、
'u'
ボタンを使用して
Username
入力フィールドにフォーカスを切り替えることができます
= text_field_tag 'Username', nil, data: { keybinding: 'u' }
もちろん、ライブラリの機能はナビゲーションだけに限定されず、任意のjavascript関数を呼び出すことができます。 さらに、1つのボタンだけでなく、キーボードコンボ全体でも彼女の電話を切ることができます。
// Mousetrap.bind '4', -> alert '4 pressed!' Mousetrap.bind 'x', (-> alert 'x pressed!'), 'keyup' // Mousetrap.bind 'command+shift+k', -> alert 'command+shift+k pressed!' false Mousetrap.bind ['command+k', 'ctrl+k'], -> alert 'command+k or ctrl+k pressed!' false // Mousetrap.bind 'g i', -> console.log 'gi sequence pressed!' Mousetrap.bind '* a', -> console.log '* a sequence pressed!' // - Mousetrap.bind 'up up down down left right left right ba enter', -> console.log 'You WIN!'
プロジェクトページでMousetrapの機能の詳細をご覧ください。
結論として
Mousetrapはうまく機能しているので、このgemをさらに開発していきます。 私は建設的なフィードバックを喜んでいます 。
リンク（それらがない場合）
©Photo by macrj