Permalink
Browse files

updated uitheme widget

  • Loading branch information...
1 parent f430c9d commit cdc0aca9489468717a57ed7b218b53bc940669c8 @Mottie committed Sep 14, 2011
Showing with 69 additions and 24 deletions.
  1. +4 −0 README.markdown
  2. +5 −0 changelog.txt
  3. +11 −1 css/ui/style.css
  4. +37 −17 docs/example-widget-ui-theme.html
  5. +12 −6 js/jquery.tablesorter.widgets.js
View
@@ -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.
View
@@ -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)
============================
View
@@ -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%;
@@ -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>
@@ -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) {

0 comments on commit cdc0aca

Please sign in to comment.