index.html | searchcode

/webroot/resources/ui/js/jsTree.v.1.0rc2/_demo/index.html

https://github.com/iconifyit/SkyBlue-CMS
HTML | 262 lines | 249 code | 11 blank | 2 comment | 0 complexity | e7c70d4c7a88496f1eb3aad1683e4b13 MD5 | raw file

<!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">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>jsTree v.1.0 - full featured demo</title>

    <script type="text/javascript" src="../_lib/jquery.js"></script>

    <script type="text/javascript" src="../_lib/jquery.cookie.js"></script>

    <script type="text/javascript" src="../_lib/jquery.hotkeys.js"></script>

    <script type="text/javascript" src="../jquery.jstree.js"></script>



    <style type="text/css">

    html, body { margin:0; padding:0; }

    body, td, th, pre, code, select, option, input, textarea { font-family:verdana,arial,sans-serif; font-size:10px; }

    .demo, .demo input, .jstree-dnd-helper, #vakata-contextmenu { font-size:10px; font-family:Verdana; }

    #container { width:780px; margin:10px auto; overflow:hidden; position:relative; }

    #demo { width:auto; height:400px; overflow:auto; border:1px solid gray; }



    #text { margin-top:1px; }



    #alog { font-size:9px !important; margin:5px; border:1px solid silver; }

    </style>

</head>

<body>

<div id="container">



<div id="mmenu" style="height:30px; overflow:auto;">

<input type="button" id="add_folder" value="add folder" style="display:block; float:left;"/>

<input type="button" id="add_default" value="add file" style="display:block; float:left;"/>

<input type="button" id="rename" value="rename" style="display:block; float:left;"/>

<input type="button" id="remove" value="remove" style="display:block; float:left;"/>

<input type="button" id="cut" value="cut" style="display:block; float:left;"/>

<input type="button" id="copy" value="copy" style="display:block; float:left;"/>

<input type="button" id="paste" value="paste" style="display:block; float:left;"/>

<input type="button" id="clear_search" value="clear" style="display:block; float:right;"/>

<input type="button" id="search" value="search" style="display:block; float:right;"/>

<input type="text" id="text" value="" style="display:block; float:right;" />

</div>



<!-- the tree container (notice NOT an UL node) -->

<div id="demo" class="demo"></div>

<!-- JavaScript neccessary for the tree -->

<script type="text/javascript">

