logo

demo

Unnamed repository; edit this file 'description' to name the repository. git clone https://hacktivis.me/git/demo.git

index.html (2685B)

    

  1. <!DOCTYPE html>
  2. <html lang=en>
  3. <head>
  4. 	<meta charset="utf-8"/>
  5. 	<title>SortTable — Web demos</title>
  6. 	<link rel="stylesheet" href="../common.css"/>
  7. 	<link rel="stylesheet" href="sorttable.css"/>
  8. 	<script defer="" src="sorttable.js"></script>
  9. </head>
  10. <body>
  11. <!-- http://knowyourmeme.com/memes/born-to-die-world-is-a-fuck-kill-em-all-1989-i-am-trash-man-410757864530-dead-cops -->
  12. 	<header title="I hope there is not actually that much dead code online…">
  13. <pre><strong>BORN TO DIE()</strong>
  14. WORLD IS A `FSCK`
  15. 鬼神 Kill Em All 1989
  16. I am trash main()
  17. 410,757,864,530 DEAD CODES</pre>
  18. 	</header>
  19. 	<nav><a rel="up" href="..">Demos Homepage</a></nav>
  20. 	<main>
  21. 		<h1>SortTable</h1>
  22. 		<h2>Sources</h2>
  23. 		<ul>
  24. 			<li><a href="sorttable.js">sorttable.js</a> (3397B, 1412B gzip’ed)</li>
  25. 			<li><a href="sorttable.css">sorttable.css</a> (468B)</li>
  26. 		</ul>
  27. 		<h2>Usage</h2>
  28. 		<ol>
  29. 			<li>Add <code>&lt;link rel="stylesheet" href="sorttable.css"/&gt;</code> and <code>&lt;script defer="" src="sorttable.js"&gt;&lt;/script&gt;</code> to the <code>head</code> of your <abbr title="HyperText Markup Language">HTML</abbr> pages</li>
  30. 			<li>Tag the <code>table</code>s that you want to be sorted with a <code>class="sortable"</code></li>
  31. 		</ol>
  32. 		<p>To override a cell(<code>td</code>) value ou can pass the well used <code>data-value</code> attribute to it. Also please note that the sorting may not be <a href="https://en.wikipedia.org/wiki/Sorting_algorithm#Stability">stable</a>.</p>
  33. 		<h2>Demo</h2>
  34. 		<table class="sortable">
  35. 			<thead>
  36. 				<tr><th>Date</th><th>Name</th><th>Value</th></tr>
  37. 			</thead>
  38. 			<tbody>
  39. 				<tr><td>1958-10-22</td><td>Anime</td><td>9000</td></tr>
  40. 				<tr><td>-8000</td><td>life</td><td data-value="0042">42</td></tr>
  41. 				<tr><td>1970-01-01</td><td>Geek</td><td>1337</td></tr>
  42. 			</tbody>
  43. 			<tfoot>
  44. 				<tr><th></th><th></th><th>Total: Too much!</th></tr>
  45. 			</tfoot>
  46. 		</table>
  47. 		<table class="sortable">
  48. 			<thead>
  49. 				<tr><th class="sorttable_sorted">File</th><th>Size</th><th>Size gzip’ed</th></tr>
  50. 			</thead>
  51. 			<tbody>
  52. 				<tr><td><a href="sorttable.min.js">sorttable.min.js</a></td><td>1491</td><td data-value="0613">613</td></tr
  53. 				<tr><td><a href="sorttable.js">sorttable.js</a></td><td>3397</td><td>1412</td></tr>
  54. 				<tr><td><a href="sorttable.css">sorttable.css</a></td><td data-value="0468">468</td><td data-value="0170">170</td></tr>
  55. 			</tbody>
  56. 		</table>
  57. 	</main>
  58. 	<footer>Copyright 2018-2020 Haelwenn (lanodan) Monnier. Distributed under the <a href="http://creativecommons.org/licenses/by/4.0/">CC-BY 4.0 License</a>. Obviously, this demoset agrees that <a href="http://simpleweb.iscute.ovh/">simple web is cute</a>.</footer>
  59. </body>
  60. <html>