archive/alerta_alerta
0
0
Fork 0
mirror of https://github.com/alerta/alerta.git synced 2025-02-10 07:52:26 +00:00
Code Issues Projects Releases Wiki Activity
alerta_alerta/dashboard/v2/assets/DataTables/extras/KeyTable/index.html
Nick Satterly 764cc329e1 changes
2013-03-07 11:12:34 +00:00

595 lines
No EOL
15 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
<title>KeyTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</style>
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/KeyTable.js"></script>
<script type="text/javascript" charset="utf-8">
function fnMessage ( sMesg )
{
var n = document.getElementById('info');
n.innerHTML += sMesg+"<br>";
n.scrollTop = n.scrollHeight;
}
$(document).ready( function () {
var keys = new KeyTable();
/* Focus handler for all cells in last column */
keys.event.focus( 4, null, function( nNode, x, y ) {
fnMessage( "Cell "+x+","+y+" focused ('live' event - column)" );
} );
/* Focus handler for all cells in 8th row */
keys.event.focus( null, 7, function( nNode, x, y ) {
fnMessage( "Cell "+x+","+y+" focused ('live' event - row)" );
} );
/* Focus using coords. */
keys.event.focus( 1, 0, function( nNode ) {
keys.event.remove.focus( nNode );
fnMessage( "Cell 1,0 focus - this event has now been removed" );
} );
keys.event.focus( 1, 3, function() {
fnMessage( "Cell 1,3 focus" );
} );
/* focus with a node */
keys.event.focus( $('#example tbody tr:eq(2) td:eq(0)')[0], function() {
fnMessage( "Cell 0,2 focus" );
} );
/* Blur using a node */
keys.event.blur( $('#example tbody tr:eq(1) td:eq(2)')[0], function() {
fnMessage( "Cell 1,2 blur" );
} );
/* Blur using coords */
keys.event.blur( 2, 4, function() {
fnMessage( "Cell 2,4 blur" );
} );
/* Action */
keys.event.action( 2, 2, function( nNode ) {
fnMessage( "Cell 2,2 action" );
if ( nNode.style.fontWeight == "" || nNode.style.fontWeight == "normal" ) {
nNode.style.fontWeight = "bold";
} else {
nNode.style.fontWeight = "normal";
}
} );
keys.event.action( 2, 5, function( nNode ) {
fnMessage( "Cell 2,5 action" );
if ( nNode.style.fontStyle == "" ) {
nNode.style.fontStyle = "italic";
} else {
nNode.style.fontStyle = "";
}
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
KeyTable example
</div>
<h1>Preamble</h1>
<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>
<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>
<h1>Live example</h1>
<div id="info" class="box">
Event information:<br>
</div>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display KeyTable" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0 (focus once)</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+ (blur)</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident (focus)</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+ (action/bold)</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet Explorer 6 (focus)</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+ (blur)</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP (action/italic)</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko (focus - row)</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A<sup>1</sup></td>
</tr>
<tr class="gradeC">
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre>function fnMessage ( sMesg )
{
var n = document.getElementById('info');
n.innerHTML += sMesg+"&lt;br&gt;";
n.scrollTop = n.scrollHeight;
}
$(document).ready( function () {
var keys = new KeyTable();
/* Focus handler for all cells in last column */
keys.event.focus( 4, null, function( nNode, x, y ) {
fnMessage( "Cell "+x+","+y+" focused ('live' event - column)" );
} );
/* Focus handler for all cells in 8th row */
keys.event.focus( null, 7, function( nNode, x, y ) {
fnMessage( "Cell "+x+","+y+" focused ('live' event - row)" );
} );
/* Focus using coords. */
keys.event.focus( 1, 0, function( nNode ) {
keys.event.remove.focus( nNode );
fnMessage( "Cell 1,0 focus - this event has now been removed" );
} );
keys.event.focus( 1, 3, function() {
fnMessage( "Cell 1,3 focus" );
} );
/* focus with a node */
keys.event.focus( $('#example tbody tr:eq(2) td:eq(0)')[0], function() {
fnMessage( "Cell 0,2 focus" );
} );
/* Blur using a node */
keys.event.blur( $('#example tbody tr:eq(1) td:eq(2)')[0], function() {
fnMessage( "Cell 1,2 blur" );
} );
/* Blur using coords */
keys.event.blur( 2, 4, function() {
fnMessage( "Cell 2,4 blur" );
} );
/* Action */
keys.event.action( 2, 2, function( nNode ) {
fnMessage( "Cell 2,2 action" );
if ( nNode.style.fontWeight == "" || nNode.style.fontWeight == "normal" ) {
nNode.style.fontWeight = "bold";
} else {
nNode.style.fontWeight = "normal";
}
} );
keys.event.action( 2, 5, function( nNode ) {
fnMessage( "Cell 2,5 action" );
if ( nNode.style.fontStyle == "" ) {
nNode.style.fontStyle = "italic";
} else {
nNode.style.fontStyle = "";
}
} );
} );</pre>
<h1>Other examples</h1>
<ul>
<li><a href="index.html">Basic usage</a></li>
<li><a href="editing.html">Editing a table</a></li>
<li><a href="form.html">Integration with an HTML form</a></li>
<li><a href="datatable.html">Integration with DataTables</a></li>
<li><a href="datatable_scrolling.html">Using KeyTable with scrolling in DataTables</a></li>
</ul>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
KeyTable &copy; Allan Jardine 2009.<br>
Information in the table &copy; <a href="http://www.u4eatech.com">U4EA Technologies</a> 2007-2009.</span>
</div>
</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink