Subversion-Projekte lars-tiefland.cienc

Revision

Blame | Letzte Änderung | Log anzeigen | RSS feed 

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>jstree basic demos</title>
        <style>
        html { margin:0; padding:0; font-size:62.5%; }
        body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; }
        h1 { font-size:1.8em; }
        .demo { overflow:auto; border:1px solid silver; min-height:100px; }
        </style>
        <link rel="stylesheet" href="./../../dist/themes/default/style.min.css" />
</head>
<body>
        <h1>HTML demo</h1>
        <div id="html" class="demo">
                <ul>
                        <li data-jstree='{ "opened" : true }'>Root node
                                <ul>
                                        <li data-jstree='{ "selected" : true }'>Child node 1</li>
                                        <li>Child node 2</li>
                                </ul>
                        </li>
                </ul>
        </div>

        <h1>Inline data demo</h1>
        <div id="data" class="demo"></div>

        <h1>Data format demo</h1>
        <div id="frmt" class="demo"></div>

        <h1>AJAX demo</h1>
        <div id="ajax" class="demo"></div>

        <h1>Lazy loading demo</h1>
        <div id="lazy" class="demo"></div>

        <h1>Callback function data demo</h1>
        <div id="clbk" class="demo"></div>

        <h1>Interaction and events demo</h1>
        <button id="evts_button">select node with id 1</button> <em>either click the button or a node in the tree</em>
        <div id="evts" class="demo"></div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="./../../dist/jstree.min.js"></script>
        
        <script>
        // html demo
        $('#html').jstree();

        // inline data demo
        $('#data').jstree({
                'core' : {
                        'data' : [
                                { "text" : "Root node", "children" : [
                                                { "text" : "Child node 1" },
                                                { "text" : "Child node 2" }
                                ]}
                        ]
                }
        });

        // data format demo
        $('#frmt').jstree({
                'core' : {
                        'data' : [
                                {
                                        "text" : "Root node",
                                        "state" : { "opened" : true },
                                        "children" : [
                                                {
                                                        "text" : "Child node 1",
                                                        "state" : { "selected" : true },
                                                        "icon" : "jstree-file"
                                                },
                                                { "text" : "Child node 2", "state" : { "disabled" : true } }
                                        ]
                                }
                        ]
                }
        });

        // ajax demo
        $('#ajax').jstree({
                'core' : {
                        'data' : {
                                "url" : "./root.json",
                                "dataType" : "json" // needed only if you do not supply JSON headers
                        }
                }
        });

        // lazy demo
        $('#lazy').jstree({
                'core' : {
                        'data' : {
                                "url" : "//www.jstree.com/fiddle/?lazy",
                                "data" : function (node) {
                                        return { "id" : node.id };
                                }
                        }
                }
        });

        // data from callback
        $('#clbk').jstree({
                'core' : {
                        'data' : function (node, cb) {
                                if(node.id === "#") {
                                        cb([{"text" : "Root", "id" : "1", "children" : true}]);
                                }
                                else {
                                        cb(["Child"]);
                                }
                        }
                }
        });

        // interaction and events
        $('#evts_button').on("click", function () {
                var instance = $('#evts').jstree(true);
                instance.deselect_all();
                instance.select_node('1');
        });
        $('#evts')
                .on("changed.jstree", function (e, data) {
                        if(data.selected.length) {
                                alert('The selected node is: ' + data.instance.get_node(data.selected[0]).text);
                        }
                })
                .jstree({
                        'core' : {
                                'multiple' : false,
                                'data' : [
                                        { "text" : "Root node", "children" : [
                                                        { "text" : "Child node 1", "id" : 1 },
                                                        { "text" : "Child node 2" }
                                        ]}
                                ]
                        }
                });
        </script>
</body>
</html>