fastFrag/complex_example.html at master · gtzilla/fastFrag · 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" manifest="cache-manifest">


<!--
    http://unlicense.org/
    author: gregory tomlinson
-->

<!-- MIME TYPE Guidlines and references: http://hixie.ch/advocacy/xhtml -->
    <head>
        <title>fastFrag Sample 'Complex'</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="keywords" content="" />
        <meta name="description" content="display an ordered list loaded from an external file" />

    </head>
    <body>
        <div id="container">

            <div id="top">

            </div> <!-- end #top -->

            <div id="middle">

            </div> <!-- END #middle -->

            <div id="bottom">

            </div> <!-- end #bottom -->

        </div> <!-- end #container -->

            <script type="text/javascript" src="tests/js/quotes.js"></script>
            <script type="text/javascript" src="js/fastFrag.js"></script>
            <script type="text/javascript" charset="utf-8">
                var results, structure, structure_items = [],
                    // via external file, js/quotes.js
                    quotes = simpson_quotes;

                    // add for comparison
                function escaper( string ) {
                    return (string && string.replace(/&/mgi, "&amp;").replace(/"/mgi, "&quot;").replace(/'/mgi, "&#39;")
                                 .replace(/>/mgi, "&gt;").replace(/</mgi, "&lt;") ) || "";
                }

                var quote, pos, name, text;
                for( var i=0; i<quotes.length; i++) {
                    quote = quotes[i];
                    pos = quote.indexOf(":"); name = quote.substring(0,pos); text = quote.substring(pos) || "";
                    structure_items.push({
                        type : "li",
                        content : [{
                            type : "b",
                            content : name
                        }, {
                            'text' : text
                        }]
                    });
                }

                structure = [{
                    type : "h1",
                    content : "Hello fastFrag"
                },{
                    type :"p",
                    content : "Welcome to the more complex example of fastFrag"
                },{
                    css : "contentsContainer",
                    content : [{
                        type : "h3",
                        content : "A List of Simpsons quotes"
                    },{
                        type : "ul",
                        content : structure_items
                    },{
                        content : {
                            type : "a",
                            css : "simpsonslink",
                            content : "The Complete List",
                            attr : {
                                href : "http://blogzarro.com/2007/07/100-greatest-simpsons-quotes/",
                                target : 'new'
                            }
                        }
                    }]
                },{
                    id : "footer",
                    content : [{
                        type : "form",
                        content : [{
                            type : "input",
                            id : "value_1",
                            attr : {
                                type : "checkbox",
                                name : "value_1",
                                value : "yes",
                                checked : true

                            }
                        },{
                            type : "label",
                            content : "Fast?",
                            attr : {
                                'for' : 'value_1'
                            }
                        }]
                    }]
                }]

                results = fastFrag.create(structure);
                // in chrome or safari, middle.appendChild() works, not in FF
                var middle = document.querySelector('#middle')
                middle.appendChild(results);


            </script>

    </body>
</html>