Move themeClass and height from JavaScript to HTML. This makes the configuration easier and gives much better backward compatibility if JavaScript is turned off.
parent
c9739b737f
commit
b149990474
|
@ -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
14
demo/demo.js
|
@ -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 });
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue