Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2629 vikas 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
			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>