jsonHTML/syntacticSugarExample.html at master · trillobite/jsonHTML · 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
<!--
    This example produces similar html as what is in example.html, but quite possibly could be more difficult
    to understand. One thing to notice here, is that this code is utilizing the more advanced features of jsonHTML,
    and is written in a more functional programming way. Notice how in order to manipulate the json objects in
    a more functional programming style, you have to call $jConstruct, as it will construct an object for you to
    easily manipulate with fascinating, and epic techniques. Of course, there is function chaining!

    To some, this style may be more practical as it may provide a better learning curve. Utilizing jsonHTML in this
    way, does seem to open the doors to creativity and code reuse for future projects.

    Have Fun!
-->

<html>
    <head>
        <title>jsonHTML EXAMPLE!</title>
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script> <!--MAKE SURE TO INCLUDE JQUERY!!-->
        <script type='text/javascript' src='jsonHTML.js'></script>
        <script>
            var centerBorderHalf = { //css to reuse in each object, or you can put this in a .css file!
                'width': '50%',
                'border': '1px solid black',
                'border-radius': '15px',
                'text-align': 'center',
                'margin': '0 auto',
            };

            //this is your plain ordinary <div>, with some css added to it.
            var child0 = $jConstruct('div', {
                text: 'Hello World From Child 0',
            }).css(centerBorderHalf);

            //this object has events added to it, so when you click on it, it transforms into a textbox, and back again with the changes implemented.
            var child1 = $jConstruct('div', {
                text: 'Click Me!'
            }).css(centerBorderHalf).event('click', function() { //on click event.
                if(child1.type == 'div') {
                    child1.type = 'textbox';
                }
                child1.refresh(); //wow, very much yes simple!
                $('#'+child1.id).focus(); //focus on the textbox so the user can type into it.
            }).event('blur', function() { //on blur event.
                if(child1.type == 'textbox') {
                    child1.type = 'div';
                    child1.text = $('#'+child1.id)[0].value; //get the data that changed.
                }
                child1.refresh(); //Refreshes the object on the DOM containing the current changes.
            });

            //this is basically the main object. Notice how I have it contained in a function so that I can
            //pass a parameter to manipulate it.
            var jsonHTMLObj = function(data) {
                return $jConstruct('div', {
                    id: 'thisIsDivStuff' + data.indx,
                    class: 'divStuff', //yea, you can set a class and add css in an external style sheet!
                    text: 'HELLO WORLD!',
                }).textProperties('heading', '2').css(centerBorderHalf).addChild(child0).addChild(child1); //add text styling, css and a child object with chaining!
            };

            //The DOM needs to be ready, before I can do anything... we must wait...
            $(document).ready(function () {
                jsonHTMLObj({indx: 1}).appendTo('body'); //now just append it to any div!
            });

        </script>
    </head>
        <body></body>
</html>

<!--
    View full license in LICENSE.md
             )
c            (
o        )   )
p        (           v1.3.1
y    .---------------------.
r    |        _____        |___
i    |     .'`_,-._`'.      __ \
g    |    /  ( [ ] )  \    |  ||
h    |   /.-""`( )`""-.\   |  ||
t    |  ' <'```(.)```'> '  | _||
     |    <'```(.)```'>    |/ _/
2    |     <'``(.)``'>      ./
0    |      <``\_/``>      |
1    |       `'---'`       |
6    \github.com/trillobite/
       \_________________/      Keep it black, keep it free.
-->