vitalif-js
/
Fixed-Header-Table
mirror of https://github.com/vitalif/Fixed-Header-Table
1
0
Fork 0
Code Issues Releases Wiki Activity

Move themeClass and height from JavaScript to HTML. This makes the configuration easier and gives much better backward compatibility if JavaScript is turned off.

master
Freek Dijkstra 2012-02-27 17:12:08 +01:00
parent c9739b737f
commit b149990474
3 changed files with 34 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
demo/css/myTheme.css
View File

@ -50,6 +50,18 @@
height: 500px;
}
.height250 {
height: 250px;
overflow-x: auto;
overflow-y: auto;
}
.height400 {
height: 400px;
overflow-x: auto;
overflow-y: auto;
}
.fancyTable td, .fancyTable th {
/* appearance */
border: 1px solid #778899;

14
demo/demo.js
View File

@ -1,13 +1,13 @@
$(document).ready(function() {
$('.myTable01').fixedHeaderTable({ height: '250', footer: true, cloneHeadToFoot: true, altClass: 'odd', themeClass: 'fancyTable', autoShow: false });
$('#myTable01').fixedHeaderTable({ footer: true, cloneHeadToFoot: true, altClass: 'odd', autoShow: false });
$('.myTable01').fixedHeaderTable('show', 1000);
$('#myTable01').fixedHeaderTable('show', 1000);
$('.myTable02').fixedHeaderTable({ height: '250', footer: true, altClass: 'odd', themeClass: 'fancyTable' });
$('#myTable02').fixedHeaderTable({ footer: true, altClass: 'odd' });
$('.myTable03').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, fixedColumns: 1, themeClass: 'fancyTable' });
$('#myTable05').fixedHeaderTable({ altClass: 'odd', footer: true, fixedColumns: 1 });
$('.myTable04').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, cloneHeadToFoot: true, fixedColumns: 3, themeClass: 'fancyTable' });
$('#myTable03').fixedHeaderTable({ altClass: 'odd', footer: true, fixedColumns: 1 });
$('.myTable05').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, fixedColumns: 1, themeClass: 'fancyTable' });
});
$('#myTable04').fixedHeaderTable({ altClass: 'odd', footer: true, cloneHeadToFoot: true, fixedColumns: 3 });
});

40
demo/test.html
View File

@ -15,19 +15,17 @@
<div class="grid_4">
<pre>
<code>
$('.myTable01').fixedHeaderTable({
height: '250',
$('#myTable01').fixedHeaderTable({
footer: true,
cloneHeadToFoot: true,
altClass: 'odd',
themeClass: 'fancyTable',
autoShow: false
});
</code>
</pre>
</div>
<div class="grid_8">
<table class="myTable01" cellpadding="0" cellspacing="0">
<div class="grid_8 height250">
<table class="fancyTable" id="myTable01" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Browser</th>
@ -177,17 +175,15 @@ $('.myTable01').fixedHeaderTable({
<div class="grid_4">
<pre>
<code>
$('.myTable02').fixedHeaderTable({
height: '250',
$('#myTable02').fixedHeaderTable({
footer: true,
altClass: 'odd',
themeClass: 'fancyDarkTable'
});
</code>
</pre>
</div>
<div class="grid_8">
<table class="myTable02" cellpadding="0" cellspacing="0">
<div class="grid_8 height250">
<table class="fancyTable" id="myTable02" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Browser</th>
@ -379,18 +375,16 @@ $('.myTable02').fixedHeaderTable({
<div class="grid_4">
<pre>
<code>
$('.myTable05').fixedHeaderTable({
height: '400',
$('#myTable05').fixedHeaderTable({
altClass: 'odd',
footer: true,
fixedColumns: 1,
themeClass: 'fancyTable'
});
</code>
</pre>
</div>
<div class="grid_4">
<table class="myTable05" cellpadding="0" cellspacing="0">
<div class="grid_4 height400">
<table class="fancyTable" id="myTable05" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Browser</th>
@ -692,18 +686,16 @@ $('.myTable05').fixedHeaderTable({
<div class="grid_4">
<pre>
<code>
$('.myTable03').fixedHeaderTable({
height: '400',
$('#myTable03').fixedHeaderTable({
altClass: 'odd',
footer: true,
fixedColumns: 1,
themeClass: 'fancyTable'
});
</code>
</pre>
</div>
<div class="grid_4">
<table class="myTable03" cellpadding="0" cellspacing="0">
<div class="grid_4 height400">
<table class="fancyTable" id="myTable03" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Browser</th>
@ -997,19 +989,17 @@ $('.myTable03').fixedHeaderTable({
<div class="grid_4">
<pre>
<code>
$('.myTable04').fixedHeaderTable({
height: '400',
$('#myTable04').fixedHeaderTable({
altClass: 'odd',
footer: true,
cloneHeadToFoot: true,
fixedColumn: 3,
themeClass: 'fancyTable'
});
</code>
</pre>
</div>
<div class="grid_4">
<table class="myTable04" cellpadding="0" cellspacing="0">
<div class="grid_4 height400">
<table class="fancyTable" id="myTable04" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Browser</th>