mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
371 lines
15 KiB
HTML
371 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery tablesorter 2.0 - CSS Column & Row Highlights</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="js/jquery-latest.min.js"></script>
|
|
|
|
<!-- Demo stuff -->
|
|
<link rel="stylesheet" href="css/jq.css">
|
|
<link href="css/prettify.css" rel="stylesheet">
|
|
<script src="js/prettify.js"></script>
|
|
<script src="js/docs.js"></script>
|
|
|
|
<!-- Tablesorter: required -->
|
|
<link rel="stylesheet" href="../css/theme.blue.css">
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
|
|
|
<style>
|
|
html {
|
|
box-sizing: border-box;
|
|
}
|
|
*, *:before, *:after {
|
|
box-sizing: inherit;
|
|
}
|
|
.block {
|
|
width: 33.3%;
|
|
float: left;
|
|
padding: 10px;
|
|
}
|
|
@media all and (max-width: 1300px) {
|
|
.block { width: 50%; }
|
|
}
|
|
@media all and (max-width: 900px) {
|
|
.block { float: none; width: 100%; }
|
|
}
|
|
.hover-hl { color: #990; }
|
|
.focus-hl { color: #3aa3c5; }
|
|
</style>
|
|
<style id="css">/* TABLE BACKGROUND color (match the original theme) */
|
|
table.hover-highlight td:before,
|
|
table.focus-highlight td:before {
|
|
background: #fff;
|
|
}
|
|
|
|
/* ODD ZEBRA STRIPE color (needs zebra widget) */
|
|
.hover-highlight .odd td:before, .hover-highlight .odd th:before,
|
|
.focus-highlight .odd td:before, .focus-highlight .odd th:before {
|
|
background: #ebf2fa;
|
|
}
|
|
/* EVEN ZEBRA STRIPE color (needs zebra widget) */
|
|
.hover-highlight .even td:before, .hover-highlight .even th:before,
|
|
.focus-highlight .even td:before, .focus-highlight .even th:before {
|
|
background-color: #fff;
|
|
}
|
|
|
|
/* FOCUS ROW highlight color (touch devices) */
|
|
.focus-highlight td:focus::before, .focus-highlight th:focus::before {
|
|
background-color: lightblue;
|
|
}
|
|
/* FOCUS COLUMN highlight color (touch devices) */
|
|
.focus-highlight td:focus::after, .focus-highlight th:focus::after {
|
|
background-color: lightblue;
|
|
}
|
|
/* FOCUS CELL highlight color */
|
|
.focus-highlight th:focus, .focus-highlight td:focus,
|
|
.focus-highlight .even th:focus, .focus-highlight .even td:focus,
|
|
.focus-highlight .odd th:focus, .focus-highlight .odd td:focus {
|
|
background-color: #d9d9d9;
|
|
color: #333;
|
|
}
|
|
|
|
/* HOVER ROW highlight colors */
|
|
table.hover-highlight tbody > tr:hover > td, /* override tablesorter theme row hover */
|
|
table.hover-highlight tbody > tr.odd:hover > td,
|
|
table.hover-highlight tbody > tr.even:hover > td {
|
|
background-color: #ffa;
|
|
}
|
|
/* HOVER COLUMN highlight colors */
|
|
.hover-highlight tbody tr td:hover::after,
|
|
.hover-highlight tbody tr th:hover::after {
|
|
background-color: #ffa;
|
|
}
|
|
|
|
/* ************************************************* */
|
|
/* **** No need to modify the definitions below **** */
|
|
/* ************************************************* */
|
|
.focus-highlight td:focus::after, .focus-highlight th:focus::after,
|
|
.hover-highlight td:hover::after, .hover-highlight th:hover::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 999em;
|
|
left: 0;
|
|
top: -555em;
|
|
z-index: -1;
|
|
}
|
|
.focus-highlight td:focus::before, .focus-highlight th:focus::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 999em;
|
|
height: 100%;
|
|
left: -555em;
|
|
top: 0;
|
|
z-index: -2;
|
|
}
|
|
/* required styles */
|
|
.hover-highlight,
|
|
.focus-highlight {
|
|
overflow: hidden;
|
|
}
|
|
.hover-highlight td, .hover-highlight th,
|
|
.focus-highlight td, .focus-highlight th {
|
|
position: relative;
|
|
outline: 0;
|
|
}
|
|
/* override the tablesorter theme styling */
|
|
table.hover-highlight, table.hover-highlight tbody > tr > td,
|
|
table.focus-highlight, table.focus-highlight tbody > tr > td,
|
|
/* override zebra styling */
|
|
table.hover-highlight tbody tr.even > th,
|
|
table.hover-highlight tbody tr.even > td,
|
|
table.hover-highlight tbody tr.odd > th,
|
|
table.hover-highlight tbody tr.odd > td,
|
|
table.focus-highlight tbody tr.even > th,
|
|
table.focus-highlight tbody tr.even > td,
|
|
table.focus-highlight tbody tr.odd > th,
|
|
table.focus-highlight tbody tr.odd > td {
|
|
background: transparent;
|
|
}
|
|
/* table background positioned under the highlight */
|
|
table.hover-highlight td:before,
|
|
table.focus-highlight td:before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: -3;
|
|
}</style>
|
|
|
|
<script id="js">$(function() {
|
|
// call the tablesorter plugin
|
|
$("table").tablesorter({
|
|
theme: 'blue'
|
|
});
|
|
|
|
// Make table cell focusable
|
|
// http://css-tricks.com/simple-css-row-column-highlighting/
|
|
if ( $('.focus-highlight').length ) {
|
|
$('.focus-highlight').find('td, th')
|
|
.attr('tabindex', '1')
|
|
// add touch device support
|
|
.on('touchstart', function() {
|
|
$(this).focus();
|
|
});
|
|
}
|
|
|
|
});</script>
|
|
</head>
|
|
<body>
|
|
<div id="banner">
|
|
<h1>table<em>sorter</em></h1>
|
|
<h2>CSS Column & Row Highlights</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>
|
|
</p>
|
|
<ul>
|
|
<li>The css in this demo only works with <a href="http://caniuse.com/#feat=css-gencontent">modern browsers</a> (IE9+).</li>
|
|
<li>This css is originally from this <a href="http://css-tricks.com/simple-css-row-column-highlighting/">CSS-Tricks</a> article; it has been modified to work with tablesorter themes.</li>
|
|
<li>
|
|
It does not work properly on cells with <code>rowspan</code> or <code>colspan</code> within the <code>tbody</code> (I am referring to info-only tbodies, since tablesorter does not yet support sorting with these spans); if you do need a script to highlight spanned columns & rows, then take a look at the <a href="https://github.com/gajus/wholly">wholly</a> plugin.
|
|
<p></p>
|
|
</li>
|
|
<li>To add <strong class="hover-hl">Hover</strong> Highlighting:
|
|
<ul>
|
|
<li>Add a class name of <code>"<span class="hover-hl">hover-highlight</span>"</code> to the <code>table</code> to enable hover row and column highlighting.</li>
|
|
<li>Include the CSS shown on this page.</li>
|
|
<li>If needed, modify the table background color & zebra striping row colors.</li>
|
|
<li>Modify the hover highlight row and/or column color definitions as desired (they can be different colors).</li>
|
|
</ul>
|
|
<p></p>
|
|
</li>
|
|
<li>To add <strong class="focus-hl">Focus</strong> Highlighting:
|
|
<ul>
|
|
<li>Add a class name of <code>"<span class="focus-hl">focus-highlight</span>"</code> to the <code>table</code> to enable focused cell with row and column highlighting.</li>
|
|
<li>Click on a table cell in the demo below to see the highlight; only <em>one element</em>, per page, can be active at a time.</li>
|
|
<li>Include the CSS and the extra javascript shown on this page to make table cells focusable.</li>
|
|
<li>If needed, modify the table background color & zebra striping row colors.</li>
|
|
<li>Modify the focus highlight row and/or column color definitions as desired (they can be different colors).</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<h1>Demo</h1>
|
|
<div id="demo">
|
|
|
|
<div class="block">
|
|
<h1><span class="hover-hl">Hover</span> + <span class="focus-hl">Focus</span> Highlight</h1>
|
|
<table class="tablesorter hover-highlight focus-highlight">
|
|
<thead>
|
|
<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
|
|
<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
|
|
<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>2.89</td><td>44.2%</td><td>-15</td></tr>
|
|
<tr><td>A1</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
|
|
<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>$153.19</td><td>23%</td><td>+9</td></tr>
|
|
<tr><td>A256</td><td>John</td><td>Clark</td><td>44</td><td>($19.89)</td><td>25.1%</td><td>(5)</td></tr>
|
|
<tr><td>A23</td><td>Elvis</td><td>Presley</td><td>24</td><td>($9.99)</td><td>50%</td><td>(22)</td></tr>
|
|
<tr><td>A10</td><td>Frank</td><td>Carter</td><td>40</td><td>-12.99</td><td>20%</td><td>(6)</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<h1><span class="hover-hl">Hover</span> Highlight Only</h1>
|
|
<table class="tablesorter hover-highlight">
|
|
<thead>
|
|
<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
|
|
<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
|
|
<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>2.89</td><td>44.2%</td><td>-15</td></tr>
|
|
<tr><td>A1</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
|
|
<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>$153.19</td><td>23%</td><td>+9</td></tr>
|
|
<tr><td>A256</td><td>John</td><td>Clark</td><td>44</td><td>($19.89)</td><td>25.1%</td><td>(5)</td></tr>
|
|
<tr><td>A23</td><td>Elvis</td><td>Presley</td><td>24</td><td>($9.99)</td><td>50%</td><td>(22)</td></tr>
|
|
<tr><td>A10</td><td>Frank</td><td>Carter</td><td>40</td><td>-12.99</td><td>20%</td><td>(6)</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<h1><span class="focus-hl">Focus</span> Highlight Only <small>(click on a tbody cell)</small></h1>
|
|
<table class="tablesorter focus-highlight">
|
|
<thead>
|
|
<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
|
|
<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
|
|
<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>2.89</td><td>44.2%</td><td>-15</td></tr>
|
|
<tr><td>A1</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
|
|
<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>$153.19</td><td>23%</td><td>+9</td></tr>
|
|
<tr><td>A256</td><td>John</td><td>Clark</td><td>44</td><td>($19.89)</td><td>25.1%</td><td>(5)</td></tr>
|
|
<tr><td>A23</td><td>Elvis</td><td>Presley</td><td>24</td><td>($9.99)</td><td>50%</td><td>(22)</td></tr>
|
|
<tr><td>A10</td><td>Frank</td><td>Carter</td><td>40</td><td>-12.99</td><td>20%</td><td>(6)</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<h1>Zebra + <span class="hover-hl">Hover</span> + <span class="focus-hl">Focus</span> Highlight</h1>
|
|
<table class="tablesorter hover-highlight focus-highlight widget-zebra">
|
|
<thead>
|
|
<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
|
|
<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
|
|
<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>2.89</td><td>44.2%</td><td>-15</td></tr>
|
|
<tr><td>A1</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
|
|
<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>$153.19</td><td>23%</td><td>+9</td></tr>
|
|
<tr><td>A256</td><td>John</td><td>Clark</td><td>44</td><td>($19.89)</td><td>25.1%</td><td>(5)</td></tr>
|
|
<tr><td>A23</td><td>Elvis</td><td>Presley</td><td>24</td><td>($9.99)</td><td>50%</td><td>(22)</td></tr>
|
|
<tr><td>A10</td><td>Frank</td><td>Carter</td><td>40</td><td>-12.99</td><td>20%</td><td>(6)</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<h1>Zebra + <span class="hover-hl">Hover</span> Highlight Only</h1>
|
|
<table class="tablesorter hover-highlight widget-zebra">
|
|
<thead>
|
|
<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
|
|
<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
|
|
<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>2.89</td><td>44.2%</td><td>-15</td></tr>
|
|
<tr><td>A1</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
|
|
<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>$153.19</td><td>23%</td><td>+9</td></tr>
|
|
<tr><td>A256</td><td>John</td><td>Clark</td><td>44</td><td>($19.89)</td><td>25.1%</td><td>(5)</td></tr>
|
|
<tr><td>A23</td><td>Elvis</td><td>Presley</td><td>24</td><td>($9.99)</td><td>50%</td><td>(22)</td></tr>
|
|
<tr><td>A10</td><td>Frank</td><td>Carter</td><td>40</td><td>-12.99</td><td>20%</td><td>(6)</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<h1>Zebra + <span class="focus-hl">Focus</span> Highlight Only <small>(click on a tbody cell)</small></h1>
|
|
<table class="tablesorter focus-highlight widget-zebra">
|
|
<thead>
|
|
<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
|
|
<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
|
|
<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>2.89</td><td>44.2%</td><td>-15</td></tr>
|
|
<tr><td>A1</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
|
|
<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>$153.19</td><td>23%</td><td>+9</td></tr>
|
|
<tr><td>A256</td><td>John</td><td>Clark</td><td>44</td><td>($19.89)</td><td>25.1%</td><td>(5)</td></tr>
|
|
<tr><td>A23</td><td>Elvis</td><td>Presley</td><td>24</td><td>($9.99)</td><td>50%</td><td>(22)</td></tr>
|
|
<tr><td>A10</td><td>Frank</td><td>Carter</td><td>40</td><td>-12.99</td><td>20%</td><td>(6)</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<br class="clear"/>
|
|
|
|
<h1>Page Header</h1>
|
|
<div>
|
|
<pre class="prettyprint lang-html"><!-- Add any theme; the css for highlighting may need modification
|
|
to match the selected theme, if it isn't the "blue" theme -->
|
|
<link href="css/theme.blue.css" rel="stylesheet">
|
|
<script src="js/jquery.min.js"></script>
|
|
<script src="js/jquery.tablesorter.js"></script></pre>
|
|
</div>
|
|
|
|
<h1>CSS</h1>
|
|
<div id="css">
|
|
<pre class="prettyprint lang-css"></pre>
|
|
</div>
|
|
<h1>Javascript</h1>
|
|
<div id="javascript">
|
|
<pre class="prettyprint lang-javascript"></pre>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
/* highlight hover & focus selectors in the syntax highlighted code */
|
|
$(window).on('load', function() {
|
|
setTimeout(function() {
|
|
// css
|
|
$('.pln:contains(highlight)').each(function() {
|
|
var $this = $(this),
|
|
$prev = $this.prev().prev(),
|
|
text = $prev.text() || '',
|
|
type = /hover/.test(text) ? 'hover-hl' : /focus/.test(text) ? 'focus-hl' : '';
|
|
if (type) {
|
|
$this.html(function(i,h) {
|
|
return h.replace('highlight', '<span>highlight</span>');
|
|
});
|
|
// "highlight".. "-" .... "hover"/"focus" ... "."
|
|
$this.find('span').add( $prev ).add( $this.prev() ).add( $prev.prev() ).addClass(type);
|
|
}
|
|
});
|
|
// js
|
|
$('.str:contains(focus-highlight)').addClass('focus-hl');
|
|
}, 500);
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|