| 1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| 2 |
<html> |
| 3 |
<head> |
| 4 |
<meta http-equiv="content-type" content="text/html; charset=utf-8"> |
| 5 |
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico"> |
| 6 |
|
| 7 |
<title>KeyTables example</title> |
| 8 |
<style type="text/css" title="currentStyle"> |
| 9 |
@import "../../media/css/demo_page.css"; |
| 10 |
@import "../../media/css/demo_table.css"; |
| 11 |
</style> |
| 12 |
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script> |
| 13 |
<script type="text/javascript" charset="utf-8" src="js/KeyTable.js"></script> |
| 14 |
<script type="text/javascript" charset="utf-8"> |
| 15 |
$(document).ready( function () { |
| 16 |
var keys = new KeyTable( { |
| 17 |
"form": true |
| 18 |
} ); |
| 19 |
} ); |
| 20 |
</script> |
| 21 |
</head> |
| 22 |
<body id="dt_example"> |
| 23 |
<div id="container"> |
| 24 |
<div class="full_width big"> |
| 25 |
KeyTable form integration example |
| 26 |
</div> |
| 27 |
|
| 28 |
<h1>Preamble</h1> |
| 29 |
<p>One of possible use of KeyTable is to use a table as a form element (for example a calendar date selector). For this you want to be table to tab into and out of the table, as you would do with any other form element on the page.</p> |
| 30 |
<p>The example shown below as a small table as it's third input element, and you can tab between input fields. When the 'focus' reaches the end of the table, hitting tab will take you into the next field.</p> |
| 31 |
|
| 32 |
<h1>Live example</h1> |
| 33 |
|
| 34 |
<!-- bad use of a table! quick example of form though --> |
| 35 |
<table cellspacing="10" cellpadding="0" border="0" width="100%"> |
| 36 |
<tr> |
| 37 |
<td>Input 1:</td> |
| 38 |
<td><input type="text" id="input1"></td> |
| 39 |
</tr> |
| 40 |
<tr> |
| 41 |
<td>Input 2:</td> |
| 42 |
<td><input type="text" id="input2"></td> |
| 43 |
</tr> |
| 44 |
<tr> |
| 45 |
<td>Input 3:</td> |
| 46 |
<td> |
| 47 |
<table cellpadding="0" cellspacing="0" border="0" class="display KeyTable" id="example"> |
| 48 |
<thead> |
| 49 |
<tr> |
| 50 |
<th>Rendering engine</th> |
| 51 |
<th>Browser</th> |
| 52 |
<th>Platform(s)</th> |
| 53 |
<th>Engine version</th> |
| 54 |
<th>CSS grade</th> |
| 55 |
</tr> |
| 56 |
</thead> |
| 57 |
<tbody> |
| 58 |
<tr class="gradeX"> |
| 59 |
<td>Trident</td> |
| 60 |
<td>Internet Explorer 4.0</td> |
| 61 |
<td>Win 95+</td> |
| 62 |
<td class="center">4</td> |
| 63 |
<td class="center">X</td> |
| 64 |
</tr> |
| 65 |
<tr class="gradeC"> |
| 66 |
<td>Trident</td> |
| 67 |
<td>Internet Explorer 5.0</td> |
| 68 |
<td>Win 95+</td> |
| 69 |
<td class="center">5</td> |
| 70 |
<td class="center">C</td> |
| 71 |
</tr> |
| 72 |
<tr class="gradeA"> |
| 73 |
<td>Trident</td> |
| 74 |
<td>Internet Explorer 5.5</td> |
| 75 |
<td>Win 95+</td> |
| 76 |
<td class="center">5.5</td> |
| 77 |
<td class="center">A</td> |
| 78 |
</tr> |
| 79 |
<tr class="gradeA"> |
| 80 |
<td>Trident</td> |
| 81 |
<td>Internet Explorer 6</td> |
| 82 |
<td>Win 98+</td> |
| 83 |
<td class="center">6</td> |
| 84 |
<td class="center">A</td> |
| 85 |
</tr> |
| 86 |
<tr class="gradeA"> |
| 87 |
<td>Trident</td> |
| 88 |
<td>Internet Explorer 7</td> |
| 89 |
<td>Win XP SP2+</td> |
| 90 |
<td class="center">7</td> |
| 91 |
<td class="center">A</td> |
| 92 |
</tr> |
| 93 |
</tbody> |
| 94 |
</table> |
| 95 |
</td> |
| 96 |
</tr> |
| 97 |
<tr> |
| 98 |
<td>Input 4:</td> |
| 99 |
<td><input type="text" id="input4"></td> |
| 100 |
</tr> |
| 101 |
<tr> |
| 102 |
<td>Input 5:</td> |
| 103 |
<td><input type="text" id="input5"></td> |
| 104 |
</tr> |
| 105 |
</table> |
| 106 |
<div class="spacer"></div> |
| 107 |
|
| 108 |
|
| 109 |
<h1>Initialisation code</h1> |
| 110 |
<pre>$(document).ready( function () { |
| 111 |
var keys = new KeyTable( { |
| 112 |
"form": true |
| 113 |
} ); |
| 114 |
} );</pre> |
| 115 |
|
| 116 |
|
| 117 |
<h1>Other examples</h1> |
| 118 |
<ul> |
| 119 |
<li><a href="index.html">Basic usage</a></li> |
| 120 |
<li><a href="editing.html">Editing a table</a></li> |
| 121 |
<li><a href="form.html">Integration with an HTML form</a></li> |
| 122 |
<li><a href="datatable.html">Integration with DataTables</a></li> |
| 123 |
<li><a href="datatable_scrolling.html">Using KeyTable with scrolling in DataTables</a></li> |
| 124 |
</ul> |
| 125 |
|
| 126 |
<div id="footer" style="text-align:center;"> |
| 127 |
<span style="font-size:10px;"> |
| 128 |
KeyTable © Allan Jardine 2009.<br> |
| 129 |
Information in the table © <a href="http://www.u4eatech.com">U4EA Technologies</a> 2007-2009.</span> |
| 130 |
</div> |
| 131 |
</div> |
| 132 |
</body> |
| 133 |
</html> |
Parent Directory
| 
Revision Log