annotate DataTables-1.9.4/extras/KeyTable/form.html @ 9:7300ed4c1481 draft default tip

Uploaded
author saskia-hiltemann
date Mon, 04 Sep 2017 10:49:00 -0400
parents ac5f9272033b
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
2 <html>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
3 <head>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
4 <meta http-equiv="content-type" content="text/html; charset=utf-8">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
5 <link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
6
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
7 <title>KeyTables example</title>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
8 <style type="text/css" title="currentStyle">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
9 @import "../../media/css/demo_page.css";
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
10 @import "../../media/css/demo_table.css";
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
11 </style>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
12 <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
13 <script type="text/javascript" charset="utf-8" src="js/KeyTable.js"></script>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
14 <script type="text/javascript" charset="utf-8">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
15 $(document).ready( function () {
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
16 var keys = new KeyTable( {
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
17 "form": true
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
18 } );
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
19 } );
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
20 </script>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
21 </head>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
22 <body id="dt_example">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
23 <div id="container">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
24 <div class="full_width big">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
25 KeyTable form integration example
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
26 </div>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
27
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
28 <h1>Preamble</h1>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
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>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
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>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
31
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
32 <h1>Live example</h1>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
33
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
34 <!-- bad use of a table! quick example of form though -->
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
35 <table cellspacing="10" cellpadding="0" border="0" width="100%">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
36 <tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
37 <td>Input 1:</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
38 <td><input type="text" id="input1"></td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
39 </tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
40 <tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
41 <td>Input 2:</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
42 <td><input type="text" id="input2"></td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
43 </tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
44 <tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
45 <td>Input 3:</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
46 <td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
47 <table cellpadding="0" cellspacing="0" border="0" class="display KeyTable" id="example">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
48 <thead>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
49 <tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
50 <th>Rendering engine</th>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
51 <th>Browser</th>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
52 <th>Platform(s)</th>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
53 <th>Engine version</th>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
54 <th>CSS grade</th>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
55 </tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
56 </thead>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
57 <tbody>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
58 <tr class="gradeX">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
59 <td>Trident</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
60 <td>Internet Explorer 4.0</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
61 <td>Win 95+</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
62 <td class="center">4</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
63 <td class="center">X</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
64 </tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
65 <tr class="gradeC">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
66 <td>Trident</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
67 <td>Internet Explorer 5.0</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
68 <td>Win 95+</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
69 <td class="center">5</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
70 <td class="center">C</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
71 </tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
72 <tr class="gradeA">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
73 <td>Trident</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
74 <td>Internet Explorer 5.5</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
75 <td>Win 95+</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
76 <td class="center">5.5</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
77 <td class="center">A</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
78 </tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
79 <tr class="gradeA">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
80 <td>Trident</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
81 <td>Internet Explorer 6</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
82 <td>Win 98+</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
83 <td class="center">6</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
84 <td class="center">A</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
85 </tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
86 <tr class="gradeA">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
87 <td>Trident</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
88 <td>Internet Explorer 7</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
89 <td>Win XP SP2+</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
90 <td class="center">7</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
91 <td class="center">A</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
92 </tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
93 </tbody>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
94 </table>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
95 </td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
96 </tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
97 <tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
98 <td>Input 4:</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
99 <td><input type="text" id="input4"></td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
100 </tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
101 <tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
102 <td>Input 5:</td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
103 <td><input type="text" id="input5"></td>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
104 </tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
105 </table>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
106 <div class="spacer"></div>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
107
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
108
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
109 <h1>Initialisation code</h1>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
110 <pre>$(document).ready( function () {
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
111 var keys = new KeyTable( {
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
112 "form": true
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
113 } );
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
114 } );</pre>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
115
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
116
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
117 <h1>Other examples</h1>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
118 <ul>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
119 <li><a href="index.html">Basic usage</a></li>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
120 <li><a href="editing.html">Editing a table</a></li>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
121 <li><a href="form.html">Integration with an HTML form</a></li>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
122 <li><a href="datatable.html">Integration with DataTables</a></li>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
123 <li><a href="datatable_scrolling.html">Using KeyTable with scrolling in DataTables</a></li>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
124 </ul>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
125
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
126 <div id="footer" style="text-align:center;">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
127 <span style="font-size:10px;">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
128 KeyTable &copy; Allan Jardine 2009.<br>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
129 Information in the table &copy; <a href="http://www.u4eatech.com">U4EA Technologies</a> 2007-2009.</span>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
130 </div>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
131 </div>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
132 </body>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
133 </html>