/[projects]/misc/horsensspejder-web/jquery/DataTables-1.9.4/extras/KeyTable/index.html
ViewVC logotype

Annotation of /misc/horsensspejder-web/jquery/DataTables-1.9.4/extras/KeyTable/index.html

Parent Directory Parent Directory | Revision Log Revision Log

Revision 2125 - (hide annotations) (download) (as text)
Wed Mar 12 19:30:05 2014 UTC (10 years, 3 months ago) by torben
File MIME type: text/html
File size: 15168 byte(s) 
initial import
1 torben 2125 <!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     function fnMessage ( sMesg )
16     {
17     var n = document.getElementById('info');
18     n.innerHTML += sMesg+"<br>";
19     n.scrollTop = n.scrollHeight;
20     }
21    
22     $(document).ready( function () {
23     var keys = new KeyTable();
24    
25     /* Focus handler for all cells in last column */
26     keys.event.focus( 4, null, function( nNode, x, y ) {
27     fnMessage( "Cell "+x+","+y+" focused ('live' event - column)" );
28     } );
29    
30     /* Focus handler for all cells in 8th row */
31     keys.event.focus( null, 7, function( nNode, x, y ) {
32     fnMessage( "Cell "+x+","+y+" focused ('live' event - row)" );
33     } );
34    
35     /* Focus using coords. */
36     keys.event.focus( 1, 0, function( nNode ) {
37     keys.event.remove.focus( nNode );
38     fnMessage( "Cell 1,0 focus - this event has now been removed" );
39     } );
40    
41     keys.event.focus( 1, 3, function() {
42     fnMessage( "Cell 1,3 focus" );
43     } );
44    
45     /* focus with a node */
46     keys.event.focus( $('#example tbody tr:eq(2) td:eq(0)')[0], function() {
47     fnMessage( "Cell 0,2 focus" );
48     } );
49    
50     /* Blur using a node */
51     keys.event.blur( $('#example tbody tr:eq(1) td:eq(2)')[0], function() {
52     fnMessage( "Cell 1,2 blur" );
53     } );
54    
55     /* Blur using coords */
56     keys.event.blur( 2, 4, function() {
57     fnMessage( "Cell 2,4 blur" );
58     } );
59    
60     /* Action */
61     keys.event.action( 2, 2, function( nNode ) {
62     fnMessage( "Cell 2,2 action" );
63     if ( nNode.style.fontWeight == "" || nNode.style.fontWeight == "normal" ) {
64     nNode.style.fontWeight = "bold";
65     } else {
66     nNode.style.fontWeight = "normal";
67     }
68     } );
69    
70     keys.event.action( 2, 5, function( nNode ) {
71     fnMessage( "Cell 2,5 action" );
72     if ( nNode.style.fontStyle == "" ) {
73     nNode.style.fontStyle = "italic";
74     } else {
75     nNode.style.fontStyle = "";
76     }
77     } );
78     } );
79     </script>
80     </head>
81     <body id="dt_example">
82     <div id="container">
83     <div class="full_width big">
84     KeyTable example
85     </div>
86    
87     <h1>Preamble</h1>
88     <p>KeyTable allows you to use keyboard navigation on an HTML table. The focused cell is shown through the CSS class ('focus') which in the case below is simply a blue border. Events such as 'focus', 'blur', 'esc' (the escape key) and 'return' (the return key) can be assigned event handling functions thought the API presented.</p>
89     <p>The example shown below has a few cells (selected at random, but near the top) with blur and focus events assigned to them. You can also see the navigation around the table using arrow keys.</p>
90    
91     <h1>Live example</h1>
92     <div id="info" class="box">
93     Event information:<br>
94     </div>
95     <div id="demo">
96     <table cellpadding="0" cellspacing="0" border="0" class="display KeyTable" id="example">
97     <thead>
98     <tr>
99     <th>Rendering engine</th>
100     <th>Browser</th>
101     <th>Platform(s)</th>
102     <th>Engine version</th>
103     <th>CSS grade</th>
104     </tr>
105     </thead>
106     <tbody>
107     <tr class="gradeX">
108     <td>Trident</td>
109     <td>Internet Explorer 4.0 (focus once)</td>
110     <td>Win 95+</td>
111     <td class="center">4</td>
112     <td class="center">X</td>
113     </tr>
114     <tr class="gradeC">
115     <td>Trident</td>
116     <td>Internet Explorer 5.0</td>
117     <td>Win 95+ (blur)</td>
118     <td class="center">5</td>
119     <td class="center">C</td>
120     </tr>
121     <tr class="gradeA">
122     <td>Trident (focus)</td>
123     <td>Internet Explorer 5.5</td>
124     <td>Win 95+ (action/bold)</td>
125     <td class="center">5.5</td>
126     <td class="center">A</td>
127     </tr>
128     <tr class="gradeA">
129     <td>Trident</td>
130     <td>Internet Explorer 6 (focus)</td>
131     <td>Win 98+</td>
132     <td class="center">6</td>
133     <td class="center">A</td>
134     </tr>
135     <tr class="gradeA">
136     <td>Trident</td>
137     <td>Internet Explorer 7</td>
138     <td>Win XP SP2+ (blur)</td>
139     <td class="center">7</td>
140     <td class="center">A</td>
141     </tr>
142     <tr class="gradeA">
143     <td>Trident</td>
144     <td>AOL browser (AOL desktop)</td>
145     <td>Win XP (action/italic)</td>
146     <td class="center">6</td>
147     <td class="center">A</td>
148     </tr>
149     <tr class="gradeA">
150     <td>Gecko</td>
151     <td>Firefox 1.0</td>
152     <td>Win 98+ / OSX.2+</td>
153     <td class="center">1.7</td>
154     <td class="center">A</td>
155     </tr>
156     <tr class="gradeA">
157     <td>Gecko (focus - row)</td>
158     <td>Firefox 1.5</td>
159     <td>Win 98+ / OSX.2+</td>
160     <td class="center">1.8</td>
161     <td class="center">A</td>
162     </tr>
163     <tr class="gradeA">
164     <td>Gecko</td>
165     <td>Firefox 2.0</td>
166     <td>Win 98+ / OSX.2+</td>
167     <td class="center">1.8</td>
168     <td class="center">A</td>
169     </tr>
170     <tr class="gradeA">
171     <td>Gecko</td>
172     <td>Firefox 3.0</td>
173     <td>Win 2k+ / OSX.3+</td>
174     <td class="center">1.9</td>
175     <td class="center">A</td>
176     </tr>
177     <tr class="gradeA">
178     <td>Gecko</td>
179     <td>Camino 1.0</td>
180     <td>OSX.2+</td>
181     <td class="center">1.8</td>
182     <td class="center">A</td>
183     </tr>
184     <tr class="gradeA">
185     <td>Gecko</td>
186     <td>Camino 1.5</td>
187     <td>OSX.3+</td>
188     <td class="center">1.8</td>
189     <td class="center">A</td>
190     </tr>
191     <tr class="gradeA">
192     <td>Gecko</td>
193     <td>Netscape 7.2</td>
194     <td>Win 95+ / Mac OS 8.6-9.2</td>
195     <td class="center">1.7</td>
196     <td class="center">A</td>
197     </tr>
198     <tr class="gradeA">
199     <td>Gecko</td>
200     <td>Netscape Browser 8</td>
201     <td>Win 98SE+</td>
202     <td class="center">1.7</td>
203     <td class="center">A</td>
204     </tr>
205     <tr class="gradeA">
206     <td>Gecko</td>
207     <td>Netscape Navigator 9</td>
208     <td>Win 98+ / OSX.2+</td>
209     <td class="center">1.8</td>
210     <td class="center">A</td>
211     </tr>
212     <tr class="gradeA">
213     <td>Gecko</td>
214     <td>Mozilla 1.0</td>
215     <td>Win 95+ / OSX.1+</td>
216     <td class="center">1</td>
217     <td class="center">A</td>
218     </tr>
219     <tr class="gradeA">
220     <td>Gecko</td>
221     <td>Mozilla 1.1</td>
222     <td>Win 95+ / OSX.1+</td>
223     <td class="center">1.1</td>
224     <td class="center">A</td>
225     </tr>
226     <tr class="gradeA">
227     <td>Gecko</td>
228     <td>Mozilla 1.2</td>
229     <td>Win 95+ / OSX.1+</td>
230     <td class="center">1.2</td>
231     <td class="center">A</td>
232     </tr>
233     <tr class="gradeA">
234     <td>Gecko</td>
235     <td>Mozilla 1.3</td>
236     <td>Win 95+ / OSX.1+</td>
237     <td class="center">1.3</td>
238     <td class="center">A</td>
239     </tr>
240     <tr class="gradeA">
241     <td>Gecko</td>
242     <td>Mozilla 1.4</td>
243     <td>Win 95+ / OSX.1+</td>
244     <td class="center">1.4</td>
245     <td class="center">A</td>
246     </tr>
247     <tr class="gradeA">
248     <td>Gecko</td>
249     <td>Mozilla 1.5</td>
250     <td>Win 95+ / OSX.1+</td>
251     <td class="center">1.5</td>
252     <td class="center">A</td>
253     </tr>
254     <tr class="gradeA">
255     <td>Gecko</td>
256     <td>Mozilla 1.6</td>
257     <td>Win 95+ / OSX.1+</td>
258     <td class="center">1.6</td>
259     <td class="center">A</td>
260     </tr>
261     <tr class="gradeA">
262     <td>Gecko</td>
263     <td>Mozilla 1.7</td>
264     <td>Win 98+ / OSX.1+</td>
265     <td class="center">1.7</td>
266     <td class="center">A</td>
267     </tr>
268     <tr class="gradeA">
269     <td>Gecko</td>
270     <td>Mozilla 1.8</td>
271     <td>Win 98+ / OSX.1+</td>
272     <td class="center">1.8</td>
273     <td class="center">A</td>
274     </tr>
275     <tr class="gradeA">
276     <td>Gecko</td>
277     <td>Seamonkey 1.1</td>
278     <td>Win 98+ / OSX.2+</td>
279     <td class="center">1.8</td>
280     <td class="center">A</td>
281     </tr>
282     <tr class="gradeA">
283     <td>Gecko</td>
284     <td>Epiphany 2.20</td>
285     <td>Gnome</td>
286     <td class="center">1.8</td>
287     <td class="center">A</td>
288     </tr>
289     <tr class="gradeA">
290     <td>Webkit</td>
291     <td>Safari 1.2</td>
292     <td>OSX.3</td>
293     <td class="center">125.5</td>
294     <td class="center">A</td>
295     </tr>
296     <tr class="gradeA">
297     <td>Webkit</td>
298     <td>Safari 1.3</td>
299     <td>OSX.3</td>
300     <td class="center">312.8</td>
301     <td class="center">A</td>
302     </tr>
303     <tr class="gradeA">
304     <td>Webkit</td>
305     <td>Safari 2.0</td>
306     <td>OSX.4+</td>
307     <td class="center">419.3</td>
308     <td class="center">A</td>
309     </tr>
310     <tr class="gradeA">
311     <td>Webkit</td>
312     <td>Safari 3.0</td>
313     <td>OSX.4+</td>
314     <td class="center">522.1</td>
315     <td class="center">A</td>
316     </tr>
317     <tr class="gradeA">
318     <td>Webkit</td>
319     <td>OmniWeb 5.5</td>
320     <td>OSX.4+</td>
321     <td class="center">420</td>
322     <td class="center">A</td>
323     </tr>
324     <tr class="gradeA">
325     <td>Webkit</td>
326     <td>iPod Touch / iPhone</td>
327     <td>iPod</td>
328     <td class="center">420.1</td>
329     <td class="center">A</td>
330     </tr>
331     <tr class="gradeA">
332     <td>Webkit</td>
333     <td>S60</td>
334     <td>S60</td>
335     <td class="center">413</td>
336     <td class="center">A</td>
337     </tr>
338     <tr class="gradeA">
339     <td>Presto</td>
340     <td>Opera 7.0</td>
341     <td>Win 95+ / OSX.1+</td>
342     <td class="center">-</td>
343     <td class="center">A</td>
344     </tr>
345     <tr class="gradeA">
346     <td>Presto</td>
347     <td>Opera 7.5</td>
348     <td>Win 95+ / OSX.2+</td>
349     <td class="center">-</td>
350     <td class="center">A</td>
351     </tr>
352     <tr class="gradeA">
353     <td>Presto</td>
354     <td>Opera 8.0</td>
355     <td>Win 95+ / OSX.2+</td>
356     <td class="center">-</td>
357     <td class="center">A</td>
358     </tr>
359     <tr class="gradeA">
360     <td>Presto</td>
361     <td>Opera 8.5</td>
362     <td>Win 95+ / OSX.2+</td>
363     <td class="center">-</td>
364     <td class="center">A</td>
365     </tr>
366     <tr class="gradeA">
367     <td>Presto</td>
368     <td>Opera 9.0</td>
369     <td>Win 95+ / OSX.3+</td>
370     <td class="center">-</td>
371     <td class="center">A</td>
372     </tr>
373     <tr class="gradeA">
374     <td>Presto</td>
375     <td>Opera 9.2</td>
376     <td>Win 88+ / OSX.3+</td>
377     <td class="center">-</td>
378     <td class="center">A</td>
379     </tr>
380     <tr class="gradeA">
381     <td>Presto</td>
382     <td>Opera 9.5</td>
383     <td>Win 88+ / OSX.3+</td>
384     <td class="center">-</td>
385     <td class="center">A</td>
386     </tr>
387     <tr class="gradeA">
388     <td>Presto</td>
389     <td>Opera for Wii</td>
390     <td>Wii</td>
391     <td class="center">-</td>
392     <td class="center">A</td>
393     </tr>
394     <tr class="gradeA">
395     <td>Presto</td>
396     <td>Nokia N800</td>
397     <td>N800</td>
398     <td class="center">-</td>
399     <td class="center">A</td>
400     </tr>
401     <tr class="gradeA">
402     <td>Presto</td>
403     <td>Nintendo DS browser</td>
404     <td>Nintendo DS</td>
405     <td class="center">8.5</td>
406     <td class="center">C/A<sup>1</sup></td>
407     </tr>
408     <tr class="gradeC">
409     <td>KHTML</td>
410     <td>Konqureror 3.1</td>
411     <td>KDE 3.1</td>
412     <td class="center">3.1</td>
413     <td class="center">C</td>
414     </tr>
415     <tr class="gradeA">
416     <td>KHTML</td>
417     <td>Konqureror 3.3</td>
418     <td>KDE 3.3</td>
419     <td class="center">3.3</td>
420     <td class="center">A</td>
421     </tr>
422     <tr class="gradeA">
423     <td>KHTML</td>
424     <td>Konqureror 3.5</td>
425     <td>KDE 3.5</td>
426     <td class="center">3.5</td>
427     <td class="center">A</td>
428     </tr>
429     <tr class="gradeX">
430     <td>Tasman</td>
431     <td>Internet Explorer 4.5</td>
432     <td>Mac OS 8-9</td>
433     <td class="center">-</td>
434     <td class="center">X</td>
435     </tr>
436     <tr class="gradeC">
437     <td>Tasman</td>
438     <td>Internet Explorer 5.1</td>
439     <td>Mac OS 7.6-9</td>
440     <td class="center">1</td>
441     <td class="center">C</td>
442     </tr>
443     <tr class="gradeC">
444     <td>Tasman</td>
445     <td>Internet Explorer 5.2</td>
446     <td>Mac OS 8-X</td>
447     <td class="center">1</td>
448     <td class="center">C</td>
449     </tr>
450     <tr class="gradeA">
451     <td>Misc</td>
452     <td>NetFront 3.1</td>
453     <td>Embedded devices</td>
454     <td class="center">-</td>
455     <td class="center">C</td>
456     </tr>
457     <tr class="gradeA">
458     <td>Misc</td>
459     <td>NetFront 3.4</td>
460     <td>Embedded devices</td>
461     <td class="center">-</td>
462     <td class="center">A</td>
463     </tr>
464     <tr class="gradeX">
465     <td>Misc</td>
466     <td>Dillo 0.8</td>
467     <td>Embedded devices</td>
468     <td class="center">-</td>
469     <td class="center">X</td>
470     </tr>
471     <tr class="gradeX">
472     <td>Misc</td>
473     <td>Links</td>
474     <td>Text only</td>
475     <td class="center">-</td>
476     <td class="center">X</td>
477     </tr>
478     <tr class="gradeX">
479     <td>Misc</td>
480     <td>Lynx</td>
481     <td>Text only</td>
482     <td class="center">-</td>
483     <td class="center">X</td>
484     </tr>
485     <tr class="gradeC">
486     <td>Misc</td>
487     <td>IE Mobile</td>
488     <td>Windows Mobile 6</td>
489     <td class="center">-</td>
490     <td class="center">C</td>
491     </tr>
492     <tr class="gradeC">
493     <td>Misc</td>
494     <td>PSP browser</td>
495     <td>PSP</td>
496     <td class="center">-</td>
497     <td class="center">C</td>
498     </tr>
499     <tr class="gradeU">
500     <td>Other browsers</td>
501     <td>All others</td>
502     <td>-</td>
503     <td class="center">-</td>
504     <td class="center">U</td>
505     </tr>
506     </tbody>
507     </table>
508     </div>
509     <div class="spacer"></div>
510    
511    
512     <h1>Initialisation code</h1>
513     <pre>function fnMessage ( sMesg )
514     {
515     var n = document.getElementById('info');
516     n.innerHTML += sMesg+"&lt;br&gt;";
517     n.scrollTop = n.scrollHeight;
518     }
519    
520     $(document).ready( function () {
521     var keys = new KeyTable();
522    
523     /* Focus handler for all cells in last column */
524     keys.event.focus( 4, null, function( nNode, x, y ) {
525     fnMessage( "Cell "+x+","+y+" focused ('live' event - column)" );
526     } );
527    
528     /* Focus handler for all cells in 8th row */
529     keys.event.focus( null, 7, function( nNode, x, y ) {
530     fnMessage( "Cell "+x+","+y+" focused ('live' event - row)" );
531     } );
532    
533     /* Focus using coords. */
534     keys.event.focus( 1, 0, function( nNode ) {
535     keys.event.remove.focus( nNode );
536     fnMessage( "Cell 1,0 focus - this event has now been removed" );
537     } );
538    
539     keys.event.focus( 1, 3, function() {
540     fnMessage( "Cell 1,3 focus" );
541     } );
542    
543     /* focus with a node */
544     keys.event.focus( $('#example tbody tr:eq(2) td:eq(0)')[0], function() {
545     fnMessage( "Cell 0,2 focus" );
546     } );
547    
548     /* Blur using a node */
549     keys.event.blur( $('#example tbody tr:eq(1) td:eq(2)')[0], function() {
550     fnMessage( "Cell 1,2 blur" );
551     } );
552    
553     /* Blur using coords */
554     keys.event.blur( 2, 4, function() {
555     fnMessage( "Cell 2,4 blur" );
556     } );
557    
558     /* Action */
559     keys.event.action( 2, 2, function( nNode ) {
560     fnMessage( "Cell 2,2 action" );
561     if ( nNode.style.fontWeight == "" || nNode.style.fontWeight == "normal" ) {
562     nNode.style.fontWeight = "bold";
563     } else {
564     nNode.style.fontWeight = "normal";
565     }
566     } );
567    
568     keys.event.action( 2, 5, function( nNode ) {
569     fnMessage( "Cell 2,5 action" );
570     if ( nNode.style.fontStyle == "" ) {
571     nNode.style.fontStyle = "italic";
572     } else {
573     nNode.style.fontStyle = "";
574     }
575     } );
576     } );</pre>
577    
578    
579     <h1>Other examples</h1>
580     <ul>
581     <li><a href="index.html">Basic usage</a></li>
582     <li><a href="editing.html">Editing a table</a></li>
583     <li><a href="form.html">Integration with an HTML form</a></li>
584     <li><a href="datatable.html">Integration with DataTables</a></li>
585     <li><a href="datatable_scrolling.html">Using KeyTable with scrolling in DataTables</a></li>
586     </ul>
587    
588     <div id="footer" style="text-align:center;">
589     <span style="font-size:10px;">
590     KeyTable &copy; Allan Jardine 2009.<br>
591     Information in the table &copy; <a href="http://www.u4eatech.com">U4EA Technologies</a> 2007-2009.</span>
592     </div>
593     </div>
594     </body>
595     </html>
  ViewVC Help
Powered by ViewVC 1.1.20