library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-11-15 23:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
57d892ca72
tablesorter/docs/themes.html

218 lines
6.9 KiB
HTML
Raw Normal View History

updated docs
2012-09-27 19:57:19 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.4 - Themes</title>
<!-- demo css -->
<style>
.minitable {float:left;width:190px;height:260px;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 -->
uitheme wraps headers in a div for Firefox
2012-09-29 13:42:58 +00:00
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.js"></script>
updated docs
2012-09-27 19:57:19 +00:00
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
<!-- Tablesorter themes -->
<!-- jquery ui -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.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">
<!-- Tablesorter: required -->
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<script>
$(function() {
$('.demo').tablesorter({
widthFixed : true,
widgets : ['zebra','columns'],
sortList : [ [0,0],[1,0],[2,0] ]
});
$('.tablesorter-bootstrap').tablesorter({
widthFixed : true,
widgets : ['zebra','columns', 'uitheme'],
widgetOptions : {
uitheme : 'bootstrap'
},
sortList : [ [0,0],[1,0],[2,0] ]
});
$('.tablesorter-jui').tablesorter({
widthFixed : true,
widgets : ['zebra','columns', 'uitheme'],
widgetOptions : {
uitheme : 'jui'
},
sortList : [ [0,0],[1,0],[2,0] ]
});
});
</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>
<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>
<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>
<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>
<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>
<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="demo tablesorter-dropbox">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<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>
<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="demo tablesorter-grey">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<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>
<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>
<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>
Reference in New Issue Copy Permalink