First Initial
This commit is contained in:
Nakorn Rientrakrunchai
@@ -0,0 +1,486 @@
|
||||
<!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>FixedHeader example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
.FixedHeader_Cloned th { background-color: white; }
|
||||
</style>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="js/FixedHeader.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
new FixedHeader( document.getElementById('example') );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
FixedHeader example - HTML table
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>FixedHeader will work standalone as well (i.e. without DataTables), as can be seen in this example. The standard settings can be applied to FixedHeader to enhance the table.</p>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" 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 () {
|
||||
new FixedHeader( document.getElementById('example') );
|
||||
} );</pre>
|
||||
|
||||
<h1>Examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic demo with just the HeaderFixed</a></li>
|
||||
<li><a href="html_table.html">FixedHeader without requiring DataTables</a></li>
|
||||
<li><a href="two_tables.html">Two tables with FixedHeaders on a single page</a></li>
|
||||
<li><a href="top_bottom_left_right.html">A spreadsheet style layout with header and footer, left and right columns all fixed.</a></li>
|
||||
<li><a href="zIndexes.html">Change the display order of the fixed elements (zIndex)</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Empty paragraphs to force scrolling!...</p>
|
||||
<p style="height:500px;"> </p>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
FixedHeader and DataTables © Allan Jardine 2009-2010.<br>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,490 @@
|
||||
<!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>FixedHeader example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
.FixedHeader_Cloned th { background-color: white; }
|
||||
</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/FixedHeader.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
var oTable = $('#example').dataTable();
|
||||
new FixedHeader( oTable );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
FixedHeader example
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>When displaying large amounts of data in a table, it can often be useful for the end user to have the column titles (the "thead" element as a whole in fact) always visible. This is particularly true if using DataTables with pagination disabled, or the display length is set to a high value.</p>
|
||||
<p>The "FixedHeader" add-on for DataTables will ensure that your column titles will scroll with the page, showing at the top of the table at all times. Try the demo shown below - you might want to try resizing the window for full effect! Note also that the column titles remain clickable to perform sorting on the table.</p>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" 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();
|
||||
new FixedHeader( oTable );
|
||||
} );</pre>
|
||||
|
||||
<h1>Examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic demo with just the HeaderFixed</a></li>
|
||||
<li><a href="html_table.html">FixedHeader without requiring DataTables</a></li>
|
||||
<li><a href="two_tables.html">Two tables with FixedHeaders on a single page</a></li>
|
||||
<li><a href="top_bottom_left_right.html">A spreadsheet style layout with header and footer, left and right columns all fixed.</a></li>
|
||||
<li><a href="zIndexes.html">Change the display order of the fixed elements (zIndex)</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Empty paragraphs to force scrolling!...</p>
|
||||
<p style="height:500px;"> </p>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
FixedHeader and DataTables © Allan Jardine 2009.<br>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,937 @@
|
||||
/*
|
||||
* File: FixedHeader.js
|
||||
* Version: 2.0.6
|
||||
* Description: "Fix" a header at the top of the table, so it scrolls with the table
|
||||
* Author: Allan Jardine (www.sprymedia.co.uk)
|
||||
* Created: Wed 16 Sep 2009 19:46:30 BST
|
||||
* Language: Javascript
|
||||
* License: GPL v2 or BSD 3 point style
|
||||
* Project: Just a little bit of fun - enjoy :-)
|
||||
* Contact: www.sprymedia.co.uk/contact
|
||||
*
|
||||
* Copyright 2009-2012 Allan Jardine, all rights reserved.
|
||||
*
|
||||
* This source file is free software, under either the GPL v2 license or a
|
||||
* BSD style license, available at:
|
||||
* http://datatables.net/license_gpl2
|
||||
* http://datatables.net/license_bsd
|
||||
*/
|
||||
|
||||
/*
|
||||
* Function: FixedHeader
|
||||
* Purpose: Provide 'fixed' header, footer and columns on an HTML table
|
||||
* Returns: object:FixedHeader - must be called with 'new'
|
||||
* Inputs: mixed:mTable - target table
|
||||
* 1. DataTable object - when using FixedHeader with DataTables, or
|
||||
* 2. HTML table node - when using FixedHeader without DataTables
|
||||
* object:oInit - initialisation settings, with the following properties (each optional)
|
||||
* bool:top - fix the header (default true)
|
||||
* bool:bottom - fix the footer (default false)
|
||||
* bool:left - fix the left most column (default false)
|
||||
* bool:right - fix the right most column (default false)
|
||||
* int:zTop - fixed header zIndex
|
||||
* int:zBottom - fixed footer zIndex
|
||||
* int:zLeft - fixed left zIndex
|
||||
* int:zRight - fixed right zIndex
|
||||
*/
|
||||
var FixedHeader = function ( mTable, oInit ) {
|
||||
/* Sanity check - you just know it will happen */
|
||||
if ( typeof this.fnInit != 'function' )
|
||||
{
|
||||
alert( "FixedHeader warning: FixedHeader must be initialised with the 'new' keyword." );
|
||||
return;
|
||||
}
|
||||
|
||||
var that = this;
|
||||
var oSettings = {
|
||||
"aoCache": [],
|
||||
"oSides": {
|
||||
"top": true,
|
||||
"bottom": false,
|
||||
"left": false,
|
||||
"right": false
|
||||
},
|
||||
"oZIndexes": {
|
||||
"top": 104,
|
||||
"bottom": 103,
|
||||
"left": 102,
|
||||
"right": 101
|
||||
},
|
||||
"oMes": {
|
||||
"iTableWidth": 0,
|
||||
"iTableHeight": 0,
|
||||
"iTableLeft": 0,
|
||||
"iTableRight": 0, /* note this is left+width, not actually "right" */
|
||||
"iTableTop": 0,
|
||||
"iTableBottom": 0 /* note this is top+height, not actually "bottom" */
|
||||
},
|
||||
"oOffset": {
|
||||
"top": 0
|
||||
},
|
||||
"nTable": null,
|
||||
"bUseAbsPos": false,
|
||||
"bFooter": false
|
||||
};
|
||||
|
||||
/*
|
||||
* Function: fnGetSettings
|
||||
* Purpose: Get the settings for this object
|
||||
* Returns: object: - settings object
|
||||
* Inputs: -
|
||||
*/
|
||||
this.fnGetSettings = function () {
|
||||
return oSettings;
|
||||
};
|
||||
|
||||
/*
|
||||
* Function: fnUpdate
|
||||
* Purpose: Update the positioning and copies of the fixed elements
|
||||
* Returns: -
|
||||
* Inputs: -
|
||||
*/
|
||||
this.fnUpdate = function () {
|
||||
this._fnUpdateClones();
|
||||
this._fnUpdatePositions();
|
||||
};
|
||||
|
||||
/*
|
||||
* Function: fnPosition
|
||||
* Purpose: Update the positioning of the fixed elements
|
||||
* Returns: -
|
||||
* Inputs: -
|
||||
*/
|
||||
this.fnPosition = function () {
|
||||
this._fnUpdatePositions();
|
||||
};
|
||||
|
||||
/* Let's do it */
|
||||
this.fnInit( mTable, oInit );
|
||||
|
||||
/* Store the instance on the DataTables object for easy access */
|
||||
if ( typeof mTable.fnSettings == 'function' )
|
||||
{
|
||||
mTable._oPluginFixedHeader = this;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* Variable: FixedHeader
|
||||
* Purpose: Prototype for FixedHeader
|
||||
* Scope: global
|
||||
*/
|
||||
FixedHeader.prototype = {
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Initialisation
|
||||
*/
|
||||
|
||||
/*
|
||||
* Function: fnInit
|
||||
* Purpose: The "constructor"
|
||||
* Returns: -
|
||||
* Inputs: {as FixedHeader function}
|
||||
*/
|
||||
fnInit: function ( oTable, oInit )
|
||||
{
|
||||
var s = this.fnGetSettings();
|
||||
var that = this;
|
||||
|
||||
/* Record the user definable settings */
|
||||
this.fnInitSettings( s, oInit );
|
||||
|
||||
/* DataTables specific stuff */
|
||||
if ( typeof oTable.fnSettings == 'function' )
|
||||
{
|
||||
if ( typeof oTable.fnVersionCheck == 'functon' &&
|
||||
oTable.fnVersionCheck( '1.6.0' ) !== true )
|
||||
{
|
||||
alert( "FixedHeader 2 required DataTables 1.6.0 or later. "+
|
||||
"Please upgrade your DataTables installation" );
|
||||
return;
|
||||
}
|
||||
|
||||
var oDtSettings = oTable.fnSettings();
|
||||
|
||||
if ( oDtSettings.oScroll.sX != "" || oDtSettings.oScroll.sY != "" )
|
||||
{
|
||||
alert( "FixedHeader 2 is not supported with DataTables' scrolling mode at this time" );
|
||||
return;
|
||||
}
|
||||
|
||||
s.nTable = oDtSettings.nTable;
|
||||
oDtSettings.aoDrawCallback.push( {
|
||||
"fn": function () {
|
||||
FixedHeader.fnMeasure();
|
||||
that._fnUpdateClones.call(that);
|
||||
that._fnUpdatePositions.call(that);
|
||||
},
|
||||
"sName": "FixedHeader"
|
||||
} );
|
||||
}
|
||||
else
|
||||
{
|
||||
s.nTable = oTable;
|
||||
}
|
||||
|
||||
s.bFooter = ($('>tfoot', s.nTable).length > 0) ? true : false;
|
||||
|
||||
/* "Detect" browsers that don't support absolute positioing - or have bugs */
|
||||
s.bUseAbsPos = (jQuery.browser.msie && (jQuery.browser.version=="6.0"||jQuery.browser.version=="7.0"));
|
||||
|
||||
/* Add the 'sides' that are fixed */
|
||||
if ( s.oSides.top )
|
||||
{
|
||||
s.aoCache.push( that._fnCloneTable( "fixedHeader", "FixedHeader_Header", that._fnCloneThead ) );
|
||||
}
|
||||
if ( s.oSides.bottom )
|
||||
{
|
||||
s.aoCache.push( that._fnCloneTable( "fixedFooter", "FixedHeader_Footer", that._fnCloneTfoot ) );
|
||||
}
|
||||
if ( s.oSides.left )
|
||||
{
|
||||
s.aoCache.push( that._fnCloneTable( "fixedLeft", "FixedHeader_Left", that._fnCloneTLeft ) );
|
||||
}
|
||||
if ( s.oSides.right )
|
||||
{
|
||||
s.aoCache.push( that._fnCloneTable( "fixedRight", "FixedHeader_Right", that._fnCloneTRight ) );
|
||||
}
|
||||
|
||||
/* Event listeners for window movement */
|
||||
FixedHeader.afnScroll.push( function () {
|
||||
that._fnUpdatePositions.call(that);
|
||||
} );
|
||||
|
||||
jQuery(window).resize( function () {
|
||||
FixedHeader.fnMeasure();
|
||||
that._fnUpdateClones.call(that);
|
||||
that._fnUpdatePositions.call(that);
|
||||
} );
|
||||
|
||||
/* Get things right to start with */
|
||||
FixedHeader.fnMeasure();
|
||||
that._fnUpdateClones();
|
||||
that._fnUpdatePositions();
|
||||
},
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Support functions
|
||||
*/
|
||||
|
||||
/*
|
||||
* Function: fnInitSettings
|
||||
* Purpose: Take the user's settings and copy them to our local store
|
||||
* Returns: -
|
||||
* Inputs: object:s - the local settings object
|
||||
* object:oInit - the user's settings object
|
||||
*/
|
||||
fnInitSettings: function ( s, oInit )
|
||||
{
|
||||
if ( typeof oInit != 'undefined' )
|
||||
{
|
||||
if ( typeof oInit.top != 'undefined' ) {
|
||||
s.oSides.top = oInit.top;
|
||||
}
|
||||
if ( typeof oInit.bottom != 'undefined' ) {
|
||||
s.oSides.bottom = oInit.bottom;
|
||||
}
|
||||
if ( typeof oInit.left != 'undefined' ) {
|
||||
s.oSides.left = oInit.left;
|
||||
}
|
||||
if ( typeof oInit.right != 'undefined' ) {
|
||||
s.oSides.right = oInit.right;
|
||||
}
|
||||
|
||||
if ( typeof oInit.zTop != 'undefined' ) {
|
||||
s.oZIndexes.top = oInit.zTop;
|
||||
}
|
||||
if ( typeof oInit.zBottom != 'undefined' ) {
|
||||
s.oZIndexes.bottom = oInit.zBottom;
|
||||
}
|
||||
if ( typeof oInit.zLeft != 'undefined' ) {
|
||||
s.oZIndexes.left = oInit.zLeft;
|
||||
}
|
||||
if ( typeof oInit.zRight != 'undefined' ) {
|
||||
s.oZIndexes.right = oInit.zRight;
|
||||
}
|
||||
|
||||
if ( typeof oInit.offsetTop != 'undefined' ) {
|
||||
s.oOffset.top = oInit.offsetTop;
|
||||
}
|
||||
}
|
||||
|
||||
/* Detect browsers which have poor position:fixed support so we can use absolute positions.
|
||||
* This is much slower since the position must be updated for each scroll, but widens
|
||||
* compatibility
|
||||
*/
|
||||
s.bUseAbsPos = (jQuery.browser.msie &&
|
||||
(jQuery.browser.version=="6.0"||jQuery.browser.version=="7.0"));
|
||||
},
|
||||
|
||||
/*
|
||||
* Function: _fnCloneTable
|
||||
* Purpose: Clone the table node and do basic initialisation
|
||||
* Returns: -
|
||||
* Inputs: -
|
||||
*/
|
||||
_fnCloneTable: function ( sType, sClass, fnClone )
|
||||
{
|
||||
var s = this.fnGetSettings();
|
||||
var nCTable;
|
||||
|
||||
/* We know that the table _MUST_ has a DIV wrapped around it, because this is simply how
|
||||
* DataTables works. Therefore, we can set this to be relatively position (if it is not
|
||||
* alreadu absolute, and use this as the base point for the cloned header
|
||||
*/
|
||||
if ( jQuery(s.nTable.parentNode).css('position') != "absolute" )
|
||||
{
|
||||
s.nTable.parentNode.style.position = "relative";
|
||||
}
|
||||
|
||||
/* Just a shallow clone will do - we only want the table node */
|
||||
nCTable = s.nTable.cloneNode( false );
|
||||
nCTable.removeAttribute( 'id' );
|
||||
|
||||
var nDiv = document.createElement( 'div' );
|
||||
nDiv.style.position = "absolute";
|
||||
nDiv.style.top = "0px";
|
||||
nDiv.style.left = "0px";
|
||||
nDiv.className += " FixedHeader_Cloned "+sType+" "+sClass;
|
||||
|
||||
/* Set the zIndexes */
|
||||
if ( sType == "fixedHeader" )
|
||||
{
|
||||
nDiv.style.zIndex = s.oZIndexes.top;
|
||||
}
|
||||
if ( sType == "fixedFooter" )
|
||||
{
|
||||
nDiv.style.zIndex = s.oZIndexes.bottom;
|
||||
}
|
||||
if ( sType == "fixedLeft" )
|
||||
{
|
||||
nDiv.style.zIndex = s.oZIndexes.left;
|
||||
}
|
||||
else if ( sType == "fixedRight" )
|
||||
{
|
||||
nDiv.style.zIndex = s.oZIndexes.right;
|
||||
}
|
||||
|
||||
/* remove margins since we are going to poistion it absolutely */
|
||||
nCTable.style.margin = "0";
|
||||
|
||||
/* Insert the newly cloned table into the DOM, on top of the "real" header */
|
||||
nDiv.appendChild( nCTable );
|
||||
document.body.appendChild( nDiv );
|
||||
|
||||
return {
|
||||
"nNode": nCTable,
|
||||
"nWrapper": nDiv,
|
||||
"sType": sType,
|
||||
"sPosition": "",
|
||||
"sTop": "",
|
||||
"sLeft": "",
|
||||
"fnClone": fnClone
|
||||
};
|
||||
},
|
||||
|
||||
/*
|
||||
* Function: _fnUpdatePositions
|
||||
* Purpose: Get the current positioning of the table in the DOM
|
||||
* Returns: -
|
||||
* Inputs: -
|
||||
*/
|
||||
_fnMeasure: function ()
|
||||
{
|
||||
var
|
||||
s = this.fnGetSettings(),
|
||||
m = s.oMes,
|
||||
jqTable = jQuery(s.nTable),
|
||||
oOffset = jqTable.offset(),
|
||||
iParentScrollTop = this._fnSumScroll( s.nTable.parentNode, 'scrollTop' ),
|
||||
iParentScrollLeft = this._fnSumScroll( s.nTable.parentNode, 'scrollLeft' );
|
||||
|
||||
m.iTableWidth = jqTable.outerWidth();
|
||||
m.iTableHeight = jqTable.outerHeight();
|
||||
m.iTableLeft = oOffset.left + s.nTable.parentNode.scrollLeft;
|
||||
m.iTableTop = oOffset.top + iParentScrollTop;
|
||||
m.iTableRight = m.iTableLeft + m.iTableWidth;
|
||||
m.iTableRight = FixedHeader.oDoc.iWidth - m.iTableLeft - m.iTableWidth;
|
||||
m.iTableBottom = FixedHeader.oDoc.iHeight - m.iTableTop - m.iTableHeight;
|
||||
},
|
||||
|
||||
/*
|
||||
* Function: _fnSumScroll
|
||||
* Purpose: Sum node parameters all the way to the top
|
||||
* Returns: int: sum
|
||||
* Inputs: node:n - node to consider
|
||||
* string:side - scrollTop or scrollLeft
|
||||
*/
|
||||
_fnSumScroll: function ( n, side )
|
||||
{
|
||||
var i = n[side];
|
||||
while ( n = n.parentNode )
|
||||
{
|
||||
if ( n.nodeName == 'HTML' || n.nodeName == 'BODY' )
|
||||
{
|
||||
break;
|
||||
}
|
||||
i = n[side];
|
||||
}
|
||||
return i;
|
||||
},
|
||||
|
||||
/*
|
||||
* Function: _fnUpdatePositions
|
||||
* Purpose: Loop over the fixed elements for this table and update their positions
|
||||
* Returns: -
|
||||
* Inputs: -
|
||||
*/
|
||||
_fnUpdatePositions: function ()
|
||||
{
|
||||
var s = this.fnGetSettings();
|
||||
this._fnMeasure();
|
||||
|
||||
for ( var i=0, iLen=s.aoCache.length ; i<iLen ; i++ )
|
||||
{
|
||||
if ( s.aoCache[i].sType == "fixedHeader" )
|
||||
{
|
||||
this._fnScrollFixedHeader( s.aoCache[i] );
|
||||
}
|
||||
else if ( s.aoCache[i].sType == "fixedFooter" )
|
||||
{
|
||||
this._fnScrollFixedFooter( s.aoCache[i] );
|
||||
}
|
||||
else if ( s.aoCache[i].sType == "fixedLeft" )
|
||||
{
|
||||
this._fnScrollHorizontalLeft( s.aoCache[i] );
|
||||
}
|
||||
else
|
||||
{
|
||||
this._fnScrollHorizontalRight( s.aoCache[i] );
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* Function: _fnUpdateClones
|
||||
* Purpose: Loop over the fixed elements for this table and call their cloning functions
|
||||
* Returns: -
|
||||
* Inputs: -
|
||||
*/
|
||||
_fnUpdateClones: function ()
|
||||
{
|
||||
var s = this.fnGetSettings();
|
||||
for ( var i=0, iLen=s.aoCache.length ; i<iLen ; i++ )
|
||||
{
|
||||
s.aoCache[i].fnClone.call( this, s.aoCache[i] );
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Scrolling functions
|
||||
*/
|
||||
|
||||
/*
|
||||
* Function: _fnScrollHorizontalLeft
|
||||
* Purpose: Update the positioning of the scrolling elements
|
||||
* Returns: -
|
||||
* Inputs: object:oCache - the cahced values for this fixed element
|
||||
*/
|
||||
_fnScrollHorizontalRight: function ( oCache )
|
||||
{
|
||||
var
|
||||
s = this.fnGetSettings(),
|
||||
oMes = s.oMes,
|
||||
oWin = FixedHeader.oWin,
|
||||
oDoc = FixedHeader.oDoc,
|
||||
nTable = oCache.nWrapper,
|
||||
iFixedWidth = jQuery(nTable).outerWidth();
|
||||
|
||||
if ( oWin.iScrollRight < oMes.iTableRight )
|
||||
{
|
||||
/* Fully right aligned */
|
||||
this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sLeft', (oMes.iTableLeft+oMes.iTableWidth-iFixedWidth)+"px", 'left', nTable.style );
|
||||
}
|
||||
else if ( oMes.iTableLeft < oDoc.iWidth-oWin.iScrollRight-iFixedWidth )
|
||||
{
|
||||
/* Middle */
|
||||
if ( s.bUseAbsPos )
|
||||
{
|
||||
this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sLeft', (oDoc.iWidth-oWin.iScrollRight-iFixedWidth)+"px", 'left', nTable.style );
|
||||
}
|
||||
else
|
||||
{
|
||||
this._fnUpdateCache( oCache, 'sPosition', 'fixed', 'position', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sTop', (oMes.iTableTop-oWin.iScrollTop)+"px", 'top', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sLeft', (oWin.iWidth-iFixedWidth)+"px", 'left', nTable.style );
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
/* Fully left aligned */
|
||||
this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* Function: _fnScrollHorizontalLeft
|
||||
* Purpose: Update the positioning of the scrolling elements
|
||||
* Returns: -
|
||||
* Inputs: object:oCache - the cahced values for this fixed element
|
||||
*/
|
||||
_fnScrollHorizontalLeft: function ( oCache )
|
||||
{
|
||||
var
|
||||
s = this.fnGetSettings(),
|
||||
oMes = s.oMes,
|
||||
oWin = FixedHeader.oWin,
|
||||
oDoc = FixedHeader.oDoc,
|
||||
nTable = oCache.nWrapper,
|
||||
iCellWidth = jQuery(nTable).outerWidth();
|
||||
|
||||
if ( oWin.iScrollLeft < oMes.iTableLeft )
|
||||
{
|
||||
/* Fully left align */
|
||||
this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
|
||||
}
|
||||
else if ( oWin.iScrollLeft < oMes.iTableLeft+oMes.iTableWidth-iCellWidth )
|
||||
{
|
||||
/* Middle */
|
||||
if ( s.bUseAbsPos )
|
||||
{
|
||||
this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sLeft', oWin.iScrollLeft+"px", 'left', nTable.style );
|
||||
}
|
||||
else
|
||||
{
|
||||
this._fnUpdateCache( oCache, 'sPosition', 'fixed', 'position', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sTop', (oMes.iTableTop-oWin.iScrollTop)+"px", 'top', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sLeft', "0px", 'left', nTable.style );
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
/* Fully right align */
|
||||
this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sLeft', (oMes.iTableLeft+oMes.iTableWidth-iCellWidth)+"px", 'left', nTable.style );
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* Function: _fnScrollFixedFooter
|
||||
* Purpose: Update the positioning of the scrolling elements
|
||||
* Returns: -
|
||||
* Inputs: object:oCache - the cahced values for this fixed element
|
||||
*/
|
||||
_fnScrollFixedFooter: function ( oCache )
|
||||
{
|
||||
var
|
||||
s = this.fnGetSettings(),
|
||||
oMes = s.oMes,
|
||||
oWin = FixedHeader.oWin,
|
||||
oDoc = FixedHeader.oDoc,
|
||||
nTable = oCache.nWrapper,
|
||||
iTheadHeight = jQuery("thead", s.nTable).outerHeight(),
|
||||
iCellHeight = jQuery(nTable).outerHeight();
|
||||
|
||||
if ( oWin.iScrollBottom < oMes.iTableBottom )
|
||||
{
|
||||
/* Below */
|
||||
this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sTop', (oMes.iTableTop+oMes.iTableHeight-iCellHeight)+"px", 'top', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
|
||||
}
|
||||
else if ( oWin.iScrollBottom < oMes.iTableBottom+oMes.iTableHeight-iCellHeight-iTheadHeight )
|
||||
{
|
||||
/* Middle */
|
||||
if ( s.bUseAbsPos )
|
||||
{
|
||||
this._fnUpdateCache( oCache, 'sPosition', "absolute", 'position', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sTop', (oDoc.iHeight-oWin.iScrollBottom-iCellHeight)+"px", 'top', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
|
||||
}
|
||||
else
|
||||
{
|
||||
this._fnUpdateCache( oCache, 'sPosition', 'fixed', 'position', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sTop', (oWin.iHeight-iCellHeight)+"px", 'top', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sLeft', (oMes.iTableLeft-oWin.iScrollLeft)+"px", 'left', nTable.style );
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
/* Above */
|
||||
this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sTop', (oMes.iTableTop+iCellHeight)+"px", 'top', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* Function: _fnScrollFixedHeader
|
||||
* Purpose: Update the positioning of the scrolling elements
|
||||
* Returns: -
|
||||
* Inputs: object:oCache - the cahced values for this fixed element
|
||||
*/
|
||||
_fnScrollFixedHeader: function ( oCache )
|
||||
{
|
||||
var
|
||||
s = this.fnGetSettings(),
|
||||
oMes = s.oMes,
|
||||
oWin = FixedHeader.oWin,
|
||||
oDoc = FixedHeader.oDoc,
|
||||
nTable = oCache.nWrapper,
|
||||
iTbodyHeight = 0,
|
||||
anTbodies = s.nTable.getElementsByTagName('tbody');
|
||||
|
||||
for (var i = 0; i < anTbodies.length; ++i) {
|
||||
iTbodyHeight += anTbodies[i].offsetHeight;
|
||||
}
|
||||
|
||||
if ( oMes.iTableTop > oWin.iScrollTop + s.oOffset.top )
|
||||
{
|
||||
/* Above the table */
|
||||
this._fnUpdateCache( oCache, 'sPosition', "absolute", 'position', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
|
||||
}
|
||||
else if ( oWin.iScrollTop + s.oOffset.top > oMes.iTableTop+iTbodyHeight )
|
||||
{
|
||||
/* At the bottom of the table */
|
||||
this._fnUpdateCache( oCache, 'sPosition', "absolute", 'position', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sTop', (oMes.iTableTop+iTbodyHeight)+"px", 'top', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
|
||||
}
|
||||
else
|
||||
{
|
||||
/* In the middle of the table */
|
||||
if ( s.bUseAbsPos )
|
||||
{
|
||||
this._fnUpdateCache( oCache, 'sPosition', "absolute", 'position', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sTop', oWin.iScrollTop+"px", 'top', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
|
||||
}
|
||||
else
|
||||
{
|
||||
this._fnUpdateCache( oCache, 'sPosition', 'fixed', 'position', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sTop', s.oOffset.top+"px", 'top', nTable.style );
|
||||
this._fnUpdateCache( oCache, 'sLeft', (oMes.iTableLeft-oWin.iScrollLeft)+"px", 'left', nTable.style );
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* Function: _fnUpdateCache
|
||||
* Purpose: Check the cache and update cache and value if needed
|
||||
* Returns: -
|
||||
* Inputs: object:oCache - local cache object
|
||||
* string:sCache - cache property
|
||||
* string:sSet - value to set
|
||||
* string:sProperty - object property to set
|
||||
* object:oObj - object to update
|
||||
*/
|
||||
_fnUpdateCache: function ( oCache, sCache, sSet, sProperty, oObj )
|
||||
{
|
||||
if ( oCache[sCache] != sSet )
|
||||
{
|
||||
oObj[sProperty] = sSet;
|
||||
oCache[sCache] = sSet;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Cloning functions
|
||||
*/
|
||||
|
||||
/*
|
||||
* Function: _fnCloneThead
|
||||
* Purpose: Clone the thead element
|
||||
* Returns: -
|
||||
* Inputs: object:oCache - the cahced values for this fixed element
|
||||
*/
|
||||
_fnCloneThead: function ( oCache )
|
||||
{
|
||||
var s = this.fnGetSettings();
|
||||
var nTable = oCache.nNode;
|
||||
|
||||
/* Set the wrapper width to match that of the cloned table */
|
||||
oCache.nWrapper.style.width = jQuery(s.nTable).outerWidth()+"px";
|
||||
|
||||
/* Remove any children the cloned table has */
|
||||
while ( nTable.childNodes.length > 0 )
|
||||
{
|
||||
jQuery('thead th', nTable).unbind( 'click' );
|
||||
nTable.removeChild( nTable.childNodes[0] );
|
||||
}
|
||||
|
||||
/* Clone the DataTables header */
|
||||
var nThead = jQuery('thead', s.nTable).clone(true)[0];
|
||||
nTable.appendChild( nThead );
|
||||
|
||||
/* Copy the widths across - apparently a clone isn't good enough for this */
|
||||
jQuery("thead>tr th", s.nTable).each( function (i) {
|
||||
jQuery("thead>tr th:eq("+i+")", nTable).width( jQuery(this).width() );
|
||||
} );
|
||||
|
||||
jQuery("thead>tr td", s.nTable).each( function (i) {
|
||||
jQuery("thead>tr td:eq("+i+")", nTable).width( jQuery(this).width() );
|
||||
} );
|
||||
},
|
||||
|
||||
/*
|
||||
* Function: _fnCloneTfoot
|
||||
* Purpose: Clone the tfoot element
|
||||
* Returns: -
|
||||
* Inputs: object:oCache - the cahced values for this fixed element
|
||||
*/
|
||||
_fnCloneTfoot: function ( oCache )
|
||||
{
|
||||
var s = this.fnGetSettings();
|
||||
var nTable = oCache.nNode;
|
||||
|
||||
/* Set the wrapper width to match that of the cloned table */
|
||||
oCache.nWrapper.style.width = jQuery(s.nTable).outerWidth()+"px";
|
||||
|
||||
/* Remove any children the cloned table has */
|
||||
while ( nTable.childNodes.length > 0 )
|
||||
{
|
||||
nTable.removeChild( nTable.childNodes[0] );
|
||||
}
|
||||
|
||||
/* Clone the DataTables footer */
|
||||
var nTfoot = jQuery('tfoot', s.nTable).clone(true)[0];
|
||||
nTable.appendChild( nTfoot );
|
||||
|
||||
/* Copy the widths across - apparently a clone isn't good enough for this */
|
||||
jQuery("tfoot:eq(0)>tr th", s.nTable).each( function (i) {
|
||||
jQuery("tfoot:eq(0)>tr th:eq("+i+")", nTable).width( jQuery(this).width() );
|
||||
} );
|
||||
|
||||
jQuery("tfoot:eq(0)>tr td", s.nTable).each( function (i) {
|
||||
jQuery("tfoot:eq(0)>tr th:eq("+i+")", nTable)[0].style.width( jQuery(this).width() );
|
||||
} );
|
||||
},
|
||||
|
||||
/*
|
||||
* Function: _fnCloneTLeft
|
||||
* Purpose: Clone the left column
|
||||
* Returns: -
|
||||
* Inputs: object:oCache - the cached values for this fixed element
|
||||
*/
|
||||
_fnCloneTLeft: function ( oCache )
|
||||
{
|
||||
var s = this.fnGetSettings();
|
||||
var nTable = oCache.nNode;
|
||||
var nBody = $('tbody', s.nTable)[0];
|
||||
var iCols = $('tbody tr:eq(0) td', s.nTable).length;
|
||||
var bRubbishOldIE = ($.browser.msie && ($.browser.version == "6.0" || $.browser.version == "7.0"));
|
||||
|
||||
/* Remove any children the cloned table has */
|
||||
while ( nTable.childNodes.length > 0 )
|
||||
{
|
||||
nTable.removeChild( nTable.childNodes[0] );
|
||||
}
|
||||
|
||||
/* Is this the most efficient way to do this - it looks horrible... */
|
||||
nTable.appendChild( jQuery("thead", s.nTable).clone(true)[0] );
|
||||
nTable.appendChild( jQuery("tbody", s.nTable).clone(true)[0] );
|
||||
if ( s.bFooter )
|
||||
{
|
||||
nTable.appendChild( jQuery("tfoot", s.nTable).clone(true)[0] );
|
||||
}
|
||||
|
||||
/* Remove unneeded cells */
|
||||
$('thead tr', nTable).each( function (k) {
|
||||
$('th:gt(0)', this).remove();
|
||||
} );
|
||||
|
||||
$('tfoot tr', nTable).each( function (k) {
|
||||
$('th:gt(0)', this).remove();
|
||||
} );
|
||||
|
||||
$('tbody tr', nTable).each( function (k) {
|
||||
$('td:gt(0)', this).remove();
|
||||
} );
|
||||
|
||||
this.fnEqualiseHeights( 'tbody', nBody.parentNode, nTable );
|
||||
|
||||
var iWidth = jQuery('thead tr th:eq(0)', s.nTable).outerWidth();
|
||||
nTable.style.width = iWidth+"px";
|
||||
oCache.nWrapper.style.width = iWidth+"px";
|
||||
},
|
||||
|
||||
/*
|
||||
* Function: _fnCloneTRight
|
||||
* Purpose: Clone the right most colun
|
||||
* Returns: -
|
||||
* Inputs: object:oCache - the cahced values for this fixed element
|
||||
*/
|
||||
_fnCloneTRight: function ( oCache )
|
||||
{
|
||||
var s = this.fnGetSettings();
|
||||
var nBody = $('tbody', s.nTable)[0];
|
||||
var nTable = oCache.nNode;
|
||||
var iCols = jQuery('tbody tr:eq(0) td', s.nTable).length;
|
||||
var bRubbishOldIE = ($.browser.msie && ($.browser.version == "6.0" || $.browser.version == "7.0"));
|
||||
|
||||
/* Remove any children the cloned table has */
|
||||
while ( nTable.childNodes.length > 0 )
|
||||
{
|
||||
nTable.removeChild( nTable.childNodes[0] );
|
||||
}
|
||||
|
||||
/* Is this the most efficient way to do this - it looks horrible... */
|
||||
nTable.appendChild( jQuery("thead", s.nTable).clone(true)[0] );
|
||||
nTable.appendChild( jQuery("tbody", s.nTable).clone(true)[0] );
|
||||
if ( s.bFooter )
|
||||
{
|
||||
nTable.appendChild( jQuery("tfoot", s.nTable).clone(true)[0] );
|
||||
}
|
||||
jQuery('thead tr th:not(:nth-child('+iCols+'n))', nTable).remove();
|
||||
jQuery('tfoot tr th:not(:nth-child('+iCols+'n))', nTable).remove();
|
||||
|
||||
/* Remove unneeded cells */
|
||||
$('tbody tr', nTable).each( function (k) {
|
||||
$('td:lt('+(iCols-1)+')', this).remove();
|
||||
} );
|
||||
|
||||
this.fnEqualiseHeights( 'tbody', nBody.parentNode, nTable );
|
||||
|
||||
var iWidth = jQuery('thead tr th:eq('+(iCols-1)+')', s.nTable).outerWidth();
|
||||
nTable.style.width = iWidth+"px";
|
||||
oCache.nWrapper.style.width = iWidth+"px";
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Equalise the heights of the rows in a given table node in a cross browser way. Note that this
|
||||
* is more or less lifted as is from FixedColumns
|
||||
* @method fnEqualiseHeights
|
||||
* @returns void
|
||||
* @param {string} parent Node type - thead, tbody or tfoot
|
||||
* @param {element} original Original node to take the heights from
|
||||
* @param {element} clone Copy the heights to
|
||||
* @private
|
||||
*/
|
||||
"fnEqualiseHeights": function ( parent, original, clone )
|
||||
{
|
||||
var that = this,
|
||||
jqBoxHack = $(parent+' tr:eq(0)', original).children(':eq(0)'),
|
||||
iBoxHack = jqBoxHack.outerHeight() - jqBoxHack.height(),
|
||||
bRubbishOldIE = ($.browser.msie && ($.browser.version == "6.0" || $.browser.version == "7.0"));
|
||||
|
||||
/* Remove cells which are not needed and copy the height from the original table */
|
||||
$(parent+' tr', clone).each( function (k) {
|
||||
/* Can we use some kind of object detection here?! This is very nasty - damn browsers */
|
||||
if ( $.browser.mozilla || $.browser.opera )
|
||||
{
|
||||
$(this).children().height( $(parent+' tr:eq('+k+')', original).outerHeight() );
|
||||
}
|
||||
else
|
||||
{
|
||||
$(this).children().height( $(parent+' tr:eq('+k+')', original).outerHeight() - iBoxHack );
|
||||
}
|
||||
|
||||
if ( !bRubbishOldIE )
|
||||
{
|
||||
$(parent+' tr:eq('+k+')', original).height( $(parent+' tr:eq('+k+')', original).outerHeight() );
|
||||
}
|
||||
} );
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Static properties and methods
|
||||
* We use these for speed! This information is common to all instances of FixedHeader, so no
|
||||
* point if having them calculated and stored for each different instance.
|
||||
*/
|
||||
|
||||
/*
|
||||
* Variable: oWin
|
||||
* Purpose: Store information about the window positioning
|
||||
* Scope: FixedHeader
|
||||
*/
|
||||
FixedHeader.oWin = {
|
||||
"iScrollTop": 0,
|
||||
"iScrollRight": 0,
|
||||
"iScrollBottom": 0,
|
||||
"iScrollLeft": 0,
|
||||
"iHeight": 0,
|
||||
"iWidth": 0
|
||||
};
|
||||
|
||||
/*
|
||||
* Variable: oDoc
|
||||
* Purpose: Store information about the document size
|
||||
* Scope: FixedHeader
|
||||
*/
|
||||
FixedHeader.oDoc = {
|
||||
"iHeight": 0,
|
||||
"iWidth": 0
|
||||
};
|
||||
|
||||
/*
|
||||
* Variable: afnScroll
|
||||
* Purpose: Array of functions that are to be used for the scrolling components
|
||||
* Scope: FixedHeader
|
||||
*/
|
||||
FixedHeader.afnScroll = [];
|
||||
|
||||
/*
|
||||
* Function: fnMeasure
|
||||
* Purpose: Update the measurements for the window and document
|
||||
* Returns: -
|
||||
* Inputs: -
|
||||
*/
|
||||
FixedHeader.fnMeasure = function ()
|
||||
{
|
||||
var
|
||||
jqWin = jQuery(window),
|
||||
jqDoc = jQuery(document),
|
||||
oWin = FixedHeader.oWin,
|
||||
oDoc = FixedHeader.oDoc;
|
||||
|
||||
oDoc.iHeight = jqDoc.height();
|
||||
oDoc.iWidth = jqDoc.width();
|
||||
|
||||
oWin.iHeight = jqWin.height();
|
||||
oWin.iWidth = jqWin.width();
|
||||
oWin.iScrollTop = jqWin.scrollTop();
|
||||
oWin.iScrollLeft = jqWin.scrollLeft();
|
||||
oWin.iScrollRight = oDoc.iWidth - oWin.iScrollLeft - oWin.iWidth;
|
||||
oWin.iScrollBottom = oDoc.iHeight - oWin.iScrollTop - oWin.iHeight;
|
||||
};
|
||||
|
||||
|
||||
FixedHeader.VERSION = "2.0.6";
|
||||
FixedHeader.prototype.VERSION = FixedHeader.VERSION;
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* Global processing
|
||||
*/
|
||||
|
||||
/*
|
||||
* Just one 'scroll' event handler in FixedHeader, which calls the required components. This is
|
||||
* done as an optimisation, to reduce calculation and proagation time
|
||||
*/
|
||||
jQuery(window).scroll( function () {
|
||||
FixedHeader.fnMeasure();
|
||||
for ( var i=0, iLen=FixedHeader.afnScroll.length ; i<iLen ; i++ )
|
||||
{
|
||||
FixedHeader.afnScroll[i]();
|
||||
}
|
||||
} );
|
||||
40
wwwroot/BackendScript/assets/advanced-datatable/extras/FixedHeader/js/FixedHeader.min.js
vendored
Normal file
40
wwwroot/BackendScript/assets/advanced-datatable/extras/FixedHeader/js/FixedHeader.min.js
vendored
Normal file
@@ -0,0 +1,40 @@
|
||||
/*
|
||||
* File: FixedHeader.min.js
|
||||
* Version: 2.0.6
|
||||
* 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.
|
||||
*/
|
||||
var FixedHeader=function(a,c){if("function"!=typeof this.fnInit)alert("FixedHeader warning: FixedHeader must be initialised with the 'new' keyword.");else{var b={aoCache:[],oSides:{top:!0,bottom:!1,left:!1,right:!1},oZIndexes:{top:104,bottom:103,left:102,right:101},oMes:{iTableWidth:0,iTableHeight:0,iTableLeft:0,iTableRight:0,iTableTop:0,iTableBottom:0},oOffset:{top:0},nTable:null,bUseAbsPos:!1,bFooter:!1};this.fnGetSettings=function(){return b};this.fnUpdate=function(){this._fnUpdateClones();this._fnUpdatePositions()};
|
||||
this.fnPosition=function(){this._fnUpdatePositions()};this.fnInit(a,c);"function"==typeof a.fnSettings&&(a._oPluginFixedHeader=this)}};
|
||||
FixedHeader.prototype={fnInit:function(a,c){var b=this.fnGetSettings(),d=this;this.fnInitSettings(b,c);if("function"==typeof a.fnSettings){if("functon"==typeof a.fnVersionCheck&&!0!==a.fnVersionCheck("1.6.0")){alert("FixedHeader 2 required DataTables 1.6.0 or later. Please upgrade your DataTables installation");return}var e=a.fnSettings();if(""!=e.oScroll.sX||""!=e.oScroll.sY){alert("FixedHeader 2 is not supported with DataTables' scrolling mode at this time");return}b.nTable=e.nTable;e.aoDrawCallback.push({fn:function(){FixedHeader.fnMeasure();
|
||||
d._fnUpdateClones.call(d);d._fnUpdatePositions.call(d)},sName:"FixedHeader"})}else b.nTable=a;b.bFooter=0<$(">tfoot",b.nTable).length?!0:!1;b.bUseAbsPos=jQuery.browser.msie&&("6.0"==jQuery.browser.version||"7.0"==jQuery.browser.version);b.oSides.top&&b.aoCache.push(d._fnCloneTable("fixedHeader","FixedHeader_Header",d._fnCloneThead));b.oSides.bottom&&b.aoCache.push(d._fnCloneTable("fixedFooter","FixedHeader_Footer",d._fnCloneTfoot));b.oSides.left&&b.aoCache.push(d._fnCloneTable("fixedLeft","FixedHeader_Left",
|
||||
d._fnCloneTLeft));b.oSides.right&&b.aoCache.push(d._fnCloneTable("fixedRight","FixedHeader_Right",d._fnCloneTRight));FixedHeader.afnScroll.push(function(){d._fnUpdatePositions.call(d)});jQuery(window).resize(function(){FixedHeader.fnMeasure();d._fnUpdateClones.call(d);d._fnUpdatePositions.call(d)});FixedHeader.fnMeasure();d._fnUpdateClones();d._fnUpdatePositions()},fnInitSettings:function(a,c){if("undefined"!=typeof c&&("undefined"!=typeof c.top&&(a.oSides.top=c.top),"undefined"!=typeof c.bottom&&
|
||||
(a.oSides.bottom=c.bottom),"undefined"!=typeof c.left&&(a.oSides.left=c.left),"undefined"!=typeof c.right&&(a.oSides.right=c.right),"undefined"!=typeof c.zTop&&(a.oZIndexes.top=c.zTop),"undefined"!=typeof c.zBottom&&(a.oZIndexes.bottom=c.zBottom),"undefined"!=typeof c.zLeft&&(a.oZIndexes.left=c.zLeft),"undefined"!=typeof c.zRight&&(a.oZIndexes.right=c.zRight),"undefined"!=typeof c.offsetTop))a.oOffset.top=c.offsetTop;a.bUseAbsPos=jQuery.browser.msie&&("6.0"==jQuery.browser.version||"7.0"==jQuery.browser.version)},
|
||||
_fnCloneTable:function(a,c,b){var d=this.fnGetSettings(),e;"absolute"!=jQuery(d.nTable.parentNode).css("position")&&(d.nTable.parentNode.style.position="relative");e=d.nTable.cloneNode(!1);e.removeAttribute("id");var f=document.createElement("div");f.style.position="absolute";f.style.top="0px";f.style.left="0px";f.className+=" FixedHeader_Cloned "+a+" "+c;"fixedHeader"==a&&(f.style.zIndex=d.oZIndexes.top);"fixedFooter"==a&&(f.style.zIndex=d.oZIndexes.bottom);"fixedLeft"==a?f.style.zIndex=d.oZIndexes.left:
|
||||
"fixedRight"==a&&(f.style.zIndex=d.oZIndexes.right);e.style.margin="0";f.appendChild(e);document.body.appendChild(f);return{nNode:e,nWrapper:f,sType:a,sPosition:"",sTop:"",sLeft:"",fnClone:b}},_fnMeasure:function(){var a=this.fnGetSettings(),c=a.oMes,b=jQuery(a.nTable),d=b.offset(),e=this._fnSumScroll(a.nTable.parentNode,"scrollTop");this._fnSumScroll(a.nTable.parentNode,"scrollLeft");c.iTableWidth=b.outerWidth();c.iTableHeight=b.outerHeight();c.iTableLeft=d.left+a.nTable.parentNode.scrollLeft;c.iTableTop=
|
||||
d.top+e;c.iTableRight=c.iTableLeft+c.iTableWidth;c.iTableRight=FixedHeader.oDoc.iWidth-c.iTableLeft-c.iTableWidth;c.iTableBottom=FixedHeader.oDoc.iHeight-c.iTableTop-c.iTableHeight},_fnSumScroll:function(a,c){for(var b=a[c];(a=a.parentNode)&&!("HTML"==a.nodeName||"BODY"==a.nodeName);)b=a[c];return b},_fnUpdatePositions:function(){var a=this.fnGetSettings();this._fnMeasure();for(var c=0,b=a.aoCache.length;c<b;c++)"fixedHeader"==a.aoCache[c].sType?this._fnScrollFixedHeader(a.aoCache[c]):"fixedFooter"==
|
||||
a.aoCache[c].sType?this._fnScrollFixedFooter(a.aoCache[c]):"fixedLeft"==a.aoCache[c].sType?this._fnScrollHorizontalLeft(a.aoCache[c]):this._fnScrollHorizontalRight(a.aoCache[c])},_fnUpdateClones:function(){for(var a=this.fnGetSettings(),c=0,b=a.aoCache.length;c<b;c++)a.aoCache[c].fnClone.call(this,a.aoCache[c])},_fnScrollHorizontalRight:function(a){var c=this.fnGetSettings(),b=c.oMes,d=FixedHeader.oWin,e=FixedHeader.oDoc,f=a.nWrapper,g=jQuery(f).outerWidth();d.iScrollRight<b.iTableRight?(this._fnUpdateCache(a,
|
||||
"sPosition","absolute","position",f.style),this._fnUpdateCache(a,"sTop",b.iTableTop+"px","top",f.style),this._fnUpdateCache(a,"sLeft",b.iTableLeft+b.iTableWidth-g+"px","left",f.style)):b.iTableLeft<e.iWidth-d.iScrollRight-g?c.bUseAbsPos?(this._fnUpdateCache(a,"sPosition","absolute","position",f.style),this._fnUpdateCache(a,"sTop",b.iTableTop+"px","top",f.style),this._fnUpdateCache(a,"sLeft",e.iWidth-d.iScrollRight-g+"px","left",f.style)):(this._fnUpdateCache(a,"sPosition","fixed","position",f.style),
|
||||
this._fnUpdateCache(a,"sTop",b.iTableTop-d.iScrollTop+"px","top",f.style),this._fnUpdateCache(a,"sLeft",d.iWidth-g+"px","left",f.style)):(this._fnUpdateCache(a,"sPosition","absolute","position",f.style),this._fnUpdateCache(a,"sTop",b.iTableTop+"px","top",f.style),this._fnUpdateCache(a,"sLeft",b.iTableLeft+"px","left",f.style))},_fnScrollHorizontalLeft:function(a){var c=this.fnGetSettings(),b=c.oMes,d=FixedHeader.oWin,e=a.nWrapper,f=jQuery(e).outerWidth();d.iScrollLeft<b.iTableLeft?(this._fnUpdateCache(a,
|
||||
"sPosition","absolute","position",e.style),this._fnUpdateCache(a,"sTop",b.iTableTop+"px","top",e.style),this._fnUpdateCache(a,"sLeft",b.iTableLeft+"px","left",e.style)):d.iScrollLeft<b.iTableLeft+b.iTableWidth-f?c.bUseAbsPos?(this._fnUpdateCache(a,"sPosition","absolute","position",e.style),this._fnUpdateCache(a,"sTop",b.iTableTop+"px","top",e.style),this._fnUpdateCache(a,"sLeft",d.iScrollLeft+"px","left",e.style)):(this._fnUpdateCache(a,"sPosition","fixed","position",e.style),this._fnUpdateCache(a,
|
||||
"sTop",b.iTableTop-d.iScrollTop+"px","top",e.style),this._fnUpdateCache(a,"sLeft","0px","left",e.style)):(this._fnUpdateCache(a,"sPosition","absolute","position",e.style),this._fnUpdateCache(a,"sTop",b.iTableTop+"px","top",e.style),this._fnUpdateCache(a,"sLeft",b.iTableLeft+b.iTableWidth-f+"px","left",e.style))},_fnScrollFixedFooter:function(a){var c=this.fnGetSettings(),b=c.oMes,d=FixedHeader.oWin,e=FixedHeader.oDoc,f=a.nWrapper,g=jQuery("thead",c.nTable).outerHeight(),h=jQuery(f).outerHeight();
|
||||
d.iScrollBottom<b.iTableBottom?(this._fnUpdateCache(a,"sPosition","absolute","position",f.style),this._fnUpdateCache(a,"sTop",b.iTableTop+b.iTableHeight-h+"px","top",f.style),this._fnUpdateCache(a,"sLeft",b.iTableLeft+"px","left",f.style)):d.iScrollBottom<b.iTableBottom+b.iTableHeight-h-g?c.bUseAbsPos?(this._fnUpdateCache(a,"sPosition","absolute","position",f.style),this._fnUpdateCache(a,"sTop",e.iHeight-d.iScrollBottom-h+"px","top",f.style),this._fnUpdateCache(a,"sLeft",b.iTableLeft+"px","left",
|
||||
f.style)):(this._fnUpdateCache(a,"sPosition","fixed","position",f.style),this._fnUpdateCache(a,"sTop",d.iHeight-h+"px","top",f.style),this._fnUpdateCache(a,"sLeft",b.iTableLeft-d.iScrollLeft+"px","left",f.style)):(this._fnUpdateCache(a,"sPosition","absolute","position",f.style),this._fnUpdateCache(a,"sTop",b.iTableTop+h+"px","top",f.style),this._fnUpdateCache(a,"sLeft",b.iTableLeft+"px","left",f.style))},_fnScrollFixedHeader:function(a){for(var c=this.fnGetSettings(),b=c.oMes,d=FixedHeader.oWin,e=
|
||||
a.nWrapper,f=0,g=c.nTable.getElementsByTagName("tbody"),h=0;h<g.length;++h)f+=g[h].offsetHeight;b.iTableTop>d.iScrollTop+c.oOffset.top?(this._fnUpdateCache(a,"sPosition","absolute","position",e.style),this._fnUpdateCache(a,"sTop",b.iTableTop+"px","top",e.style),this._fnUpdateCache(a,"sLeft",b.iTableLeft+"px","left",e.style)):d.iScrollTop+c.oOffset.top>b.iTableTop+f?(this._fnUpdateCache(a,"sPosition","absolute","position",e.style),this._fnUpdateCache(a,"sTop",b.iTableTop+f+"px","top",e.style),this._fnUpdateCache(a,
|
||||
"sLeft",b.iTableLeft+"px","left",e.style)):c.bUseAbsPos?(this._fnUpdateCache(a,"sPosition","absolute","position",e.style),this._fnUpdateCache(a,"sTop",d.iScrollTop+"px","top",e.style),this._fnUpdateCache(a,"sLeft",b.iTableLeft+"px","left",e.style)):(this._fnUpdateCache(a,"sPosition","fixed","position",e.style),this._fnUpdateCache(a,"sTop",c.oOffset.top+"px","top",e.style),this._fnUpdateCache(a,"sLeft",b.iTableLeft-d.iScrollLeft+"px","left",e.style))},_fnUpdateCache:function(a,c,b,d,e){a[c]!=b&&(e[d]=
|
||||
b,a[c]=b)},_fnCloneThead:function(a){var c=this.fnGetSettings(),b=a.nNode;for(a.nWrapper.style.width=jQuery(c.nTable).outerWidth()+"px";0<b.childNodes.length;)jQuery("thead th",b).unbind("click"),b.removeChild(b.childNodes[0]);a=jQuery("thead",c.nTable).clone(!0)[0];b.appendChild(a);jQuery("thead>tr th",c.nTable).each(function(a){jQuery("thead>tr th:eq("+a+")",b).width(jQuery(this).width())});jQuery("thead>tr td",c.nTable).each(function(a){jQuery("thead>tr td:eq("+a+")",b).width(jQuery(this).width())})},
|
||||
_fnCloneTfoot:function(a){var c=this.fnGetSettings(),b=a.nNode;for(a.nWrapper.style.width=jQuery(c.nTable).outerWidth()+"px";0<b.childNodes.length;)b.removeChild(b.childNodes[0]);a=jQuery("tfoot",c.nTable).clone(!0)[0];b.appendChild(a);jQuery("tfoot:eq(0)>tr th",c.nTable).each(function(a){jQuery("tfoot:eq(0)>tr th:eq("+a+")",b).width(jQuery(this).width())});jQuery("tfoot:eq(0)>tr td",c.nTable).each(function(a){jQuery("tfoot:eq(0)>tr th:eq("+a+")",b)[0].style.width(jQuery(this).width())})},_fnCloneTLeft:function(a){var c=
|
||||
this.fnGetSettings(),b=a.nNode,d=$("tbody",c.nTable)[0];for($("tbody tr:eq(0) td",c.nTable);0<b.childNodes.length;)b.removeChild(b.childNodes[0]);b.appendChild(jQuery("thead",c.nTable).clone(!0)[0]);b.appendChild(jQuery("tbody",c.nTable).clone(!0)[0]);c.bFooter&&b.appendChild(jQuery("tfoot",c.nTable).clone(!0)[0]);$("thead tr",b).each(function(){$("th:gt(0)",this).remove()});$("tfoot tr",b).each(function(){$("th:gt(0)",this).remove()});$("tbody tr",b).each(function(){$("td:gt(0)",this).remove()});
|
||||
this.fnEqualiseHeights("tbody",d.parentNode,b);c=jQuery("thead tr th:eq(0)",c.nTable).outerWidth();b.style.width=c+"px";a.nWrapper.style.width=c+"px"},_fnCloneTRight:function(a){for(var c=this.fnGetSettings(),b=$("tbody",c.nTable)[0],d=a.nNode,e=jQuery("tbody tr:eq(0) td",c.nTable).length;0<d.childNodes.length;)d.removeChild(d.childNodes[0]);d.appendChild(jQuery("thead",c.nTable).clone(!0)[0]);d.appendChild(jQuery("tbody",c.nTable).clone(!0)[0]);c.bFooter&&d.appendChild(jQuery("tfoot",c.nTable).clone(!0)[0]);
|
||||
jQuery("thead tr th:not(:nth-child("+e+"n))",d).remove();jQuery("tfoot tr th:not(:nth-child("+e+"n))",d).remove();$("tbody tr",d).each(function(){$("td:lt("+(e-1)+")",this).remove()});this.fnEqualiseHeights("tbody",b.parentNode,d);c=jQuery("thead tr th:eq("+(e-1)+")",c.nTable).outerWidth();d.style.width=c+"px";a.nWrapper.style.width=c+"px"},fnEqualiseHeights:function(a,c,b){var d=$(a+" tr:eq(0)",c).children(":eq(0)"),e=d.outerHeight()-d.height(),f=$.browser.msie&&("6.0"==$.browser.version||"7.0"==
|
||||
$.browser.version);$(a+" tr",b).each(function(b){$.browser.mozilla||$.browser.opera?$(this).children().height($(a+" tr:eq("+b+")",c).outerHeight()):$(this).children().height($(a+" tr:eq("+b+")",c).outerHeight()-e);f||$(a+" tr:eq("+b+")",c).height($(a+" tr:eq("+b+")",c).outerHeight())})}};FixedHeader.oWin={iScrollTop:0,iScrollRight:0,iScrollBottom:0,iScrollLeft:0,iHeight:0,iWidth:0};FixedHeader.oDoc={iHeight:0,iWidth:0};FixedHeader.afnScroll=[];
|
||||
FixedHeader.fnMeasure=function(){var a=jQuery(window),c=jQuery(document),b=FixedHeader.oWin,d=FixedHeader.oDoc;d.iHeight=c.height();d.iWidth=c.width();b.iHeight=a.height();b.iWidth=a.width();b.iScrollTop=a.scrollTop();b.iScrollLeft=a.scrollLeft();b.iScrollRight=d.iWidth-b.iScrollLeft-b.iWidth;b.iScrollBottom=d.iHeight-b.iScrollTop-b.iHeight};FixedHeader.VERSION="2.0.6";FixedHeader.prototype.VERSION=FixedHeader.VERSION;
|
||||
jQuery(window).scroll(function(){FixedHeader.fnMeasure();for(var a=0,c=FixedHeader.afnScroll.length;a<c;a++)FixedHeader.afnScroll[a]()});
|
||||
Binary file not shown.
@@ -0,0 +1,617 @@
|
||||
<!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>FixedHeader example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
.FixedHeader_Cloned th {
|
||||
background-color: white;
|
||||
}
|
||||
th, td {
|
||||
height: 30px;
|
||||
}
|
||||
.left_cell {
|
||||
background-color: white !important;
|
||||
border-right: 1px solid black !important;
|
||||
text-align: center;
|
||||
}
|
||||
.right_cell {
|
||||
background-color: white !important;
|
||||
border-left: 1px solid black;
|
||||
text-align: center;
|
||||
}
|
||||
#info {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
width: 300px;
|
||||
background-color: white;
|
||||
border: 1px solid blue;
|
||||
z-index: 50;
|
||||
padding: 20px;
|
||||
}
|
||||
</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/FixedHeader.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
var oTable = $('#example').dataTable( {
|
||||
"iDisplayLength": -1,
|
||||
"bFilter": false,
|
||||
"bInfo": false,
|
||||
"bPaginate": false,
|
||||
"bLengthChange": false,
|
||||
"fnDrawCallback": function ( oSettings ) {
|
||||
for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
|
||||
{
|
||||
$('td:eq(0), td:eq(6)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
|
||||
}
|
||||
},
|
||||
"aoColumns": [
|
||||
{"bSortable": false, "sWidth": "20px" },
|
||||
null, null, null, null, null,
|
||||
{"bSortable": false, "sWidth": "20px" }
|
||||
]
|
||||
} );
|
||||
new FixedHeader( oTable, { "left": true, "right": true, "bottom": true } );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="info">
|
||||
<h1 style="margin: 0; border-width:0">FixedHeader example - top, bottom, left and right fixed</h1>
|
||||
<p>This example shows how FixedHeader can be made to look more like a spreadsheet application. Click 'View source' in your browser to see the set up.</p>
|
||||
</div>
|
||||
|
||||
<div style="width:2000px; height: 2000px">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="gradeX">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Trident</td>
|
||||
<td>Internet
|
||||
Explorer 4.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">4</td>
|
||||
<td class="center">X</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeC">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Trident</td>
|
||||
<td>Internet
|
||||
Explorer 5.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Trident</td>
|
||||
<td>Internet
|
||||
Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Trident</td>
|
||||
<td>Internet
|
||||
Explorer 6</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<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>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<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>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<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>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<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>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<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>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<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>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<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>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<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>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<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>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<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>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<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>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<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>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<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>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<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>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<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>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.2</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">125.5</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.3</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">312.8</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Webkit</td>
|
||||
<td>Safari 2.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">419.3</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Webkit</td>
|
||||
<td>Safari 3.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">522.1</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Webkit</td>
|
||||
<td>OmniWeb 5.5</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">420</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Webkit</td>
|
||||
<td>iPod Touch / iPhone</td>
|
||||
<td>iPod</td>
|
||||
<td class="center">420.1</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Webkit</td>
|
||||
<td>S60</td>
|
||||
<td>S60</td>
|
||||
<td class="center">413</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.0</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.0</td>
|
||||
<td>Win 95+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.2</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.5</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Presto</td>
|
||||
<td>Opera for Wii</td>
|
||||
<td>Wii</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Presto</td>
|
||||
<td>Nokia N800</td>
|
||||
<td>N800</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<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>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeC">
|
||||
<td class="left_cell"> </td>
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.1</td>
|
||||
<td>KDE 3.1</td>
|
||||
<td class="center">3.1</td>
|
||||
<td class="center">C</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.3</td>
|
||||
<td>KDE 3.3</td>
|
||||
<td class="center">3.3</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.5</td>
|
||||
<td>KDE 3.5</td>
|
||||
<td class="center">3.5</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeX">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 4.5</td>
|
||||
<td>Mac OS 8-9</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeC">
|
||||
<td class="left_cell"> </td>
|
||||
<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>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeC">
|
||||
<td class="left_cell"> </td>
|
||||
<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>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.1</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.4</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeX">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Misc</td>
|
||||
<td>Dillo 0.8</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeX">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Misc</td>
|
||||
<td>Links</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeX">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Misc</td>
|
||||
<td>Lynx</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeC">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Misc</td>
|
||||
<td>IE Mobile</td>
|
||||
<td>Windows Mobile 6</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeC">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Misc</td>
|
||||
<td>PSP browser</td>
|
||||
<td>PSP</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
<tr class="gradeU">
|
||||
<td class="left_cell"> </td>
|
||||
<td>Other browsers</td>
|
||||
<td>All others</td>
|
||||
<td>-</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">U</td>
|
||||
<td class="right_cell"> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,490 @@
|
||||
<!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>FixedHeader example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
.FixedHeader_Cloned th { background-color: white; }
|
||||
</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/FixedHeader.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
var oTable = $('#example').dataTable();
|
||||
new FixedHeader( oTable, { "left": true } );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
FixedHeader example - header and left columns fixed
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>This example shows how tivial it is to fix the left hand column of the table as well as the header. In fact, the header, footer, left and right columns can all be fixed in exactly the same manner. The header is the only one to be fixed by default.</p>
|
||||
<p>Note that the window has of course been made artificially wide to show the fixed left column in action.</p>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" 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();
|
||||
new FixedHeader( oTable, { "left": true } );
|
||||
} );</pre>
|
||||
|
||||
<h1>Examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic demo with just the HeaderFixed</a></li>
|
||||
<li><a href="html_table.html">FixedHeader without requiring DataTables</a></li>
|
||||
<li><a href="two_tables.html">Two tables with FixedHeaders on a single page</a></li>
|
||||
<li><a href="top_bottom_left_right.html">A spreadsheet style layout with header and footer, left and right columns all fixed.</a></li>
|
||||
<li><a href="zIndexes.html">Change the display order of the fixed elements (zIndex)</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Empty paragraphs to force scrolling!...</p>
|
||||
<p style="height:500px; width:3000px;"> </p>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
FixedHeader and DataTables © Allan Jardine 2009.<br>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,923 @@
|
||||
<!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>FixedHeader example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
.FixedHeader_Cloned th { background-color: white; }
|
||||
</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/FixedHeader.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
var oTable = $('#example').dataTable();
|
||||
new FixedHeader( oTable, { "bottom": true } );
|
||||
|
||||
var oTable2 = $('#example2').dataTable();
|
||||
new FixedHeader( oTable2, { "bottom": true } );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
FixedHeader example - two tables
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>The following example shows two DataTables enhanced tables both with FixedHeader enabled on them. The footer is also fixed for both table.</p>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" 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 class="spacer"></div>
|
||||
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example2">
|
||||
<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 <br>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();
|
||||
new FixedHeader( oTable, { "bottom": true } );
|
||||
|
||||
var oTable2 = $('#example2').dataTable();
|
||||
new FixedHeader( oTable2, { "bottom": true } );
|
||||
} );</pre>
|
||||
|
||||
<h1>Examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic demo with just the HeaderFixed</a></li>
|
||||
<li><a href="html_table.html">FixedHeader without requiring DataTables</a></li>
|
||||
<li><a href="two_tables.html">Two tables with FixedHeaders on a single page</a></li>
|
||||
<li><a href="top_bottom_left_right.html">A spreadsheet style layout with header and footer, left and right columns all fixed.</a></li>
|
||||
<li><a href="zIndexes.html">Change the display order of the fixed elements (zIndex)</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Empty paragraphs to force scrolling!...</p>
|
||||
<p style="height:500px;"> </p>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
FixedHeader and DataTables © Allan Jardine 2009-2010.<br>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,496 @@
|
||||
<!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>FixedHeader example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
.FixedHeader_Cloned th { background-color: white; }
|
||||
</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/FixedHeader.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
var oTable = $('#example').dataTable();
|
||||
new FixedHeader( oTable, { "left": true, "zLeft": 105 } );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
FixedHeader example - zIndex example
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>When you have two or more columns fixed on a table, there might be occasions when you which to have one column floating on top of another. This example shows how you can do that with the initialisation parameters <i>zTop, zBottom, zLeft</i> and <i>zRight</i>. In this example the left column is set to float on top of the header. The difference is subtle, but can be effective.</p>
|
||||
<p>The default zIndexes are:</p>
|
||||
<ul>
|
||||
<li>zTop: 104</li>
|
||||
<li>zBottom: 103</li>
|
||||
<li>zLeft: 102</li>
|
||||
<li>zRight: 101</li>
|
||||
</ul>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo" style="width:1500px;">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" 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();
|
||||
new FixedHeader( oTable, { "left": true, "zLeft": 105 } );
|
||||
} );</pre>
|
||||
|
||||
<h1>Examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic demo with just the HeaderFixed</a></li>
|
||||
<li><a href="html_table.html">FixedHeader without requiring DataTables</a></li>
|
||||
<li><a href="two_tables.html">Two tables with FixedHeaders on a single page</a></li>
|
||||
<li><a href="top_bottom_left_right.html">A spreadsheet style layout with header and footer, left and right columns all fixed.</a></li>
|
||||
<li><a href="zIndexes.html">Change the display order of the fixed elements (zIndex)</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Empty paragraphs to force scrolling!...</p>
|
||||
<p style="height:500px; width:3000px;"> </p>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
FixedHeader and DataTables © Allan Jardine 2009.<br>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user