From cdc0aca9489468717a57ed7b218b53bc940669c8 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Wed, 14 Sep 2011 09:20:15 -0500
Subject: [PATCH] updated uitheme widget

---
 README.markdown                   |  4 +++
 changelog.txt                     |  5 +++
 css/ui/style.css                  | 12 ++++++-
 docs/example-widget-ui-theme.html | 54 +++++++++++++++++++++----------
 js/jquery.tablesorter.widgets.js  | 18 +++++++----
 5 files changed, 69 insertions(+), 24 deletions(-)

diff --git a/README.markdown b/README.markdown
index 8262f62f..0eb35347 100644
--- a/README.markdown
+++ b/README.markdown
@@ -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.
diff --git a/changelog.txt b/changelog.txt
index 7cf3d76b..fa72db02 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -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)
 ============================
 
diff --git a/css/ui/style.css b/css/ui/style.css
index caae056f..f99cbc21 100644
--- a/css/ui/style.css
+++ b/css/ui/style.css
@@ -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%;
diff --git a/docs/example-widget-ui-theme.html b/docs/example-widget-ui-theme.html
index 5e5292ed..c9110c80 100644
--- a/docs/example-widget-ui-theme.html
+++ b/docs/example-widget-ui-theme.html
@@ -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>
 
diff --git a/js/jquery.tablesorter.widgets.js b/js/jquery.tablesorter.widgets.js
index cdbe7291..a28d4c85 100644
--- a/js/jquery.tablesorter.widgets.js
+++ b/js/jquery.tablesorter.widgets.js
@@ -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) {