-
Notifications
You must be signed in to change notification settings - Fork 99
/
demo.htm
60 lines (50 loc) · 2.09 KB
/
demo.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!doctype html>
<html lang="en-us">
<head>
<title>jquip - jQuery-in-parts</title>
<script type="text/javascript" src="src/jquip.js"></script>
<script type="text/javascript" src="src/jquip.events.js"></script>
<script type="text/javascript" src="src/jquip.docready.js"></script>
<script type="text/javascript" src="src/jquip.css.js"></script>
<script type="text/javascript" src="src/jquip.ajax.js"></script>
<script type="text/javascript" src="src/jquip.custom.js"></script>
<script type="text/javascript">
$(function() {
$(document.body)
.css({'font-family':'Arial'})
.append("<p>This message added on document ready</p>");
$(".attrs button").click(function () {
var $dl = $(this).next();
$.each($(this).parent().data(), function (name, val) {
$dl.append("<dt>" + name + "</dt>").append("<dd>" + val + "</dd>");
});
});
var compiledTpl = $._template($("#tpl").html()), $win = $(window);
var updateTpl = function(){
var html = compiledTpl({width: $win.width(), height: $win.height()});
$("#winsize").html(html);
};
$win.resize(updateTpl);
function rgb() {
return Math.floor(Math.random() * 255);
}
$("body > button").click(function(){
$(document.body).css({background:"rgb(" + rgb() + "," + rgb() + "," + rgb() + ")"});
});
updateTpl();
});
</script>
</head>
<body>
<script id="tpl" type="text/tpl">
<p>The Size of this window is <%= width %>x<%= height %> (uses $.template - resize to update).</p>
</script>
<h2>Simple Demo</h2>
<div id="winsize"></div>
<button>Change Background</button>
<div class="attrs" data-one="uno" data-two="due" data-three="tre">
<button>Print Data Attributes</button>
<dl></dl>
</div>
</body>
</html>