From 10d36f9f820493d28125bfde75417c37b02929e2 Mon Sep 17 00:00:00 2001
From: Mottie <wowmotty@gmail.com>
Date: Mon, 5 May 2014 16:38:30 -0500
Subject: [PATCH] Docs: add metro dark demo page

---
 docs/example-option-theme-metro-style.html | 194 +++++++++++++++++++++
 docs/index.html                            |   1 +
 2 files changed, 195 insertions(+)
 create mode 100644 docs/example-option-theme-metro-style.html
diff --git a/docs/example-option-theme-metro-style.html b/docs/example-option-theme-metro-style.html
new file mode 100644
index 00000000..784c9244
--- /dev/null
+++ b/docs/example-option-theme-metro-style.html
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+	<title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title>
+
+	<!-- jQuery -->
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.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.metro-dark.css">
+	<script src="../js/jquery.tablesorter.js"></script>
+	<script src="../js/jquery.tablesorter.widgets.js"></script>
+
+	<!-- Tablesorter: optional -->
+	<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
+	<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
+
+	<style id="css">.table-title {
+	margin: 8px 4px;
+	font: bold 16px 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
+	color: #fff;
+}</style>
+
+	<script id="js">$(function(){
+
+	$("table")
+		.tablesorter({
+			theme: 'metro-dark',
+			sortList: [[0,0],[1,0],[2,0]],
+			widthFixed: true,
+			widgets: ['zebra', 'columns', 'filter']
+		})
+		.tablesorterPager({
+			// target the pager markup - see the HTML block below
+			container: $(".pager"),
+			output: '{startRow} to {endRow} ({totalRows})'
+		});
+
+});</script>
+</head>
+<body id="pager-demo">
+	<div id="banner">
+		<h1>table<em>sorter</em></h1>
+		<h2>Metro Style</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>Only the Windows Metro Dark theme has been included; for other colors:
+				<ul>
+					<li>Create your own dynamically by modifying <a href="http://codepen.io/Mottie/pen/gCslk">this demo</a>.</li>
+					<li>Change the <code>@headerBackground</code> to any valid color (some styles inspired by <a href="http://www.jtable.org/">JTable</a> have been listed in the comments).</li>
+					<li>If you don't like the look of the style, you might also want to check out <a href="http://jquit.com/builder/">this jQuery UI theme builder</a> which creates metro style themes.</li>
+				</ul>
+			</li>
+			<li>For alternate <code>thead</code> &amp; <code>tfoot</code> row colors, add the class name <code>dark-row</code>. See the HTML below.</li>
+		</ul>
+	</p>
+
+	<h1>Demo</h1>
+
+<div id="demo"><table class="tablesorter">
+	<thead>
+		<tr class="dark-row">
+			<th colspan="7" class="sorter-false">
+				<h2 class="table-title">Table Title</h2>
+			</th>
+		</tr>
+		<tr>
+			<th>Name</th>
+			<th>Major</th>
+			<th>Sex</th>
+			<th>English</th>
+			<th>Japanese</th>
+			<th>Calculus</th>
+			<th class="sorter-false">Geometry</th>
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+			<th>Name</th>
+			<th>Major</th>
+			<th>Sex</th>
+			<th>English</th>
+			<th>Japanese</th>
+			<th>Calculus</th>
+			<th>Geometry</th>
+		</tr>
+		<tr class="dark-row">
+			<th colspan="7">
+				<div class="pager">
+					<button type="button" class="first">&lt;&lt;</button>
+					<button type="button" class="prev">&lt;</button>
+					<span class="pagedisplay"></span>
+					<button type="button" class="next">&gt;</button>
+					<button type="button" class="last">&gt;&gt;</button>
+					<select class="pagesize" title="Select page size">
+						<option value="10">10</option>
+						<option value="20">20</option>
+						<option value="30">30</option>
+						<option value="40">40</option>
+					</select>
+					<select class="gotoPage" title="Select page number"></select>
+				</div>
+			</th>
+		</tr>
+	</tfoot>
+	<tbody>
+		<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
+		<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
+		<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
+		<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
+		<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
+		<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
+		<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
+		<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
+		<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
+		<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
+		<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
+		<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
+		<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
+		<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
+		<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
+		<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
+		<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
+		<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
+		<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
+		<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
+		<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
+		<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
+		<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
+		<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
+		<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
+		<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
+		<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
+		<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
+		<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
+		<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
+		<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
+		<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
+		<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
+		<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
+		<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
+		<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
+		<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
+		<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
+		<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
+		<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
+		<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
+		<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
+		<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
+		<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
+		<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
+		<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
+		<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
+		<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
+		<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
+		<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
+	</tbody>
+</table>
+</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>
+
+</body>
+</html>
+
diff --git a/docs/index.html b/docs/index.html
index a8a4160c..531310fd 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -367,6 +367,7 @@
 				<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>

+ Table Title +
Name	Major	Sex	English	Japanese	Calculus	Geometry
Name	Major	Sex	English	Japanese	Calculus	Geometry
+ + + + + + + + + +
Student01	Languages	male	80	70	75	80
Student02	Mathematics	male	90	88	100	90
Student03	Languages	female	85	95	80	85
Student04	Languages	male	60	55	100	100
Student05	Languages	female	68	80	95	80
Student06	Mathematics	male	100	99	100	90
Student07	Mathematics	male	85	68	90	90
Student08	Languages	male	100	90	90	85
Student09	Mathematics	male	80	50	65	75
Student10	Languages	male	85	100	100	90
Student11	Languages	male	86	85	100	100
Student12	Mathematics	female	100	75	70	85
Student13	Languages	female	100	80	100	90
Student14	Languages	female	50	45	55	90
Student15	Languages	male	95	35	100	90
Student16	Languages	female	100	50	30	70
Student17	Languages	female	80	100	55	65
Student18	Mathematics	male	30	49	55	75
Student19	Languages	male	68	90	88	70
Student20	Mathematics	male	40	45	40	80
Student21	Languages	male	50	45	100	100
Student22	Mathematics	male	100	99	100	90
Student23	Mathematics	male	82	77	0	79
Student24	Languages	female	100	91	13	82
Student25	Mathematics	male	22	96	82	53
Student26	Languages	female	37	29	56	59
Student27	Mathematics	male	86	82	69	23
Student28	Languages	female	44	25	43	1
Student29	Mathematics	male	77	47	22	38
Student30	Languages	female	19	35	23	10
Student31	Mathematics	male	90	27	17	50
Student32	Languages	female	60	75	33	38
Student33	Mathematics	male	4	31	37	15
Student34	Languages	female	77	97	81	44
Student35	Mathematics	male	5	81	51	95
Student36	Languages	female	70	61	70	94
Student37	Mathematics	male	60	3	61	84
Student38	Languages	female	63	39	0	11
Student39	Mathematics	male	50	46	32	38
Student40	Languages	female	51	75	25	3
Student41	Mathematics	male	43	34	28	78
Student42	Languages	female	11	89	60	95
Student43	Mathematics	male	48	92	18	88
Student44	Languages	female	82	2	59	73
Student45	Mathematics	male	91	73	37	39
Student46	Languages	female	4	8	12	10
Student47	Mathematics	male	89	10	6	11
Student48	Languages	female	90	32	21	18
Student49	Mathematics	male	42	49	49	72
Student50	Languages	female	56	37	67	54