library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-10-08 13:44:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

updated uitheme widget

Browse Source
This commit is contained in:
Rob Garrison 2011-09-14 09:20:15 -05:00
parent f430c9d113
commit cdc0aca948
5 changed files with 69 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.markdown
View File

@ -28,6 +28,10 @@ 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.18.1 (2011-09-14)
* Updated the "uitheme" widget with method to add zebra striping and hovered header classes.
#### Version 2.0.18 (2011-09-13)
* Fixed a bug in the column widget, it would cause an error if no initial sort was set.

5
changelog.txt
View File

@ -1,5 +1,10 @@
TableSorter Change Log
Version 2.0.18.1 (2011-09-14)
============================
* Updated the "uitheme" widget with method to add zebra striping and hovered header classes.
Version 2.0.18 (2011-09-13)
============================

12
css/ui/style.css
View File

@ -5,6 +5,7 @@ table.tablesorter {
font-size: 8pt;
width: 100%;
text-align: left;
padding: 5px;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
border-collapse: collapse;
@ -20,11 +21,20 @@ table.tablesorter tbody td {
padding: 4px;
vertical-align: top;
}
table.tablesorter .header .ui-theme {
table.tablesorter .header .ui-icon {
display: block;
float: right;
}
/* This allows you to use ui-state-default as the zebra stripe color */
table.tablesorter tr.ui-state-default {
background-image: url();
}
/* UI hover and active states make the font normal and the table resizes, this fixes it */
table.tablesorter th.header {
font-weight: bold !important;
}
/* filter widget */
table.tablesorter thead input.filter {
width: 90%;

54
docs/example-widget-ui-theme.html
View File

@ -30,7 +30,9 @@
// call the tablesorter plugin and apply the ui theme widget
$("table").tablesorter({
// widget code now contained in the jquery.tablesorter.widgets.js file
widgets : ['uitheme']
widgets : ['uitheme', 'zebra'],
// adding zebra striping, using content and default styles - the ui css removes the background from default
widgetZebra: { css: ["ui-widget-content", "ui-state-default"] }
});
});</script>
@ -140,29 +142,47 @@
<div>
<pre class="css">/* jQuery UI Theme required css; as seen in css/ui/style.css file */
table.tablesorter {
font-family: arial;
margin: 10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
font-family: arial;
margin: 10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
padding: 5px;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
border-collapse: collapse;
font-size: 8pt;
padding: 4px;
border-collapse: collapse;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
padding: 4px;
vertical-align: top;
padding: 4px;
vertical-align: top;
}
table.tablesorter .header .ui-theme {
display: block;
float: right;
table.tablesorter .header .ui-icon {
display: block;
float: right;
}
/* This allows you to use ui-state-default as the zebra stripe color */
table.tablesorter tr.ui-state-default {
background-image: url();
}
/* UI hover and active states make the font normal and the table resizes, this fixes it */
table.tablesorter th.header {
font-weight: bold !important;
}
/* filter widget */
table.tablesorter thead input.filter {
width: 90%;
}
table.tablesorter thead tr.filters, table.tablesorter thead tr.filters td {
text-align: center;
}</pre>
</div>

18
js/jquery.tablesorter.widgets.js
View File

@ -12,22 +12,28 @@ $.tablesorter.addWidget({
if (c.debug) {
time = new Date();
}
if (!$(c.headerList[0]).is('.ui-theme')) {
$(table).addClass('ui-widget ui-widget-content ui-corner-all');
if (!$(table).is('.ui-theme')) {
$(table).addClass('ui-widget ui-widget-content ui-corner-all ui-theme');
$.each(c.headerList, function(){
$(this)
// using "ui-theme" class in case the user adds their own ui-icon using onRenderHeader
.addClass('ui-widget-header ui-corner-all ui-theme')
.append('<span class="ui-theme"/>');
.addClass('ui-widget-header ui-corner-all')
.append('<span class="ui-icon"/>')
.hover(function(){
$(this).addClass('ui-state-hover');
}, function(){
$(this).removeClass('ui-state-hover');
})
});
}
$.each(c.headerList, function(i){
if (c.headers[i] && c.headers[i].sorter === false) {
// no sort arrows for disabled columns!
$(this).find('span.ui-theme').removeClass(rmv + ' ui-icon');
$(this).find('span.ui-icon').removeClass(rmv + ' ui-icon');
} else {
klass = ($(this).is('.' + c.cssAsc)) ? icons[1] : ($(this).is('.' + c.cssDesc)) ? icons[2] : $(this).is('.' + c.cssHeader) ? icons[0] : '';
$(this).find('span.ui-theme').removeClass(rmv).addClass(klass + ' ui-icon');
$(this)[klass === icons[0] ? 'removeClass' : 'addClass']('ui-state-active')
.find('span.ui-icon').removeClass(rmv).addClass(klass);
}
});
if (c.debug) {