stickyheaders resizing

This commit is contained in:
Rob Garrison 2011-10-15 09:58:44 -05:00
parent 12177fc971
commit ab7acf635d
9 changed files with 65 additions and 29 deletions

View File

@ -28,6 +28,15 @@ Included all original [document pages](http://mottie.github.com/tablesorter/docs
View the [complete listing here](http://mottie.github.com/tablesorter/changelog.txt).
#### Version 2.0.22.1 (2011-10-15)
* Updated the stickyHeaders widget
* Sticky headers will now resize with the browser window
* Updated blue and green themes to work better with sticky headers.
* If using the uitheme widget, make sure the 'uitheme' widget is applied before (left of) the 'stickyHeaders' widget, as follows:
widgets: ['zebra', 'uitheme', 'stickyHeaders']
#### Version 2.0.22 (2011-10-13)
* Updated the pager plugin:

View File

@ -1,5 +1,15 @@
TableSorter Change Log
Version 2.0.22.1 (2011-10-15)
============================
* Updated the stickyHeaders widget
* Sticky headers will now resize with the browser window
* Updated blue and green themes to work better with sticky headers.
* If using the uitheme widget, make sure the 'uitheme' widget is applied before (left of) the 'stickyHeaders' widget, as follows:
widgets: ['zebra', 'uitheme', 'stickyHeaders']
Version 2.0.22 (2011-10-13)
============================

Binary file not shown.

View File

@ -7,17 +7,20 @@ table.tablesorter {
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
table.tablesorter thead tr.stickyHeader {
background: #ccc;
}
table.tablesorter thead tr th, tr.stickyHeader th, table.tablesorter tfoot tr th {
background-color: #e6eeee;
border: 1px solid #fff;
border-collapse: collapse;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
table.tablesorter thead tr .header, tr.stickyHeader .header {
background-image: url(black-bg.gif);
background-repeat: no-repeat;
background-position: center right;
border: 1px solid #fff;
cursor: pointer;
}
table.tablesorter tbody td {

Binary file not shown.

View File

@ -7,8 +7,7 @@ table.tablesorter {
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6eeee;
table.tablesorter thead tr th, tr.stickyHeader th, table.tablesorter tfoot tr th {
border-collapse: collapse;
font-size: 12px;
padding: 5px;
@ -17,16 +16,17 @@ table.tablesorter td {
color: #3d3d3d;
padding: 5px;
}
table.tablesorter thead {
table.tablesorter thead tr, table.tablesorter tfoot tr {
background: url(bkgd.png) center center repeat-x;
}
table.tablesorter .header {
background: transparent;
border-right: #cdcdcd 1px solid;
padding: 9px;
height: auto;
cursor: pointer;
}
table.tablesorter .header span {
table.tablesorter .header span, .stickyHeader .header span {
background: url(none.png) no-repeat;
padding: 2px 0 2px 25px;
}

View File

@ -13,15 +13,22 @@
<script src="js/chili/recipes.js"></script>
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<!-- Tablesorter: theme -->
<link rel="stylesheet" href="../css/blue/style.css">
<!-- test UI theme; also add 'uitheme' below: widgets: ['zebra', 'uitheme', 'stickyHeaders'] ; THE ORDER DOES MATTER! -->
<!--
<link rel="stylesheet" href="../css/ui/style.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
-->
<!-- Tablesorter script: required -->
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<script id="js">$(function(){
$("table").tablesorter({
widgets: ['stickyHeaders']
widgets: [ 'uitheme', 'zebra', 'stickyHeaders' ]
});
}); </script>

View File

@ -1105,16 +1105,15 @@ $(table)
<p><strong>Full release</strong> - Plugin, Documentation, Add-ons, Themes <a href="http://github.com/Mottie/tablesorter/downloads">jquery.tablesorter.zip</a></p>
<p><strong>Pick n choose</strong> - Place at least the required files in a directory on your webserver that is accessible to a web browser. Record this location.</p>
<strong id="Download-Required">Required:</strong>
<ul>
<li><a class="external" href="http://docs.jquery.com/Downloading_jQuery#Download_jQuery">jQuery</a> (1.2.1 or higher)</li>
<li><a class="external" href="http://docs.jquery.com/Downloading_jQuery#Download_jQuery">jQuery</a> (1.2.1 or higher; some demos need jQuery 1.4.2+)</li>
<li><a href="../js/jquery.tablesorter.min.js">jquery.tablesorter.min.js</a> (17kb, minified for production - please put the file on your server)</li>
</ul>
<strong id="Download-Addons">Optional/Add-Ons:</strong>
<strong id="Download-Addons">Optional / Add-Ons:</strong>
<ul>
<li><a class="external" href="http://plugins.jquery.com/files/jquery.metadata.2.1.zip">jQuery Metadata 2.1</a> (3,7kb, required for setting <a href="#Examples">inline options</a>)</li>
<li><a href="../js/jquery.tablesorter.js">jquery.tablesorter.js</a> (31kb, for development)</li>
@ -1145,18 +1144,18 @@ $(table)
<a name="Support"></a>
<h1>Support</h1>
<p>
Support is available through the
<a class="external" href="http://jquery.com/discuss/">jQuery Mailing List</a>.
</p>
<p>Access to the jQuery Mailing List is also available through <a class="external" href="http://www.nabble.com/JQuery-f15494.html">Nabble Forums</a>.</p>
<p>If you are having a problem with the plugin or you want to submit a feature request, please <a href="https://github.com/Mottie/tablesorter/issues">submit an issue</a>.</p>
<p>If you would like to contribute, <a href="https://github.com/Mottie/tablesorter">fork a copy on github</a>.</p>
<p>Support is also available through the <a class="external" href="http://jquery.com/discuss/">jQuery Mailing List</a> or <a class="external" href="http://stackoverflow.com/">StackOverflow</a>.</p>
<p>Access to the jQuery Mailing List is also available through <a class="external" href="http://www.nabble.com/JQuery-f15494.html">Nabble Forums</a>.</p>
<a name="Credits"></a>
<h1>Credits</h1>
<p>
Written by <a class="external" href="http://lovepeacenukes.com">Christian Bach</a>.
</p>
<p>Written by <a class="external" href="http://lovepeacenukes.com">Christian Bach</a>.</p>
<p>
Documentation written by <a class="external" href="http://www.ghidinelli.com">Brian Ghidinelli</a>,
based on <a class="external" href="http://malsup.com/jquery/">Mike Alsup's</a> great documention.<br>

View File

@ -142,12 +142,14 @@ $.tablesorter.addWidget({
var win = $(window),
header = $(table).find('thead'),
hdrCells = header.find('tr').children(),
brdr = parseInt(hdrCells.eq(0).css('border-left-width'),10),
sticky = header.find('tr').clone()
.addClass('stickyHeader')
.css({
width : header.width(),
width : header.outerWidth() + brdr * 2,
position : 'fixed',
top : 0,
marginLeft : -brdr,
visibility : 'hidden'
}),
stkyCells = sticky.children();
@ -177,14 +179,20 @@ $.tablesorter.addWidget({
});
header.prepend( sticky );
// make it sticky!
win.scroll(function(){
var $t = $(table),
offset = $t.offset(),
sTop = win.scrollTop(),
sticky = $t.find('.stickyHeader'),
vis = ((sTop > offset.top) && (sTop < offset.top + $t.height())) ? 'visible' : 'hidden';
sticky.css('visibility', vis);
});
win
.scroll(function(){
var $t = $(table),
offset = $t.offset(),
sTop = win.scrollTop(),
vis = ((sTop > offset.top) && (sTop < offset.top + $t.find('tbody').height())) ? 'visible' : 'hidden';
sticky.css('visibility', vis);
})
.resize(function(){
sticky.css({ width: header.outerWidth() + brdr * 2 })
stkyCells.each(function(i){
$(this).width( hdrCells.eq(i).width() );
});
});
}
});