Permalink
Browse files

[okShortcut] Add example page

1 parent 9a6b7d8 commit 3e17bffb7019ce2d6e79a628e5cb2b30834d1708 @exitface exitface committed Aug 23, 2011
Showing with 139 additions and 16 deletions.
  1. +1 −1 okShortcut/README.md
  2. +42 −0 okShortcut/example.html
  3. +6 −13 okShortcut/jquery.okShortcut.js
  4. +1 −2 okShortcut/jquery.okShortcut.min.js
  5. +89 −0 okShortcut/screen.css
View
2 okShortcut/README.md
@@ -41,5 +41,5 @@ options | default | description
type | 'keydown' | What event to bind to (can be keydown,keyup or keypress)
propagate | false | Whether events propagate
disableInInput | false | Whether or not key bindings are disabled when an input has focus
-target | document | What element event are bound to
+target | document | What element events should be bound to
keycode | false | Give an explicit keycode to test for
View
42 okShortcut/example.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<title>jQuery.okSlide</title>
+<meta http-equiv="content-type" content="text/html;charset=utf-8" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
+<script type="text/javascript" src="jquery.okShortcut.js"></script>
+<link rel="stylesheet" href="screen.css" type="text/css" />
+</head>
+
+<body>
+ <div id='doc'>
+ <h1>okShortcut</h1>
+ <p class='large'>Easy keybinding</p>
+ <h2>Demonstration</h2>
+ <div class='ct'>
+ <h4 id='result-0'>Press 'enter' without any input focused to update this text</h4>
+ </div>
+ <p>
+ Events can also be bound to specific elements. Remember to pass the
+ <code>'propagate:false'</code> option otherwise the event will bubble to
+ any shortcut bound to containing elements.
+ </p>
+ <div id='group-1' class='ct'>
+ <h4 id='result-1'>Type in the text the input and press 'enter' to replace this text</h4>
+ <input id='input-1' type='text'/>
+ </div>
+
+ <div id='group-2' class='ct'>
+ <h4 id='result-2'>Type in the text the input and press 'enter' to replace this text</h4>
+ <input id='input-2' type='text'/>
+ </div>
+ </div>
+ <script type='text/javascript'>
+ var i=0;
+ $.shortcut.add("enter", function(){ $("#result-1").html("Typed '" + $("#input-1").val() + "' in input 1"); }, { target: $("#group-1"), propagate: false});
+ $.shortcut.add("enter", function(){ $("#result-2").html("Typed '" + $("#input-2").val() + "' in input 2"); }, { target: $("#group-2"), propagate: false});
+ $.shortcut.add("enter", function(){ i++; $("#result-0").html("Pressed enter without focusing an input <span style='color:#f00'>" + i + "</span> times."); });
+ </script>
+</body>
+</html>
View
19 okShortcut/jquery.okShortcut.js
@@ -124,6 +124,7 @@ jQuery.shortcut = (function(){
}
return {
+ // Add a shortcut
add: function(combination, callback, options) {
options = options || {};
@@ -133,27 +134,19 @@ jQuery.shortcut = (function(){
}
}
- var target = options.target;
-
- if (typeof target === 'string') {
- target = document.getElementById(target);
- }
-
- var func = makeKeypressedFun( combination, callback, options );
+ var fn = makeKeypressedFun( combination, callback, options );
bindings[combination.toLowerCase()] = {
- 'callback' : func,
- 'target' : target,
+ 'callback' : fn,
+ 'target' : options.target,
'event' : options.type
};
- // Attach the function with the event
- // jQuery normalizes event handling
- jQuery(target).bind(options.type, func);
+ jQuery(options.target).bind(options.type, fn);
return this;
},
- //Remove the shortcut - just specify the shortcut and I will remove the binding
+ // Remove a shortcut - you only need to pass the shortcut
remove: function(combination) {
var binding = bindings[combination.toLowerCase()];
View
3 okShortcut/jquery.okShortcut.min.js
@@ -7,6 +7,5 @@ return(keys.length===count&&!!want.shift===!!e.shiftKey&&!!want.ctrl===!!e.metaK
function makeKeypressedFun(combination,callback,options){return function(e){e=e?e:window.event;if(triggeredInDisableTags(e,options.disableInInput)||!matching(combination,options,e)){return;}
callback(e);if(!options.propagate){e.stopPropagation&&e.stopPropagation();e.preventDefault&&e.preventDefault();e.cancelBubble=true;e.returnValue=false;}};}
return{add:function(combination,callback,options){options=options||{};for(var name in defaultOptions){if(!options.hasOwnProperty(name)){options[name]=defaultOptions[name];}}
-var target=options.target;if(typeof target==='string'){target=document.getElementById(target);}
-var func=makeKeypressedFun(combination,callback,options);bindings[combination.toLowerCase()]={'callback':func,'target':target,'event':options.type};jQuery(target).bind(options.type,func);return this;},remove:function(combination){var binding=bindings[combination.toLowerCase()];delete bindings[combination];if(binding){jQuery(binding.target).unbind(binding.event,binding.callback);}
+var fn=makeKeypressedFun(combination,callback,options);bindings[combination.toLowerCase()]={'callback':fn,'target':options.target,'event':options.type};jQuery(options.target).bind(options.type,fn);return this;},remove:function(combination){var binding=bindings[combination.toLowerCase()];delete bindings[combination];if(binding){jQuery(binding.target).unbind(binding.event,binding.callback);}
return this;}};})();
View
89 okShortcut/screen.css
@@ -0,0 +1,89 @@
+/*=================== RESET ======================== */
+
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
+body {line-height:1.5;}
+table {border-collapse:separate;border-spacing:0;}
+caption, th, td {text-align:left;font-weight:normal;}
+table, td, th {vertical-align:middle;}
+blockquote:before, blockquote:after, q:before, q:after {content:"";}
+blockquote, q {quotes:"" "";}
+a img {border:none;}
+
+/*=================== BASE ======================== */
+
+body {
+ font-family:"Helvetica Neue", Arial, Helvetica, sans-serif, 'Liberation Sans', FreeSans, sans-serif;
+ font-size:62.5%; /* Set 1em = 10px */
+}
+
+/*=================== TYPOGRAPHY ================== */
+
+html {font-size:100.01%;}
+body {font-size:75%;color:#222;background:#ccc;font-family: Arial, Helvetica, sans-serif;}
+h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#09f;}
+h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
+h2 {font-size:2em;margin-bottom:0.75em;}
+h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
+h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
+h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
+h6 {font-size:1em;font-weight:bold;}
+p {margin:0 0 1.5em;}
+a:focus, a:hover {color:#000;}
+a {color:#009;text-decoration:underline;}
+blockquote {margin:1.5em;color:#666;font-style:italic;}
+strong {font-weight:bold;}
+pre {margin:1.5em 0;white-space:pre;}
+pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
+li ul, li ol {margin:0;}
+ul, ol {margin:0 1.5em 1.5em 0;padding-left:3.333em;}
+ul {list-style-type:none;}
+ol {list-style-type:none;}
+dl {margin:0 0 1.5em 0;}
+dl dt {font-weight:bold;}
+dd {margin-left:1.5em;}
+.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
+.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
+.hide {display:none;}
+.quiet {color:#666;}
+.loud {color:#000;}
+.highlight {background:#ff0;}
+
+
+/* Tables
+--------------------------------------------------------- */
+
+table {margin-bottom:1.4em;width:100%;}
+th {background:#c3d9ff;font-weight:bold;}
+thead th {background:#c3d9ff;}
+th, td, caption {padding:4px 10px 4px 5px;}
+tr.even td {background:#e5ecf9;}
+tfoot { font-style:italic; }
+
+/*=================== FORM ======================== */
+
+label {font-weight:bold;display:block;}
+fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
+legend {font-weight:bold;font-size:1.2em;}
+input[type=text], input[type=password], input.text, input.title, textarea, select {width:300px;background-color:#fff;border:1px solid #bbb;}
+input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus {border-color:#666;}
+input[type=text], input[type=password], input.text, input.title, textarea, select {margin:0.5em 0;}
+textarea {width:390px;height:250px;padding:5px;}
+input[type=checkbox], input[type=radio], input.checkbox, input.radio {position:relative;top:.25em;}
+form.inline {line-height:3;}
+form.inline p {margin-bottom:0;}
+.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
+.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
+.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
+.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
+.error a {color:#8a1f11;}
+.notice a {color:#514721;}
+.success a {color:#264409;}
+
+.clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; }
+.clearfix:after { clear:both; content:'.'; display:block; visibility:hidden; height:0; }
+
+/*=================== Layout ======================== */
+
+#doc { width: 920px; background: #fff; margin:0 auto; padding: 20px; height:100%;}
+.box {padding:1.5em;margin-bottom:1.5em;background:#E5ECF9;}
+.ct {padding:1em;}

0 comments on commit 3e17bff

Please sign in to comment.