library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2025-01-12 15:24:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

ui theme fix for issue #12

Browse Source
This commit is contained in:
Rob Garrison 2012-01-22 09:02:02 -06:00
parent 99c0250cd4
commit d9b791dcdb
4 changed files with 69 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/ui/style.css
View File

@ -13,10 +13,12 @@ table.tablesorter thead tr th, table.tablesorter tfoot tr th {
padding: 4px;
}
table.tablesorter thead tr .header {
position: relative;
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
white-space: normal;
padding-right: 20px; /* wider than the icon */
}
table.tablesorter tbody td {
padding: 4px;
@ -24,7 +26,10 @@ table.tablesorter tbody td {
}
table.tablesorter .header .ui-icon {
display: block;
float: right;
position: absolute;
right: 3px;
top: 50%;
margin-top: -8px; /* half the icon height; older IE doesn't like this */
}
/* This allows you to use ui-state-default as the zebra stripe color */

21
docs/example-widget-columns.html
View File

@ -14,7 +14,8 @@
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<link class="theme" rel="stylesheet" href="../css/blue/style.css">
<link class="theme" rel="stylesheet" href="../css/green/style.css" disabled>
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
@ -37,6 +38,18 @@
});
});</script>
<script>
$(function() {
$('select').change(function(){
var theme = $(this).val().toLowerCase(),
files = $('link.theme');
files
.prop('disabled', true)
.filter('[href*="' + theme + '"]')
.prop('disabled', false);
});
});
</script>
</head>
<body>
<div id="banner">
@ -52,6 +65,12 @@
</p>
<h1>Demo</h1>
Choose Theme:
<select>
<option>Blue</option>
<option>Green</option>
</select>
<div id="demo"><table class="tablesorter">
<thead>
<tr>

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

@ -17,8 +17,11 @@
<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<!-- Tablesorter: required; also include any of the jQuery UI themes -->
<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">
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
<link class="ui-theme" rel="stylesheet" href="../css/ui/style.css">
<link class="theme" rel="stylesheet" href="../css/blue/style.css" disabled>
<link class="theme" rel="stylesheet" href="../css/green/style.css" disabled>
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
@ -34,7 +37,8 @@
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"] },
// even and odd class names included for this demo to allow switching themes
widgetZebra: { css: ["ui-widget-content even", "ui-state-default odd"] },
// change default uitheme icons - find the full list of icons here: http://jqueryui.com/themeroller/ (hover over them for their name)
// default icons: { css: ["ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n"] }
@ -44,11 +48,28 @@
});</script>
<style>
#switcher { display: inline-block; padding-bottom: 5px; }
</style>
<script>
$(function() {
// Theme switcher
// ********************
$('#switcher').themeswitcher();
$('select').change(function(){
var theme = $(this).val().toLowerCase(),
files = $('link.theme, link.ui-theme'); // ui-theme is added by the themeswitcher
files
.prop('disabled', true)
.filter('[href*="' + theme + '"]')
.prop('disabled', false);
// hide span.ui-icon when showing green theme or we get two indicator arrows
$('table').find('thead span.ui-icon')[ (theme === "green") ? 'hide' : 'show' ]();
});
});
</script>
</head>
@ -63,13 +84,22 @@
<div id="main">
<div id="switcher"></div>
<p class="tip">
<em>NOTE!</em> This widget can be applied to the original plugin.
</p>
<h1>Demo</h1>
jQuery UI Theme:
<div id="switcher"></div>
<br>
Tablesorter Theme:
<select>
<option>UI</option>
<option>Blue</option>
<option>Green</option>
</select>
<div id="demo"><table class="tablesorter">
<thead>
<tr>
@ -162,9 +192,12 @@ table.tablesorter thead tr th, table.tablesorter tfoot tr th {
padding: 4px;
}
table.tablesorter thead tr .header {
position: relative;
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
white-space: normal;
padding-right: 20px; /* wider than the icon */
}
table.tablesorter tbody td {
padding: 4px;
@ -172,7 +205,10 @@ table.tablesorter tbody td {
}
table.tablesorter .header .ui-icon {
display: block;
float: right;
position: absolute;
right: 3px;
top: 50%;
margin-top: -8px; /* half the icon height; older IE doesn't like this */
}
/* This allows you to use ui-state-default as the zebra stripe color */

2
package.json
View File

@ -28,7 +28,7 @@
"natural sort"
],
"homepage": "http://mottie.github.com/tablesorter/docs/index.html",
"contributors": [
"maintainers": [
{
"name": "Rob Garrison",
"url": "https://github.com/Mottie"