examples/Alternating.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=Edge" >
<meta charset="utf-8">
<script src="../lib/dable.min.js"></script>
<!--Include the Bootstrap CDN-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!--Include the JQueryUI CDN-->
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
</head>
<body>
<div id="AlternatingDable">
<table>
<thead>
<tr>
<th>Odd</th>
<th>Even</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var dable = new Dable("AlternatingDable");
setInterval(function() {
if (dable.style == "jqueryui") {
dable.style = "bootstrap";
}
else if (dable.style == "bootstrap") {
dable.style = "clear";
}
else if (dable.style == "clear") {
dable.style = "";
}
else {
dable.style = "jqueryui";
}
dable.UpdateStyle(document.getElementById("AlternatingDable"));
}, 3000);
</script>
</body>
</html>