-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (76 loc) · 2.41 KB
/
index.html
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="domnomnom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('body').domnomnom({
"h1": "DOMNOMNOM",
"ul": {
"li.slot": ["one", "two", "three"]
},
"#P1": {
"tr": [
{".name": "Bob", ".age": "50"},
{".name": "Sarah", ".age": "25"},
{".name": "Jane", ".age": "30"},
{".name": "Ted", ".age": "15"}
]
},
"#P2": {
"tr": [
{".name": "Jack", ".age": "40"},
{".name": "Jill", ".age": "23"}
]
},
"#text-input/value": "This was a dynamic attribute",
"#checkbox-input/": {
checked: true
}
});
$('body').domnomnom({
'ul': {
'li.slot': ["four"]
}
});
$('body').domnomnom('h2', 'Testing');
$('button[name=add]').click(function(){
$('#P2').domnomnom({
'tr.slot': [{
'.name': $('[name=name]').val(),
'.age': $('[name=age]').val()
}]
});
});
});
</script>
<style>
[data-clone] { display: none; }
</style>
</head>
<body>
<h1></h1>
<h2></h2>
<ul>
<li class=slot data-clone=":before"></li>
</ul>
<table id=P1 class=people>
<tr class=slot data-clone=":after" data-rename-name=" .slot-1">
<td class=slot-1></td>
<td class=age></td>
</tr>
</table>
<label for=name>
name:
<input name=name />
</label>
<label for=age>
age:
<input name=age />
</label>
<button name=add>add</button>
<table id=P2 data-template=".people"></table>
<input id="text-input" data-rename-data="/value"></input>
<input id="checkbox-input" type=checkbox></input>
</body>
</html>