2011-07-27 06:14:20 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
2012-09-27 19:57:19 +00:00
< title > jQuery plugin: Tablesorter 2.0 - jQuery UITheme Widget (jQuery UI)< / title >
2011-07-27 06:14:20 +00:00
<!-- jQuery -->
2012-09-27 19:57:19 +00:00
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js" > < / script >
2011-07-27 06:14:20 +00:00
<!-- 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 >
<!-- Tablesorter: required; also include any of the jQuery UI themes -->
2012-09-27 19:57:19 +00:00
< link rel = "stylesheet" href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" >
< link rel = "stylesheet" href = "../css/theme.jui.css" >
2012-01-22 15:02:02 +00:00
2011-07-27 06:14:20 +00:00
< script src = "../js/jquery.tablesorter.js" > < / script >
2011-09-11 17:51:02 +00:00
< script src = "../js/jquery.tablesorter.widgets.js" > < / script >
2011-07-27 06:14:20 +00:00
<!-- Tablesorter: optional -->
2011-09-11 17:51:02 +00:00
<!-- <script src="../addons/pager/jquery.tablesorter.pager.js"></script> -->
2011-07-27 06:14:20 +00:00
< script id = "js" > $ ( f u n c t i o n ( ) {
2012-09-29 13:20:33 +00:00
// Extend the themes to change any of the default class names ** NEW **
2012-09-27 19:57:19 +00:00
$.extend($.tablesorter.themes.jui, {
// change default jQuery uitheme icons - find the full list of icons here: http://jqueryui.com/themeroller/ (hover over them for their name)
2012-12-18 23:49:04 +00:00
table : 'ui-widget ui-widget-content ui-corner-all', // table classes
header : 'ui-widget-header ui-corner-all ui-state-default', // header classes
footerRow : '',
footerCells: '',
icons : 'ui-icon', // icon class added to the < i > in the header
sortNone : 'ui-icon-carat-2-n-s',
sortAsc : 'ui-icon-carat-1-n',
sortDesc : 'ui-icon-carat-1-s',
active : 'ui-state-active', // applied when column is sorted
hover : 'ui-state-hover', // hover class
filterRow : '',
even : 'ui-widget-content', // odd row zebra striping
odd : 'ui-state-default' // even row zebra striping
2012-09-27 19:57:19 +00:00
});
2011-07-27 06:14:20 +00:00
// call the tablesorter plugin and apply the ui theme widget
$("table").tablesorter({
2011-09-16 15:43:09 +00:00
2011-09-11 17:51:02 +00:00
// widget code now contained in the jquery.tablesorter.widgets.js file
2012-09-27 19:57:19 +00:00
widgets : ['uitheme', 'zebra', 'resizable'],
2011-09-16 15:43:09 +00:00
2012-03-07 18:06:35 +00:00
widgetOptions : {
2012-09-27 19:57:19 +00:00
// zebra striping class names - the uitheme widget adds the class names defined in
// $.tablesorter.themes to the zebra widget class names
zebra : ["even", "odd"],
2011-09-16 15:43:09 +00:00
2012-09-27 19:57:19 +00:00
// set the uitheme widget to use the jQuery UI theme class names ## NEW ##
uitheme : 'jui'
2012-03-07 18:06:35 +00:00
}
2012-09-27 19:57:19 +00:00
2011-07-27 06:14:20 +00:00
});
2011-09-11 17:51:02 +00:00
2011-07-27 06:14:20 +00:00
});< / script >
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
2012-09-27 19:57:19 +00:00
< h2 > jQuery UITheme Widget (jQuery UI)< / h2 >
2011-07-27 06:14:20 +00:00
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
2011-09-08 16:28:10 +00:00
< p class = "tip" >
2012-03-07 18:06:35 +00:00
< em > NOTE!< / em >
< ul >
< li > This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.< / li >
2012-09-27 19:57:19 +00:00
< li > The original "widgetUitheme" option has been replaced by "widgetOptions.uitheme". See the javascript block below for more details (v2.1).< / li >
< li > < span class = "tip" > < em > New!< / em > < / span > In tablesorter v2.4, the < code > uitheme< / code > option has changed to indicate the theme instead of an array of icons to use:
< ul >
< li > All theme class names are now contained within < code > $.tablesorter.themes< / code > with the jQuery UI theme saved to < code > $.tablesorter.themes.jui< / code > < / li >
< li > The themes variable allows you to modify the class names for the table, header, sort icons, active state, hover state, filter inputs and zebra striping. See the code below on how to extend these variables.< / li >
< li > Set the < code > uitheme< / code > widget option to < code > "jui"< / code > to set the widget to use the jQuery UI theme. See the < a href = "example-widget-bootstrap-theme.html" > bootstrap demo< / a > for another example.< / li >
< / ul >
< / li >
< li > Earlier widget versions required jQuery 1.4+. The UITheme widget for tablesorter 2.4 requires jQuery 1.2.6+.< / li >
2012-03-07 18:06:35 +00:00
< / ul >
2011-09-08 16:28:10 +00:00
< / p >
2011-07-27 06:14:20 +00:00
< h1 > Demo< / h1 >
2012-09-27 19:57:19 +00:00
< br >
2012-01-22 15:02:02 +00:00
jQuery UI Theme:
< div id = "switcher" > < / div >
< br >
2011-07-27 06:14:20 +00:00
< 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 >
2012-09-27 19:57:19 +00:00
< tfoot >
< tr >
< th > First Name< / th >
< th > Last Name< / th >
< th > Age< / th >
< th > Total< / th >
< th > Discount< / th >
< th > Date< / th >
< / tr >
< / tfoot >
2011-07-27 06:14:20 +00:00
< 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 >
2011-09-11 17:51:02 +00:00
< h1 > Page Header< / h1 >
< div >
< pre class = "html" > < !-- ui theme stylesheet - contents shown below -->
2012-09-27 19:57:19 +00:00
< link rel=" stylesheet" href=" ../css/theme.jui.css" >
2011-09-11 17:51:02 +00:00
< !-- jQuery UI theme (cupertino example here) -->
< link rel=" stylesheet" href=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" >
< !-- tablesorter plugin -->
< script src=" ../js/jquery.tablesorter.js" > < /script>
< !-- tablesorter widget file - loaded after the plugin -->
< script src=" ../js/jquery.tablesorter.widgets.js" > < /script> < / pre >
< / div >
2011-07-27 06:14:20 +00:00
< h1 > Javascript< / h1 >
< div id = "javascript" >
< pre class = "js" > < / pre >
< / div >
< h1 > HTML< / h1 >
< div id = "html" >
< pre class = "html" > < / pre >
< / div >
< div class = "next-up" >
< hr / >
2012-12-22 16:02:03 +00:00
Next up: < a href = "example-widget-bootstrap-theme.html" > UITheme widget - Bootstrap theme › › < / a > < br >
Second time around: < a href = "example-option-render-header.html" > Modifying the Header during rendering › › < / a >
2011-07-27 06:14:20 +00:00
< / div >
< / div >
< / body >
< / html >
