DOMHelper/index.html at master · cefolger/DOMHelper · GitHub

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
  <script src="lib/DOMHelper.js"></script>
  <script src="lib/extensions.js"></script>
  <script src="lib/DOMHelper.js"></script>

  <script>
    $(document).ready(function() {
        var $basic = $("*[data-example='basic']");
        var $adhoctable = $("*[data-example='adhoctable']");

        DOMHelper.cachedLoad($basic, 'examples/basic.html', function() {
            var ob = {
                'field1': 'this is field 1',
                'field2': 'this is field 2'
            };

            DOMHelper.contextParse($basic, ob, [
                'field1',
                'field2'
            ]);
        });

        DOMHelper.cachedLoad($adhoctable, 'examples/adhoctable.html', function() {
            var ob = {
                'firstname': 'Johnny',
                'lastname': 'Thunders',
                'color': 'green'
            };

            DOMHelper.contextParse($adhoctable, ob, [
                'firstname',
                'lastname',
                'color'
            ], function() {
                $("td:last", $adhoctable).css('background-color', ob.color);
            });
        });
    });
  </script>
</head>
<body>

<header><h1>DOM Helper</h1></header>

<article>
    <section data-example="basic"></section>
    <section data-example="adhoctable"></section>

</article>

</body>
</html>