jmdn/wefra
3
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity
master
wefra/lib/jquery/tablesorter-2.31.1/docs/example-css-highlighting.html

371 lines
15 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - CSS Column &amp; 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 &amp; 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 &amp; 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>&quot;<span class="hover-hl">hover-highlight</span>&quot;</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 &amp; 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>&quot;<span class="focus-hl">focus-highlight</span>&quot;</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 &amp; 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">&lt;!-- Add any theme; the css for highlighting may need modification
to match the selected theme, if it isn't the "blue" theme --&gt;
&lt;link href=&quot;css/theme.blue.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;</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>
Reference in New Issue View Git Blame Copy Permalink