$(function () {

    // Settings up the tree - using $(selector).jstree(options);

    // All those configuration options are documented in the _docs folder

    $("#demo")

        .jstree({ 

            // the list of plugins to include

            "plugins" : [ "themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "hotkeys", "contextmenu" ],

            // Plugin configuration



            // I usually configure the plugin that handles the data first - in this case JSON as it is most common

            "json_data" : { 

                // I chose an ajax enabled tree - again - as this is most common, and maybe a bit more complex

                // All the options are the same as jQuery's except for `data` which CAN (not should) be a function

                "ajax" : {

                    // the URL to fetch the data

                    "url" : "./server.php",

                    // this function is executed in the instance's scope (this refers to the tree instance)

                    // the parameter is the node being loaded (may be -1, 0, or undefined when loading the root nodes)

                    "data" : function (n) { 

                        // the result is fed to the AJAX request `data` option

                        return { 

                            "operation" : "get_children", 

                            "id" : n.attr ? n.attr("id").replace("node_","") : 1 

                        }; 

                    }

                }

            },

            // Configuring the search plugin

            "search" : {

                // As this has been a common question - async search

                // Same as above - the `ajax` config option is actually jQuery's object (only `data` can be a function)

                "ajax" : {

                    "url" : "./server.php",

                    // You get the search string as a parameter

                    "data" : function (str) {

                        return { 

                            "operation" : "search", 

                            "search_str" : str 

                        }; 

                    }

                }

            },

            // Using types - most of the time this is an overkill

            // Still meny people use them - here is how

            "types" : {

                // I set both options to -2, as I do not need depth and children count checking

                // Those two checks may slow jstree a lot, so use only when needed

                "max_depth" : -2,

                "max_children" : -2,

                // I want only `drive` nodes to be root nodes 

                // This will prevent moving or creating any other type as a root node

                "valid_children" : [ "drive" ],

                "types" : {

                    // The default type

                    "default" : {

                        // I want this type to have no children (so only leaf nodes)

                        // In my case - those are files

                        "valid_children" : "none",

                        // If we specify an icon for the default type it WILL OVERRIDE the theme icons

                        "icon" : {

                            "image" : "./file.png"

                        }

                    },

                    // The `folder` type

                    "folder" : {

                        // can have files and other folders inside of it, but NOT `drive` nodes

                        "valid_children" : [ "default", "folder" ],

                        "icon" : {

                            "image" : "./folder.png"

                        }

                    },

                    // The `drive` nodes 

                    "drive" : {

                        // can have files and folders inside, but NOT other `drive` nodes

                        "valid_children" : [ "default", "folder" ],

                        "icon" : {

                            "image" : "./root.png"

                        },

                        // those options prevent the functions with the same name to be used on the `drive` type nodes

                        // internally the `before` event is used

                        "start_drag" : false,

                        "move_node" : false,

                        "delete_node" : false,

                        "remove" : false

                    }

                }

            },

            // For UI & core - the nodes to initially select and open will be overwritten by the cookie plugin



            // the UI plugin - it handles selecting/deselecting/hovering nodes

            "ui" : {

                // this makes the node with ID node_4 selected onload

                "initially_select" : [ "node_4" ]

            },

            // the core plugin - not many options here

            "core" : { 

                // just open those two nodes up

                // as this is an AJAX enabled tree, both will be downloaded from the server

                "initially_open" : [ "node_2" , "node_3" ] 

            }

        })

        .bind("create.jstree", function (e, data) {

            $.post(

                "./server.php", 

                { 

                    "operation" : "create_node", 

                    "id" : data.rslt.parent.attr("id").replace("node_",""), 

                    "position" : data.rslt.position,

                    "title" : data.rslt.name,

                    "type" : data.rslt.obj.attr("rel")

                }, 

                function (r) {

                    if(r.status) {

                        $(data.rslt.obj).attr("id", "node_" + r.id);

                    }

                    else {

                        $.jstree.rollback(data.rlbk);

                    }

                }

            );

        })

        .bind("remove.jstree", function (e, data) {

            data.rslt.obj.each(function () {

                $.ajax({

                    async : false,

                    type: 'POST',

                    url: "./server.php",

                    data : { 

                        "operation" : "remove_node", 

                        "id" : this.id.replace("node_","")

                    }, 

                    success : function (r) {

                        if(!r.status) {

                            data.inst.refresh();

                        }

                    }

                });

            });

        })

        .bind("rename.jstree", function (e, data) {

            $.post(

                "./server.php", 

                { 

                    "operation" : "rename_node", 

                    "id" : data.rslt.obj.attr("id").replace("node_",""),

                    "title" : data.rslt.new_name

                }, 

                function (r) {

                    if(!r.status) {

                        $.jstree.rollback(data.rlbk);

                    }

                }

            );

        })

        .bind("move_node.jstree", function (e, data) {

            data.rslt.o.each(function (i) {

                $.ajax({

                    async : false,

                    type: 'POST',

                    url: "./server.php",

                    data : { 

                        "operation" : "move_node", 

                        "id" : $(this).attr("id").replace("node_",""), 

                        "ref" : data.rslt.np.attr("id").replace("node_",""), 

                        "position" : data.rslt.cp + i,

                        "title" : data.rslt.name,

                        "copy" : data.rslt.cy ? 1 : 0

                    },

                    success : function (r) {

                        if(!r.status) {

                            $.jstree.rollback(data.rlbk);

                        }

                        else {

                            $(data.rslt.oc).attr("id", "node_" + r.id);

                            if(data.rslt.cy && $(data.rslt.oc).children("UL").length) {

                                data.inst.refresh(data.inst._get_parent(data.rslt.oc));

                            }

                        }

                        $("#analyze").click();

                    }

                });

            });

        });

});

</script>

<script type="text/javascript">

$(function () { 

    $("#mmenu input").click(function () {

        switch(this.id) {

            case "add_default":

            case "add_folder":

                $("#demo").jstree("create", null, "last", { "attr" : { "rel" : this.id.toString().replace("add_", "") } });

                break;

            case "search":

                $("#demo").jstree("search", document.getElementById("text").value);

                break;

            case "text": break;

            default:

                $("#demo").jstree(this.id);

                break;

        }

    });

});

</script>



<div style="position:absolute; right:30px; top:120px; width:220px; border:1px solid silver; min-height:160px;">

    <input type="button" style='display:block; width:170px; height:24px; margin:5px auto;' value="reconstruct" onclick="$.get('./server.php?reconstruct', function () { $('#demo').jstree('refresh',-1); });" />

    <input type="button" style='display:block; width:170px; height:24px; margin:5px auto;' id="analyze" value="analyze" onclick="$('#alog').load('./server.php?analyze');" />

    <input type="button" style='display:block; width:170px; height:24px; margin:5px auto;' value="refresh" onclick="$('#demo').jstree('refresh',-1);" />

    <div id='alog'></div>

</div>



<p style="margin:1em 2em 3em 2em; text-align:center; ">If you like the project - consider <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=paypal@vakata.com&currency_code=USD&amount=&return=http://jstree.com/donation&item_name=Buy+me+a+coffee+for+jsTree">supporting jstree</a>.</p>



</div>



</body>

</html>