tablesorter/docs/themes.html

254 lines
8.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.4 - Themes</title>
<!-- demo css -->
<style>
.minitable {float:left;min-width:190px; min-height: 280px; margin:5px;}
.minitable table {width:175px;margin:10px auto;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.minitable table th {font-size:11px;}
.minitable table td {font-size:11px;padding:4px !important;text-align:center;}
.minitable h3 {text-align:center;text-transform:capitalize;}
</style>
<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>
<!-- Tablesorter themes -->
<!-- jquery ui -->
<link href="css/jquery-ui.min.css" rel="stylesheet">
<link href="../css/theme.jui.css" rel="stylesheet">
<!-- bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="../css/theme.bootstrap.css" rel="stylesheet">
<!-- more themes -->
<link href="../css/theme.black-ice.css" rel="stylesheet">
<link href="../css/theme.blue.css" rel="stylesheet">
<link href="../css/theme.dark.css" rel="stylesheet">
<link href="../css/theme.default.css" rel="stylesheet">
<link href="../css/theme.dropbox.css" rel="stylesheet">
<link href="../css/theme.green.css" rel="stylesheet">
<link href="../css/theme.grey.css" rel="stylesheet">
<link href="../css/theme.ice.css" rel="stylesheet">
<link href="../css/theme.metro-dark.css" rel="stylesheet">
<!-- Tablesorter: required -->
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<script>
$(function() {
$.extend($.tablesorter.defaults, {
widthFixed: true,
widgets : ['zebra','columns'],
sortList : [ [0,0],[1,0],[2,0] ]
});
$('.demo').tablesorter();
// grey & dropbox themes need the {icon} for header icons
$('.tablesorter-dropbox,.tablesorter-grey').tablesorter({
headerTemplate: '{content}{icon}' // dropbox theme doesn't like a space between the content & icon
});
$('.tablesorter-bootstrap').tablesorter({
theme : 'bootstrap',
headerTemplate: '{content} {icon}',
widgets : ['zebra','columns', 'uitheme']
});
$('.tablesorter-jui').tablesorter({
theme : 'jui',
headerTemplate: '{content} {icon}',
widgets : ['zebra','columns', 'uitheme']
});
});
</script>
</head>
<body>
<div id="main">
<div class="minitable">
<h3>blackice</h3>
<table class="demo tablesorter-blackice">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>blue</h3>
<table class="demo tablesorter-blue">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>dark</h3>
<table class="demo tablesorter-dark">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>default</h3>
<table class="demo tablesorter-default">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>green</h3>
<table class="demo tablesorter-green">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>grey</h3>
<table class="tablesorter-grey">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>ice</h3>
<table class="demo tablesorter-ice">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>Bootstrap</h3>
<table class="tablesorter-bootstrap">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>jQuery UI</h3>
<table class="tablesorter-jui">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>dropbox</h3>
<table class="tablesorter-dropbox">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>Metro Dark</h3>
<table class="tablesorter-metro-dark demo">
<thead>
<tr class="dark-row"><th class="sorter-false" colspan="4">Title</th></tr>
<tr><th>A</th><th>B</th><th>C</th><th>D</th></tr>
</thead>
<tfoot>
<tr><th>A</th><th>B</th><th>C</th><th>D</th></tr>
<tr class="dark-row"><th colspan="4">&nbsp;</th></tr>
</tfoot>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>