First Initial
This commit is contained in:
@@ -0,0 +1,494 @@
|
||||
<!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>KeyTable / DataTables 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="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="js/KeyTable.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
var oTable = $('#example').dataTable();
|
||||
|
||||
var keys = new KeyTable( {
|
||||
"table": document.getElementById('example'),
|
||||
"datatable": oTable
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
KeyTable with DataTables integration example
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>KeyTable will work great with any plain HTML table, but it also integrates with <a href="http://www.datatables.net/">DataTables</a> plug-in for jQuery. This allows the navigation to take account of paging, sorting etc. This is shown in an example below.</p>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<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</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+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet
|
||||
Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet
|
||||
Explorer 6</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+</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</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</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>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
var oTable = $('#example').dataTable();
|
||||
|
||||
var keys = new KeyTable( {
|
||||
"table": document.getElementById('example'),
|
||||
"datatable": oTable
|
||||
} );
|
||||
} );</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 © Allan Jardine 2009.<br>
|
||||
Information in the table © <a href="http://www.u4eatech.com">U4EA Technologies</a> 2007-2009.</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,502 @@
|
||||
<!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>KeyTable / DataTables 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="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="js/KeyTable.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
var oTable = $('#example').dataTable( {
|
||||
"sScrollY": 200,
|
||||
"sScrollX": "100%",
|
||||
"sScrollXInner": "110%"
|
||||
} );
|
||||
|
||||
var keys = new KeyTable( {
|
||||
"table": document.getElementById('example'),
|
||||
"datatable": oTable
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
KeyTable with DataTables (when using scrolling) integration example
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>A new feature in DataTables 1.7 is the ability to have the table body scroll in the x and y dimensions. KeyTable supports this capability of DataTables "out of the box" (no extra initialisation is needed), as shown in this example.</p>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<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</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+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet
|
||||
Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet
|
||||
Explorer 6</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+</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</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</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>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
var oTable = $('#example').dataTable( {
|
||||
"sScrollY": 200,
|
||||
"sScrollX": "100%",
|
||||
"sScrollXInner": "110%"
|
||||
} );
|
||||
|
||||
var keys = new KeyTable( {
|
||||
"table": document.getElementById('example'),
|
||||
"datatable": oTable
|
||||
} );
|
||||
} );</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 © Allan Jardine 2009.<br>
|
||||
Information in the table © <a href="http://www.u4eatech.com">U4EA Technologies</a> 2007-2009.</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,536 @@
|
||||
<!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 editing 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="../../examples/examples_support/jquery.jeditable.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="js/KeyTable.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
var keys = new KeyTable( {
|
||||
"table": document.getElementById('example')
|
||||
} );
|
||||
|
||||
/* Apply a return key event to each cell in the table */
|
||||
keys.event.action( null, null, function (nCell) {
|
||||
/* Block KeyTable from performing any events while jEditable is in edit mode */
|
||||
keys.block = true;
|
||||
|
||||
/* Initialise the Editable instance for this table */
|
||||
$(nCell).editable( function (sVal) {
|
||||
/* Submit function (local only) - unblock KeyTable */
|
||||
keys.block = false;
|
||||
$(nCell).editable('destroy');
|
||||
return sVal;
|
||||
}, {
|
||||
"onblur": 'submit',
|
||||
"onreset": function(){
|
||||
/* Unblock KeyTable, but only after this 'esc' key event has finished. Otherwise
|
||||
* it will 'esc' KeyTable as well
|
||||
*/
|
||||
$(nCell).editable('destroy');
|
||||
setTimeout( function () {keys.block = false;}, 0);
|
||||
}
|
||||
} );
|
||||
|
||||
/* Dispatch click event to go into edit mode - Saf 4 needs a timeout... */
|
||||
setTimeout( function () { $(nCell).click(); }, 0 );
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
KeyTable editing example
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>Possibly one of the most obvious applications of KeyTable is using it to navigate around a table, allowing a user to edit data as they go. This is an example of how that might be done through integration with the excellent <a href="http://www.appelsiini.net/projects/jeditable">jEditable</a> plug-in for jQuery.</p>
|
||||
<p>To edit data in the table, simply navigate to where you want to edit using the arrow keys, hit return and they make your edit. Hit return again to complete and submit the edit (note this example doesn't actually send the data to the server!) and then continue navigating.</p>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<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</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+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 6</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+</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</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</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>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
var keys = new KeyTable( {
|
||||
"table": document.getElementById('example')
|
||||
} );
|
||||
|
||||
/* Apply a return key event to each cell in the table */
|
||||
keys.event.action( null, null, function (nCell) {
|
||||
/* Block KeyTable from performing any events while jEditable is in edit mode */
|
||||
keys.block = true;
|
||||
|
||||
/* Initialise the Editable instance for this table */
|
||||
$(nCell).editable( function (sVal) {
|
||||
/* Submit function (local only) - unblock KeyTable */
|
||||
keys.block = false;
|
||||
return sVal;
|
||||
}, {
|
||||
"onblur": 'submit',
|
||||
"onreset": function(){
|
||||
/* Unblock KeyTable, but only after this 'esc' key event has finished. Otherwise
|
||||
* it will 'esc' KeyTable as well
|
||||
*/
|
||||
setTimeout( function () {keys.block = false;}, 0);
|
||||
}
|
||||
} );
|
||||
|
||||
/* Dispatch click event to go into edit mode - Saf 4 needs a timeout... */
|
||||
setTimeout( function () { $(nCell).click(); }, 0 );
|
||||
} );
|
||||
} );</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 © Allan Jardine 2009.<br>
|
||||
Information in the table © <a href="http://www.u4eatech.com">U4EA Technologies</a> 2007-2009.</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,133 @@
|
||||
<!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">
|
||||
$(document).ready( function () {
|
||||
var keys = new KeyTable( {
|
||||
"form": true
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
KeyTable form integration example
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<h1>Live example</h1>
|
||||
|
||||
<!-- bad use of a table! quick example of form though -->
|
||||
<table cellspacing="10" cellpadding="0" border="0" width="100%">
|
||||
<tr>
|
||||
<td>Input 1:</td>
|
||||
<td><input type="text" id="input1"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Input 2:</td>
|
||||
<td><input type="text" id="input2"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Input 3:</td>
|
||||
<td>
|
||||
<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</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+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 6</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+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Input 4:</td>
|
||||
<td><input type="text" id="input4"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Input 5:</td>
|
||||
<td><input type="text" id="input5"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
var keys = new KeyTable( {
|
||||
"form": true
|
||||
} );
|
||||
} );</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 © Allan Jardine 2009.<br>
|
||||
Information in the table © <a href="http://www.u4eatech.com">U4EA Technologies</a> 2007-2009.</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,595 @@
|
||||
<!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+"<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 = "";
|
||||
}
|
||||
} );
|
||||
} );</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 © Allan Jardine 2009.<br>
|
||||
Information in the table © <a href="http://www.u4eatech.com">U4EA Technologies</a> 2007-2009.</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
27
wwwroot/BackendScript/assets/advanced-datatable/extras/KeyTable/js/KeyTable.min.js
vendored
Normal file
27
wwwroot/BackendScript/assets/advanced-datatable/extras/KeyTable/js/KeyTable.min.js
vendored
Normal file
@@ -0,0 +1,27 @@
|
||||
/*
|
||||
* File: KeyTable.min.js
|
||||
* Version: 1.1.7
|
||||
* Author: Allan Jardine (www.sprymedia.co.uk)
|
||||
*
|
||||
* Copyright 2009-2011 Allan Jardine, all rights reserved.
|
||||
*
|
||||
* This source file is free software, under either the GPL v2 license or a
|
||||
* BSD (3 point) style license, as supplied with this software.
|
||||
*
|
||||
* This source file is distributed in the hope that it will be useful, but
|
||||
* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
|
||||
* or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
|
||||
*/
|
||||
function KeyTable(n){function G(a){return function(d,c,j){(null===d||"number"==typeof d)&&(null===c||"number"==typeof c)&&"function"==typeof j?i[a].push({x:d,y:c,fn:j}):"object"==typeof d&&"function"==typeof c?(d=A(d),i[a].push({x:d[0],y:d[1],fn:c})):alert("Unhandable event type was added: x"+d+" y:"+c+" z:"+j)}}function H(a){return function(d,c,j){(null===d||"number"==typeof d)&&(null===c||"number"==typeof c)?"function"==typeof j?w(a,d,c,j):w(a,d,c):"object"==typeof d?(d=A(d),"function"==typeof c?
|
||||
w(a,d[0],d[1],c):w(a,d[0],d[1])):alert("Unhandable event type was removed: x"+d+" y:"+c+" z:"+j)}}function w(a,d,c,j){for(var b=0,e=0,g=i[a].length;e<g-b;e++)if("undefined"!=typeof j)i[a][e-b].x==d&&(i[a][e-b].y==c&&i[a][e-b].fn==j)&&(i[a].splice(e-b,1),b++);else if(i[a][e-b].x==d&&i[a][e-b].y==c)return i[a].splice(e,1),1;return b}function x(a,d,c){for(var b=0,a=i[a],h=0;h<a.length;h++)if(a[h].x==d&&a[h].y==c||null===a[h].x&&a[h].y==c||a[h].x==d&&null===a[h].y||null===a[h].x&&null===a[h].y)a[h].fn(t(d,
|
||||
c),d,c),b++;return b}function l(a,d){if(r!=a){"undefined"==typeof d&&(d=!0);null!==r&&B(r);jQuery(a).addClass(u);jQuery(a).parent().addClass(u);var c;if(k){c=k.fnSettings();for(var b=C(a)[1],h=o;b>=c.fnDisplayEnd();)0<=c._iDisplayLength?c._iDisplayStart+c._iDisplayLength<c.fnRecordsDisplay()&&(c._iDisplayStart+=c._iDisplayLength):c._iDisplayStart=0,k.oApi._fnCalculateEnd(c);for(;b<c._iDisplayStart;)c._iDisplayStart=0<=c._iDisplayLength?c._iDisplayStart-c._iDisplayLength:0,0>c._iDisplayStart&&(c._iDisplayStart=
|
||||
0),k.oApi._fnCalculateEnd(c);k.oApi._fnDraw(c);o=h}b=A(a);r=a;m=b[0];g=b[1];var e,i,l,n,f;if(d){e=document.documentElement.clientHeight;b=document.documentElement.clientWidth;i=document.body.scrollTop||document.documentElement.scrollTop;h=document.body.scrollLeft||document.documentElement.scrollLeft;l=a.offsetHeight;n=a.offsetWidth;f=a;var p=0,q=0;if(f.offsetParent){p=f.offsetLeft;q=f.offsetTop;for(f=f.offsetParent;f;)p+=f.offsetLeft,q+=f.offsetTop,f=f.offsetParent}f=[p,q];if(k&&"undefined"!=typeof c.oScroll&&
|
||||
(""!==c.oScroll.sX||""!==c.oScroll.sY))f[1]-=$(c.nTable.parentNode).scrollTop(),f[0]-=$(c.nTable.parentNode).scrollLeft();f[1]+l>i+e?(e=f[1]+l-e,document.documentElement.scrollTop=e,document.body.scrollTop=e):f[1]<i&&(e=f[1],document.documentElement.scrollTop=e,document.body.scrollTop=e);f[0]+n>h+b?(b=f[0]+n-b,document.documentElement.scrollLeft=b,document.body.scrollLeft=b):f[0]<h&&(b=f[0],document.documentElement.scrollLeft=b,document.body.scrollLeft=b)}if(k&&"undefined"!=typeof c.oScroll&&(""!==
|
||||
c.oScroll.sX||""!==c.oScroll.sY))(c=c.nTable.parentNode,e=c.clientHeight,b=c.clientWidth,i=c.scrollTop,h=c.scrollLeft,l=a.offsetHeight,n=a.offsetWidth,a.offsetTop+l>e+i?c.scrollTop=a.offsetTop+l-e:a.offsetTop<i&&(c.scrollTop=a.offsetTop),a.offsetLeft+n>b+h)?c.scrollLeft=a.offsetLeft+n-b:a.offsetLeft<h&&(c.scrollLeft=a.offsetLeft);o||(o=!0);x("focus",m,g)}}function y(){B(r);r=g=m=null;o=!1}function B(a){jQuery(a).removeClass(u);jQuery(a).parent().removeClass(u);x("blur",m,g)}function D(){for(var a=
|
||||
this;"TD"!=a.nodeName;)a=a.parentNode;l(a);o||(o=!0)}function E(a){if(F.block||!o||a.metaKey||a.altKey||a.ctrlKey)return!0;var b;b=v.getElementsByTagName("tr")[0].getElementsByTagName("td").length;var c;if(k){c=k.fnSettings().aiDisplay.length;var j=C(r);if(null===j)return;m=j[0];g=j[1]}else c=v.getElementsByTagName("tr").length;j=9==a.keyCode&&a.shiftKey?-1:a.keyCode;switch(j){case 13:return a.preventDefault(),a.stopPropagation(),x("action",m,g),!0;case 27:if(!x("esc",m,g)){y();return}a=m;b=g;break;
|
||||
case -1:case 37:if(0<m)a=m-1,b=g;else if(0<g)a=b-1,b=g-1;else return-1==j&&z?(q=!0,p.focus(),setTimeout(function(){q=!1},0),o=!1,y(),!0):!1;break;case 38:if(0<g)a=m,b=g-1;else return!1;break;case 9:case 39:if(m<b-1)a=m+1,b=g;else if(g<c-1)a=0,b=g+1;else return 9==j&&z?(q=!0,p.focus(),setTimeout(function(){q=!1},0),o=!1,y(),!0):!1;break;case 40:if(g<c-1)a=m,b=g+1;else return!1;break;default:return!0}l(t(a,b));return!1}function t(a,b){if(k){var c=k.fnSettings();return"undefined"!=typeof c.aoData[c.aiDisplay[b]]?
|
||||
c.aoData[c.aiDisplay[b]].nTr.getElementsByTagName("td")[a]:null}return jQuery("tr:eq("+b+")>td:eq("+a+")",v)[0]}function A(a){if(k){var b=k.fnSettings();return[jQuery("td",a.parentNode).index(a),jQuery("tr",a.parentNode.parentNode).index(a.parentNode)+b._iDisplayStart]}return[jQuery("td",a.parentNode).index(a),jQuery("tr",a.parentNode.parentNode).index(a.parentNode)]}function C(a){for(var b=k.fnSettings(),c=0,g=b.aiDisplay.length;c<g;c++)for(var h=b.aoData[b.aiDisplay[c]].nTr.getElementsByTagName("td"),
|
||||
e=0,i=h.length;e<i;e++)if(h[e]==a)return[e,c];return null}this.block=!1;this.event={remove:{}};this.fnGetCurrentPosition=function(){return[m,g]};this.fnGetCurrentData=function(){return r.innerHTML};this.fnGetCurrentTD=function(){return r};this.fnSetPosition=function(a,b){"object"==typeof a&&a.nodeName?l(a):l(t(a,b))};var v=null,r=null,m=null,g=null,F=null,u="focus",o=!1,i={action:[],esc:[],focus:[],blur:[]},k=null,z,p,q=!1,s;for(s in i)s&&(this.event[s]=G(s),this.event.remove[s]=H(s));var b=n,F=this;
|
||||
"undefined"==typeof b&&(b={});"undefined"==typeof b.focus&&(b.focus=[0,0]);"undefined"==typeof b.table?b.table=jQuery("table.KeyTable")[0]:$(b.table).addClass("KeyTable");"undefined"!=typeof b.focusClass&&(u=b.focusClass);"undefined"!=typeof b.datatable&&(k=b.datatable);"undefined"==typeof b.initScroll&&(b.initScroll=!0);"undefined"==typeof b.form&&(b.form=!1);z=b.form;v=b.table.getElementsByTagName("tbody")[0];z?(n=document.createElement("div"),p=document.createElement("input"),n.style.height="1px",
|
||||
n.style.width="0px",n.style.overflow="hidden","undefined"!=typeof b.tabIndex&&(p.tabIndex=b.tabIndex),n.appendChild(p),b.table.parentNode.insertBefore(n,b.table.nextSibling),jQuery(p).focus(function(){if(!q){o=true;q=false;typeof b.focus.nodeName!="undefined"?l(b.focus,b.initScroll):l(t(b.focus[0],b.focus[1]),b.initScroll);setTimeout(function(){p.blur()},0)}}),o=!1):("undefined"!=typeof b.focus.nodeName?l(b.focus,b.initScroll):l(t(b.focus[0],b.focus[1]),b.initScroll),o||(o=!0));jQuery.browser.mozilla||
|
||||
jQuery.browser.opera?jQuery(document).bind("keypress",E):jQuery(document).bind("keydown",E);k?jQuery("tbody td",k.fnSettings().nTable).live("click",D):jQuery("td",v).live("click",D);jQuery(document).click(function(a){for(var a=a.target,d=false;a;){if(a==b.table){d=true;break}a=a.parentNode}d||y()})};
|
||||
Binary file not shown.
Reference in New Issue
Block a user