mirror of
https://github.com/Mottie/tablesorter.git
synced 2025-01-12 15:24:21 +00:00
ui theme fix for issue #12
This commit is contained in:
parent
99c0250cd4
commit
d9b791dcdb
@ -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 */
|
||||
|
@ -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>
|
||||
|
@ -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 */
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user