像 Gmail 本身就提供了蠻多讓使用者能快速使用的熱鍵功能,讓操作網頁就像是操作 Windows 應用程式一樣。現在有了 HotKeys 就能快速的幫網頁加上熱鍵的功能。透過這樣的熱鍵功能也能運用在網頁遊戲上唷!
HotKeys 目前僅支援 keydown、keyup 及 keypress 等事件。
套件名稱:HotKeys
套件版本:0.8
作者網站:http://code.google.com/p/js-hotkeys
套件網址:http://plugins.jquery.com/project/hotkeys
發佈日期:2010-02-22
檔案大小:3.0 KB
檔案下載:jquery.hotkeys.js
方法說明:
檢視原始碼 JavaScript
1 2 3 4 5 | // 替指定的熱鍵加上指定的事件; options 可以只有熱鍵值或是進階的觸發參數, 例如: {combi:'Ctrl+x', disableInInput: true}, combi 為熱鍵值, disableInInput 則表示是否取消熱鍵在輸入框的作用 $(selector).bind(types[, options], handler); // 替指定的熱鍵加上指定的事件; options 可以只有熱鍵值或是進階的觸發參數, 例如: {combi:'Ctrl+x', disableInInput: true}, combi 為熱鍵值, disableInInput 則表示是否取消熱鍵在輸入框的作用 $(selector).unbind([types][, options][, handler]); |
使用範例:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.hotkeys.js"></script> <style type="text/css"> * { font-family: Helvetica, Verdana, Arial; font-size:0.95em; } .eventNotifier{ width: 100px; float: left; color:navy; border: dotted 1px navy; padding: 4px; background-color:white; margin:3px; } .dirty{ border: solid 1px #0ca2ff; color:white; background-color:#0ca2ff; } </style> <script type="text/javascript"> // 加入 Shift + a-z 的熱鍵,當觸發時加入效果 $(function(){ $(document).bind('keydown', 'Shift+a', function (evt){jQuery('#_Shift_a').addClass('dirty'); }); $(document).bind('keydown', 'Shift+b', function (evt){jQuery('#_Shift_b').addClass('dirty'); }); $(document).bind('keydown', 'Shift+c', function (evt){jQuery('#_Shift_c').addClass('dirty'); }); $(document).bind('keydown', 'Shift+d', function (evt){jQuery('#_Shift_d').addClass('dirty'); }); $(document).bind('keydown', 'Shift+e', function (evt){jQuery('#_Shift_e').addClass('dirty'); }); $(document).bind('keydown', 'Shift+f', function (evt){jQuery('#_Shift_f').addClass('dirty'); }); $(document).bind('keydown', 'Shift+g', function (evt){jQuery('#_Shift_g').addClass('dirty'); }); $(document).bind('keydown', 'Shift+h', function (evt){jQuery('#_Shift_h').addClass('dirty'); }); $(document).bind('keydown', 'Shift+i', function (evt){jQuery('#_Shift_i').addClass('dirty'); }); $(document).bind('keydown', 'Shift+j', function (evt){jQuery('#_Shift_j').addClass('dirty'); }); $(document).bind('keydown', 'Shift+k', function (evt){jQuery('#_Shift_k').addClass('dirty'); }); $(document).bind('keydown', 'Shift+l', function (evt){jQuery('#_Shift_l').addClass('dirty'); }); $(document).bind('keydown', 'Shift+m', function (evt){jQuery('#_Shift_m').addClass('dirty'); }); $(document).bind('keydown', 'Shift+n', function (evt){jQuery('#_Shift_n').addClass('dirty'); }); $(document).bind('keydown', 'Shift+o', function (evt){jQuery('#_Shift_o').addClass('dirty'); }); $(document).bind('keydown', 'Shift+p', function (evt){jQuery('#_Shift_p').addClass('dirty'); }); $(document).bind('keydown', 'Shift+q', function (evt){jQuery('#_Shift_q').addClass('dirty'); }); $(document).bind('keydown', 'Shift+r', function (evt){jQuery('#_Shift_r').addClass('dirty'); }); $(document).bind('keydown', 'Shift+s', function (evt){jQuery('#_Shift_s').addClass('dirty'); }); $(document).bind('keydown', 'Shift+t', function (evt){jQuery('#_Shift_t').addClass('dirty'); }); $(document).bind('keydown', 'Shift+u', function (evt){jQuery('#_Shift_u').addClass('dirty'); }); $(document).bind('keydown', 'Shift+v', function (evt){jQuery('#_Shift_v').addClass('dirty'); }); $(document).bind('keydown', 'Shift+w', function (evt){jQuery('#_Shift_w').addClass('dirty'); }); $(document).bind('keydown', 'Shift+x', function (evt){jQuery('#_Shift_x').addClass('dirty'); }); $(document).bind('keydown', 'Shift+y', function (evt){jQuery('#_Shift_y').addClass('dirty'); }); $(document).bind('keydown', 'Shift+z', function (evt){jQuery('#_Shift_z').addClass('dirty'); }); }); </script> <body> <strong>Shift</strong> <div id="_Shift_a" class="eventNotifier">Shift+a</div> <div id="_Shift_b" class="eventNotifier">Shift+b</div> <div id="_Shift_c" class="eventNotifier">Shift+c</div> <div id="_Shift_d" class="eventNotifier">Shift+d</div> <div id="_Shift_e" class="eventNotifier">Shift+e</div> <div id="_Shift_f" class="eventNotifier">Shift+f</div> <div id="_Shift_g" class="eventNotifier">Shift+g</div> <div id="_Shift_h" class="eventNotifier">Shift+h</div> <div id="_Shift_i" class="eventNotifier">Shift+i</div> <div id="_Shift_j" class="eventNotifier">Shift+j</div> <div id="_Shift_k" class="eventNotifier">Shift+k</div> <div id="_Shift_l" class="eventNotifier">Shift+l</div> <div id="_Shift_m" class="eventNotifier">Shift+m</div> <div id="_Shift_n" class="eventNotifier">Shift+n</div> <div id="_Shift_o" class="eventNotifier">Shift+o</div> <div id="_Shift_p" class="eventNotifier">Shift+p</div> <div id="_Shift_q" class="eventNotifier">Shift+q</div> <div id="_Shift_r" class="eventNotifier">Shift+r</div> <div id="_Shift_s" class="eventNotifier">Shift+s</div> <div id="_Shift_t" class="eventNotifier">Shift+t</div> <div id="_Shift_u" class="eventNotifier">Shift+u</div> <div id="_Shift_v" class="eventNotifier">Shift+v</div> <div id="_Shift_w" class="eventNotifier">Shift+w</div> <div id="_Shift_x" class="eventNotifier">Shift+x</div> <div id="_Shift_y" class="eventNotifier">Shift+y</div> <div id="_Shift_z" class="eventNotifier">Shift+z</div> </body> |