mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
Add Widget View, start on the documentation
This commit is contained in:
Justin F. Hallett
parent
612c76e5ee
commit
6c0fa3bdcf
974
docs/example-widget-view.html
Normal file
974
docs/example-widget-view.html
Normal file
@ -0,0 +1,974 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - View Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
<script src="js/jquery-ui.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link rel="stylesheet" href="css/prettify.css">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
<!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
|
||||
<!--<script src="js/bootstrap.min.js"></script>-->
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script src="../js/widgets/widget-pager.js"></script>
|
||||
<script src="../js/widgets/widget-filter.js"></script>
|
||||
<script src="../js/widgets/widget-view.js"></script>
|
||||
|
||||
<style>
|
||||
h1 { font-size: 28px; }
|
||||
/* override jQuery UI overriding Bootstrap */
|
||||
.accordion .ui-widget-content a {
|
||||
color: #337ab7;
|
||||
}
|
||||
/* .spacer in docs css is set to height:800px for stickyHeader demo */
|
||||
#pager .spacer { height: auto; }
|
||||
.wrapper { padding: 5px; }
|
||||
</style>
|
||||
|
||||
<style id="css">
|
||||
#demo {
|
||||
font-size: 12px;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#demo img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#demo h1,
|
||||
#demo h3 {
|
||||
font-weight: normal;
|
||||
line-height: 1em;
|
||||
color: #545454;
|
||||
letter-spacing: -0.04em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
border: none !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#demo h1 {
|
||||
font-size: 3em;
|
||||
position: relative;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
#demo .filtered {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#viewHeader {
|
||||
position: relative;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
#viewHeader section.left {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 200px;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
#viewHeader section.right {
|
||||
display: block;
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
width: 400px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.hasPrice:before {
|
||||
content: attr(data-currencysym) " ";
|
||||
}
|
||||
|
||||
.hasPrice:after {
|
||||
content: " " attr(data-currencycode);
|
||||
}
|
||||
|
||||
#pager {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.35em;
|
||||
}
|
||||
|
||||
#tablesearch {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
#ts-view {
|
||||
width 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#ts-view-toolbar {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ts-view-switcher {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.ts-view-switcher:last-child {
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.ts-view-switcher i,
|
||||
.mybutton {
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
text-shadow: 0 1px 1px #777;
|
||||
box-shadow: 0 1px 2px 0 #777;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
border: 0;
|
||||
background: rgb(70, 74, 88);
|
||||
background: -moz-linear-gradient(top, rgba(70, 74, 88, 1) 0%, rgba(43, 47, 58, 1) 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(70, 74, 88, 1)), color-stop(100%, rgba(43, 47, 58, 1)));
|
||||
background: -webkit-linear-gradient(top, rgba(70, 74, 88, 1) 0%, rgba(43, 47, 58, 1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(70, 74, 88, 1) 0%, rgba(43, 47, 58, 1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(70, 74, 88, 1) 0%, rgba(43, 47, 58, 1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(70, 74, 88, 1) 0%, rgba(43, 47, 58, 1) 100%);
|
||||
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#464a58', endColorstr='#2b2f3a', GradientType=0);
|
||||
}
|
||||
|
||||
.ts-view-switcher:hover i,
|
||||
.mybutton:not(.nohover):hover {
|
||||
background: rgb(252, 172, 94);
|
||||
background: -moz-linear-gradient(top, rgba(252, 172, 94, 1) 0%, rgba(221, 135, 49, 1) 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(252, 172, 94, 1)), color-stop(100%, rgba(221, 135, 49, 1)));
|
||||
background: -webkit-linear-gradient(top, rgba(252, 172, 94, 1) 0%, rgba(221, 135, 49, 1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(252, 172, 94, 1) 0%, rgba(221, 135, 49, 1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(252, 172, 94, 1) 0%, rgba(221, 135, 49, 1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(252, 172, 94, 1) 0%, rgba(221, 135, 49, 1) 100%);
|
||||
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fcac5e', endColorstr='#dd8731', GradientType=0);
|
||||
}
|
||||
|
||||
.ts-view-switcher.active i,
|
||||
.mybutton.active {
|
||||
background: rgb(235, 181, 111);
|
||||
background: -moz-linear-gradient(top, rgba(235, 181, 111, 1) 0%, rgba(203, 145, 68, 1) 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(235, 181, 111, 1)), color-stop(100%, rgba(203, 145, 68, 1)));
|
||||
background: -webkit-linear-gradient(top, rgba(235, 181, 111, 1) 0%, rgba(203, 145, 68, 1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(235, 181, 111, 1) 0%, rgba(203, 145, 68, 1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(235, 181, 111, 1) 0%, rgba(203, 145, 68, 1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(235, 181, 111, 1) 0%, rgba(203, 145, 68, 1) 100%);
|
||||
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ebb56f', endColorstr='#cb9144', GradientType=0);
|
||||
}
|
||||
|
||||
.mybutton {
|
||||
margin-left: 8px;
|
||||
padding: 8px;
|
||||
width: 100px;
|
||||
cursor: pointer;
|
||||
}
|
||||
/** list view **/
|
||||
|
||||
ul.list {
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
ul.list li {
|
||||
display: block;
|
||||
background: #c9d0d1;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
ul.list li.odd {
|
||||
background: #d7dfe0;
|
||||
}
|
||||
|
||||
ul.list li section.left {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 70%;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
ul.list li section.right {
|
||||
display: block;
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
width: 250px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
ul.list li section.left img.thumb {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
ul.list li section.left img.featured-banner {
|
||||
position: absolute;
|
||||
left: -18px;
|
||||
top: -3px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
ul.list li section.left h3 {
|
||||
font-family: "Trebuchet MS", Arial, sans-serif;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: #707375;
|
||||
font-size: 1.4em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
ul.list li section.left span.meta {
|
||||
color: #93989b;
|
||||
font-weight: normal;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
ul.list li section.right span.price {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
color: #ad3939;
|
||||
font-size: 1.6em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
ul.list li section.right a.firstbtn {
|
||||
margin-right: 7px;
|
||||
}
|
||||
/** grid view **/
|
||||
|
||||
ul.grid {
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
display: block;
|
||||
width: 680px;
|
||||
}
|
||||
|
||||
ul.grid li {
|
||||
position: relative;
|
||||
display: inline-table;
|
||||
width: 220px;
|
||||
height: 200px;
|
||||
border-right: 1px solid #b6bdbe;
|
||||
padding: 5px 22px;
|
||||
margin-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
}
|
||||
|
||||
ul.grid li:nth-child(3n+3) {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
ul.grid li section.left {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.grid li section.right {
|
||||
/* nothing */
|
||||
}
|
||||
|
||||
ul.grid li section.left img.thumb {
|
||||
margin: 0 18px;
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
ul.grid li section.left img.featured-banner {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
ul.grid li section.left h3 {
|
||||
font-family: "Trebuchet MS", Arial, sans-serif;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: #707375;
|
||||
font-size: 1.4em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
ul.grid li section.left span.meta {
|
||||
display: block;
|
||||
color: #93989b;
|
||||
font-weight: normal;
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
ul.grid li section.right span.price {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
color: #ad3939;
|
||||
font-size: 1.75em;
|
||||
}
|
||||
|
||||
ul.grid li section.right span.darkview {
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 190px;
|
||||
height: 100%;
|
||||
margin: 0 15px;
|
||||
border-radius: 6px;
|
||||
background: rgba(40, 45, 55, 0.75);
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
padding-top: 35px;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
transition: opacity 0.2s linear 0s;
|
||||
-webkit-transition: opacity 0.2s linear 0s;
|
||||
-moz-transition: opacity 0.25s linear 0s;
|
||||
-o-transition: opacity 0.25s linear 0s;
|
||||
}
|
||||
|
||||
ul.grid li:hover section.right span.darkview {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
ul.grid li section.right span.darkview a.firstbtn {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/** clearfix **/
|
||||
|
||||
.clearfix:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
line-height: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
html[xmlns] .clearfix {
|
||||
display: block;
|
||||
}
|
||||
|
||||
* html .clearfix {
|
||||
height: 1%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>View Widget (beta)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
<div id="main">
|
||||
<p></p>
|
||||
<br>
|
||||
<div id="root" class="accordion">
|
||||
|
||||
<h3 id="notes"><a href="#">Notes</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This widget will <strong>only work</strong> in tablesorter version 2.23.6+ and jQuery version 1.7+.</li>
|
||||
<li>When it's done building the view 'viewComplete' will be tiggered</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3 id="options"><a href="#">Options</a></h3>
|
||||
<div>
|
||||
<div>
|
||||
<span class="label label-info">TIP!</span> Click on the link in the function column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
||||
</div>
|
||||
|
||||
<table class="options tablesorter-blue">
|
||||
<thead>
|
||||
<tr><th class="option">Option</th><th class="defaults">Default</th><th class="sorter-false">Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr id="view-toolbar">
|
||||
<td><a href="#" class="permalink">view_toolbar</a></td>
|
||||
<td>'#ts-view-toolbar'</span></td>
|
||||
<td>Element to insert toolbar (view buttons) into.
|
||||
<div class="collapsible">
|
||||
<p></p>
|
||||
This option allows you to select which element the view buttons will be injected into.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="view-container">
|
||||
<td><a href="#" class="permalink">view_container</a></td>
|
||||
<td>'#ts-view'</td>
|
||||
<td>Element to insert the view into.
|
||||
<div class="collapsible">
|
||||
<p></p>
|
||||
This option allows you to select which element the view will be injected into.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="view-caption">
|
||||
<td><a href="#" class="permalink">view_caption</a></td>
|
||||
<td>'#ts-view-caption'</td>
|
||||
<td>Element to copy the tabel caption into curing views.
|
||||
<div class="collapsible">
|
||||
<p></p>
|
||||
This option allows you to select which element to copy thre caption into during views.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="view-switcher-class">
|
||||
<td><a href="#" class="permalink">view_switcher_class</a></td>
|
||||
<td>'ts-view-switcher'</td>
|
||||
<td>Class name to be added to all view buttons.
|
||||
<div class="collapsible">
|
||||
<p></p>
|
||||
Name of the class to be added to all view buttons.
|
||||
<p></p>
|
||||
<span class="label warning">* Note *</span> Just put in the name of the class do NOT put a . in front of it.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="view-layout">
|
||||
<td><a href="#" class="permalink">view_layout</a></td>
|
||||
<td>false</td>
|
||||
<td>Default view to display on startup.
|
||||
<div class="collapsible">
|
||||
<p></p>
|
||||
Default view to display on startup, false means none. The value must be an object in <a href="#view-layouts">view_layouts</a>.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="view-layouts">
|
||||
<td><a href="#" class="permalink">view_layouts</a></td>
|
||||
<td>{ 'view': { <options> } }</td>
|
||||
<td>List of available layouts and it's options.
|
||||
<div class="collapsible">
|
||||
<p></p>
|
||||
FIXME add details for options
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p></p>
|
||||
|
||||
<h1>View Demo</h1>
|
||||
<p></p>
|
||||
<div id="demo">
|
||||
<!-- View Widget -->
|
||||
<div>
|
||||
<div id="viewHeader">
|
||||
<section class="left">
|
||||
<h1 id="ts-view-caption"></h1>
|
||||
</section>
|
||||
<section class="right">
|
||||
<input type="search" id="tablesearch" placeholder="Search..." data-column="1,2,3" />
|
||||
<div id="ts-view-toolbar"></div>
|
||||
</section>
|
||||
</div>
|
||||
<div id="ts-view"></div>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<table id="table" class="tablesorter">
|
||||
<caption>Our Products</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>PN</th>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10001
|
||||
</td>
|
||||
<td>
|
||||
Widget 1
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 1, it's nice soft and unique.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
19.99
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10002
|
||||
</td>
|
||||
<td>
|
||||
Widget 2
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 2, it's nice fluffy and unique.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
1.99
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/sale-banner.png" alt="on sale" class="featured-banner">
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10003
|
||||
</td>
|
||||
<td>
|
||||
Widget 3
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 3, it's nice soft and unique.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
89.99
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10004
|
||||
</td>
|
||||
<td>
|
||||
Widget 4
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 4, it's nice soft and unique. I'ts also a little fluffy but not nice and fluffy.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
49.99
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/new-product-banner.png" alt="on sale" class="featured-banner">
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10005
|
||||
</td>
|
||||
<td>
|
||||
Widget 5
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 5, it's nice soft and unique. This one also have a unique smell and texture. Not for human consumption.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
18.49
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10006
|
||||
</td>
|
||||
<td>
|
||||
Widget 6
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 6, it's nice soft and unique. Nothing special here but I do want a longer description so I can see how things line up, or in this case don't line up. Oh but this is the only Widget we have in purple!
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
69.98
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10007
|
||||
</td>
|
||||
<td>
|
||||
Widget 7
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 7, it's nice soft and unique.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
4.99
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10008
|
||||
</td>
|
||||
<td>
|
||||
Widget 8
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 8, it's nice soft and unique.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
17.89
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10009
|
||||
</td>
|
||||
<td>
|
||||
Widget 9
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 9, it's nice soft and unique.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
17.49
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10010
|
||||
</td>
|
||||
<td>
|
||||
Widget 10
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 10, it's nice soft and unique.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
119.99
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10011
|
||||
</td>
|
||||
<td>
|
||||
Widget 11
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 11, it's nice soft and unique.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
18.88
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10012
|
||||
</td>
|
||||
<td>
|
||||
Widget 12
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 12, it's nice soft and unique.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
19.97
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10013
|
||||
</td>
|
||||
<td>
|
||||
Widget 13
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 13, it's nice soft and unique.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
9.98
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10014
|
||||
</td>
|
||||
<td>
|
||||
Widget 14
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 14, it's nice soft and unique.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
29.99
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10015
|
||||
</td>
|
||||
<td>
|
||||
Widget 15
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 15, it's nice soft and unique.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
44.95
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10016
|
||||
</td>
|
||||
<td>
|
||||
Widget 16
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 16, it's nice soft and unique.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
8.69
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10017
|
||||
</td>
|
||||
<td>
|
||||
Widget 17
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 17, it's nice soft and unique.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
17.99
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10018
|
||||
</td>
|
||||
<td>
|
||||
Widget 18
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 18, it's nice soft and unique.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
219.99
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10019
|
||||
</td>
|
||||
<td>
|
||||
Widget 19
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 19, it's nice soft and unique.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
1.98
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="http://www.vandelaydesign.com/demos/list-grid-view/images/products/grid-default-thumb.png" alt="default thumb" class="thumb" />
|
||||
</td>
|
||||
<td>
|
||||
001-10020
|
||||
</td>
|
||||
<td>
|
||||
Widget 20
|
||||
</td>
|
||||
<td>
|
||||
This is Widget 20, it's nice soft and unique.
|
||||
</td>
|
||||
<td class="hasPrice" data-currencysym="$" data-currencycode="CAD">
|
||||
9.97
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pager -->
|
||||
<div id="pager" class="pager">
|
||||
<form>
|
||||
<i class="fa fa-step-backward first clickable" title="First page"></i>
|
||||
<i class="fa fa-backward prev clickable" title="Previous page"></i>
|
||||
<span class="pagedisplay"></span>
|
||||
<i class="fa fa-forward next clickable" title="Next page"></i>
|
||||
<i class="fa fa-step-forward last clickable" title="Last page"></i>
|
||||
<select class="pagesize">
|
||||
<option value="6">6</option>
|
||||
<option value="9">9</option>
|
||||
<option value="12">12</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html">
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/widgets/widget-view.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
<script src="../js/widgets/widget-filter.js"></script>
|
||||
<script src="../js/widgets/widget-pager.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h1>HTML</h1>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script id="js">
|
||||
$(function(){
|
||||
/* Initial settings */
|
||||
var views = {
|
||||
grid: {
|
||||
icon: 'fa fa-th',
|
||||
title: 'GridView',
|
||||
container: '<ul>',
|
||||
tmpl: '<li class="clearfix"><section class="left">{col0}<h3>{col2}</h3><span class="meta">Product ID: {col1}</span><p>{col3}</p></section><section class="right"><span class="price">{col4}</span><span class="darkview"><button class="mybutton nohover" title="Read More..." >More</button><button class="mybutton nohover active" title="Add to Cart" >Add To Cart</button></span></section></li>'
|
||||
},
|
||||
|
||||
list: {
|
||||
icon: 'fa fa-th-list',
|
||||
title: 'ListView',
|
||||
container: '<ul>',
|
||||
tmpl: '<li class="clearfix"><section class="left">{col0}<h3>{col2}</h3><span class="meta">Product ID: {col1}</span><p>{col3}</p></section><section class="right"><span class="price">{col4}</span><span class="darkview"><button class="mybutton nohover" title="Read More..." >More</button><button class="mybutton nohover active" title="Add to Cart" >Add To Cart</button></span></section></li>'
|
||||
},
|
||||
|
||||
table: {
|
||||
icon: 'fa fa-table',
|
||||
title: 'Orignal TableSorter View',
|
||||
raw: true
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$('#table')
|
||||
.tablesorter({
|
||||
theme: 'blue',
|
||||
sortList: [[1, 0]],
|
||||
widgets: ['pager', 'zebra', 'filter', 'view'],
|
||||
widgetOptions: {
|
||||
filter_external: '#tablesearch',
|
||||
filter_columnFilters: false,
|
||||
pager_selectors: { container: '#pager' },
|
||||
pager_output: 'Showing {startRow} to {endRow} of {filteredRows} results',
|
||||
pager_size: 6,
|
||||
view_layout: 'list',
|
||||
view_layouts: views
|
||||
}
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
193
js/widgets/widget-view.js
Normal file
193
js/widgets/widget-view.js
Normal file
@ -0,0 +1,193 @@
|
||||
/* Widget: view (beta) - updated 2/7/2015 (v2.19.0) */
|
||||
/*
|
||||
* Requires tablesorter v2.8+ and jQuery 1.7+
|
||||
*/
|
||||
/*jshint browser:true, jquery:true, unused:false */
|
||||
/*global jQuery: false */
|
||||
;
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
var ts = $.tablesorter,
|
||||
is_hidden = false,
|
||||
tpos, ttop, tleft,
|
||||
|
||||
view = ts.view = {
|
||||
copyCaption: function(c, wo) {
|
||||
view.removeCaption(c, wo);
|
||||
|
||||
if (c.$table.find('caption').length > 0) {
|
||||
$(wo.view_caption).text(c.$table.find('caption').text());
|
||||
}
|
||||
},
|
||||
|
||||
removeCaption: function(c, wo) {
|
||||
$(wo.view_caption).empty();
|
||||
},
|
||||
|
||||
buildToolBar: function(c, wo) {
|
||||
view.removeToolBar(c, wo);
|
||||
view.copyCaption(c, wo);
|
||||
var $toolbar = $(wo.view_toolbar);
|
||||
|
||||
$.each(wo.view_layouts, function(k, v) {
|
||||
var classes = wo.view_switcher_class;
|
||||
if (k == wo.view_layout) {
|
||||
classes += ' active';
|
||||
}
|
||||
|
||||
var $switcher = $('<a>', {
|
||||
'href': '#',
|
||||
'class': classes,
|
||||
'data-view-type': k,
|
||||
'title': v.title
|
||||
});
|
||||
|
||||
$switcher.append($('<i>', {
|
||||
'class': v.icon
|
||||
}));
|
||||
|
||||
$toolbar.append($switcher);
|
||||
});
|
||||
|
||||
$toolbar.find('.' + wo.view_switcher_class).on('click', function(e) {
|
||||
e.preventDefault();
|
||||
if ($(this).hasClass('active')) {
|
||||
// if currently clicked button has the active class
|
||||
// then we do nothing!
|
||||
return false;
|
||||
} else {
|
||||
// otherwise we are clicking on the inactive button
|
||||
// and in the process of switching views!
|
||||
$toolbar.find('.' + wo.view_switcher_class).removeClass('active');
|
||||
$(this).addClass('active');
|
||||
wo.view_layout = $(this).attr('data-view-type');
|
||||
|
||||
if (wo.view_layouts[wo.view_layout].raw === true) {
|
||||
view.remove(c, wo);
|
||||
view.buildToolBar(c, wo)
|
||||
} else {
|
||||
if (is_hidden === false) {
|
||||
view.hideTable(c, wo);
|
||||
}
|
||||
view.buildView(c, wo);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
removeToolBar: function(c, wo) {
|
||||
$(wo.view_toolbar).empty();
|
||||
view.removeCaption(c, wo);
|
||||
},
|
||||
|
||||
buildView: function(c, wo) {
|
||||
view.removeView(c, wo);
|
||||
|
||||
var myview = wo.view_layouts[wo.view_layout];
|
||||
var $container = $(myview.container, {
|
||||
'class': wo.view_layout
|
||||
});
|
||||
|
||||
ts.getColumnText(c.$table, 0, function(data) {
|
||||
var tmpl = myview.tmpl;
|
||||
|
||||
$.each($(data.$row).find('td'), function(k, v) {
|
||||
var attrs = {};
|
||||
var reg = '{col' + k + '}';
|
||||
$.each(v.attributes, function(idx, attr) {
|
||||
attrs[attr.nodeName] = attr.nodeValue;
|
||||
});
|
||||
console.log(v, attrs);
|
||||
var content = $(v).html();
|
||||
// Add 2 spans, one is dropped when using .html()
|
||||
var span = $('<span />').append($('<span/>', attrs).append(content));
|
||||
tmpl = tmpl.replace(reg, span.html());
|
||||
});
|
||||
|
||||
var $tmpl = $(tmpl);
|
||||
$.each(data.$row[0].attributes, function(idx, attr) {
|
||||
if (attr.nodeName == 'class') {
|
||||
$tmpl.attr(attr.nodeName, $tmpl.attr(attr.nodeName) + ' ' + attr.nodeValue);
|
||||
} else {
|
||||
$tmpl.attr(attr.nodeName, attr.nodeValue);
|
||||
}
|
||||
});
|
||||
$container.append($tmpl);
|
||||
});
|
||||
|
||||
$(wo.view_container).append($container);
|
||||
},
|
||||
|
||||
removeView: function(c, wo) {
|
||||
$(wo.view_container).empty();
|
||||
},
|
||||
|
||||
hideTable: function(c, wo) {
|
||||
tpos = c.$table.css('position');
|
||||
ttop = c.$table.css('bottom');
|
||||
tleft = c.$table.css('left');
|
||||
|
||||
c.$table.css({
|
||||
'position': 'absolute',
|
||||
'top': '-10000px',
|
||||
'left': '-10000px'
|
||||
});
|
||||
|
||||
is_hidden = true;
|
||||
},
|
||||
|
||||
init: function(c, wo) {
|
||||
if (wo.view_layout === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof wo.view_layouts[wo.view_layout] === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (is_hidden === false) {
|
||||
view.hideTable(c, wo);
|
||||
}
|
||||
|
||||
$(c.$table).on('tablesorter-ready', function() {
|
||||
view.buildToolBar(c, wo);
|
||||
view.buildView(c, wo);
|
||||
$(c.$table).trigger('viewComplete');
|
||||
});
|
||||
},
|
||||
|
||||
remove: function(c, wo) {
|
||||
view.removeToolBar(c, wo);
|
||||
view.removeView(c, wo);
|
||||
|
||||
c.$table.css({
|
||||
'position': tpos,
|
||||
'top': ttop,
|
||||
'left': tleft
|
||||
});
|
||||
|
||||
is_hidden = false;
|
||||
}
|
||||
};
|
||||
|
||||
ts.addWidget({
|
||||
id: 'view',
|
||||
options: {
|
||||
view_toolbar: '#ts-view-toolbar',
|
||||
view_container: '#ts-view',
|
||||
view_caption: '#ts-view-caption',
|
||||
view_switcher_class: 'ts-view-switcher',
|
||||
view_layout: false,
|
||||
view_layouts: {}
|
||||
},
|
||||
|
||||
init: function(table, thisWidget, c, wo) {
|
||||
view.init(c, wo);
|
||||
},
|
||||
|
||||
remove: function(table, c, wo) {
|
||||
view.remove(c, wo);
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
Loading…
Reference in New Issue
Block a user