tablesorter/docs/example-widget-ui-theme.html
2012-01-30 10:07:36 -06:00

246 lines
6.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - jQuery UI Theme Widget</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css">
<script src="js/chili/jquery.chili-2.2.js"></script>
<script src="js/chili/recipes.js"></script>
<script src="js/docs.js"></script>
<!-- theme switcher -->
<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<!-- Tablesorter: required; also include any of the jQuery UI themes -->
<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">
<link class="theme" rel="stylesheet" href="../css/green/style.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<!-- Tablesorter: optional -->
<!-- <script src="../addons/pager/jquery.tablesorter.pager.js"></script> -->
<script id="js">$(function() {
// 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', 'zebra'],
// adding zebra striping, using content and default styles - the ui css removes the background from 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"] }
// { css : ["up/down arrow (cssHeaders/unsorted)", "down arrow (cssDesc/descending)", "up arrow (cssAsc/ascending)" ] }
widgetUitheme: { css: ["ui-icon-carat-2-n-s", "ui-icon-carat-1-s", "ui-icon-carat-1-n"] }
});
});</script>
<style>
#switcher { display: inline-block; padding-bottom: 5px; }
</style>
<script>
$(function() {
// Theme switcher
// ********************
$('#switcher').themeswitcher();
$('link.theme').prop('disabled', true);
$('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);
});
});
</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>jQuery UI Theme Widget</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<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>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr>
<td>John</td>
<td>Hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td>Clark</td>
<td>Kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>Jan 12, 2003 11:14 AM</td>
</tr>
<tr>
<td>Bruce</td>
<td>Almighty</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>
<td>Jan 18, 2001 9:12 AM</td>
</tr>
<tr>
<td>Bruce</td>
<td>Evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>
</tbody>
</table></div>
<h1>Page Header</h1>
<div>
<pre class="html">&lt;!-- ui theme stylesheet - contents shown below --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/ui/style.css&quot;&gt;
&lt;!-- jQuery UI theme (cupertino example here) --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css&quot;&gt;
&lt;!-- tablesorter plugin --&gt;
&lt;script src=&quot;../js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;
&lt;!-- tablesorter widget file - loaded after the plugin --&gt;
&lt;script src=&quot;../js/jquery.tablesorter.widgets.js&quot;&gt;&lt;/script&gt;</pre>
</div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="js"></pre>
</div>
<h1>CSS</h1>
<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;
padding: 5px;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
border-collapse: collapse;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr th {
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
white-space: normal;
/* UI hover and active states make the font normal and the table resizes, this fixes it */
font-weight: bold !important;
}
table.tablesorter thead tr th .inner {
position: relative;
padding-right: 20px; /* wider than the icon */
}
table.tablesorter thead tr th .ui-icon {
position: absolute;
right: 3px;
top: 50%;
margin-top: -8px; /* half the icon height; older IE doesn't like this */
}
table.tablesorter tbody td {
padding: 4px;
vertical-align: top;
}
/* This allows you to use ui-state-default as the zebra stripe color */
table.tablesorter tr.ui-state-default {
background-image: url();
}
/* 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>
<h1>HTML</h1>
<div id="html">
<pre class="html"></pre>
</div>
<div class="next-up">
<hr />
Next up: <a href="example-widget-resizable.html">Resizable Columns widget &rsaquo;&rsaquo;</a>
</div>
</div>
</body>
</html>