mirror of
https://github.com/Mottie/tablesorter.git
synced 2025-01-12 15:24:21 +00:00
Docs: Add css row & column highlighting demo
This commit is contained in:
Mottie
parent
8f161d8c7c
commit
4ca95358c4
361
docs/example-css-highlighting.html
Normal file
361
docs/example-css-highlighting.html
Normal file
@ -0,0 +1,361 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: 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>
|
||||
<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 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 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>
|
||||
<p>
|
||||
|
||||
<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>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).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>
|
||||
@ -370,11 +370,18 @@
|
||||
<li><a href="example-header-column-span.html">Sorting Across Multiple Columns</a> (v2.3)</li>
|
||||
<li><a href="example-option-show-processing.html">Show a processing icon during sorting/filtering</a> (v2.4)</li>
|
||||
<li><a href="example-option-delay-init.html">Delay table initialization</a> (<a href="#delayinit"><code>delayInit</code></a>)</li>
|
||||
<li><a href="example-option-theme-metro-style.html">Set up a Metro style theme</a> (<span class="version">v2.16.4</span>)</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4>Theming</h4>
|
||||
<ul>
|
||||
<li>The <a href="example-widget-bootstrap-theme.html">Bootstrap</a> & <a href="example-widget-ui-theme.html">jQuery UI</a> themes require the uitheme widget.</li>
|
||||
<li>Set up a <a href="example-option-theme-metro-style.html">Metro style theme</a> (<span class="version">v2.16.4</span>)</li>
|
||||
<li>Use css to <a href="example-css-highlighting.html">highlight rows & columns</a> (<span class="version">v2.19.2</span>)</li>
|
||||
</ul>
|
||||
<p></p>
|
||||
|
||||
<h4>Using Parsers / Extracting Content</h4>
|
||||
<ul>
|
||||
<li><a href="example-option-digits.html">Dealing with digits!</a></li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user