Estructuras de árbol con Mootools

estructura árbol MootoolsEn Kabytes casi siempre hablamos de plugins desarrollados con jQuery, honestamente este framework es mi preferido, no obstante conozco algunas personas que utilizan Mootools, otro framework Javascript con características muy interesantes y que también cuenta con un importante abanico de plugins disponibles.

En esta oportunidad el plugin Mootools que llamo mi atención fue Mif.Tree, una pequeña biblioteca para generar estructuras de árbol muy fácilmente y con apenas unas lineas de código.

Actualmente el plugin se encuentra en su versión 1.2.6.4 luego de pasar por más de 10 actualizaciones distintas, esto habla un poco de lo muy mejorado y pulido de este complemento.

Ejemplo de uso:

tree = new Mif.Tree({
    container: $('tree_container'),// tree container
    types: {// node types
        folder: {
            openIcon: 'mif-tree-open-icon',//css class open icon
            closeIcon: 'mif-tree-close-icon'// css class close icon
        }
    },
    dfltType: 'folder',//default node type
    height: 18//node height
}); 

var json = [
    {
        "property": {
            "name": "root"
        },
        "children": [
            {
                "property": {
                    "name": "node1"
                }
            },
            {
                "property": {
                    "name": "node2"
                },
                "state": {
                    "open": true
                },
                "children":[
                    {
                        "property": {
                            "name": "node2.1"
                        }
                    },
                    {
                        "property": {
                            "name": "node2.2"
                        }
                    }
                ]
            },
            {
                "property": {
                    "name": "node4"
                }
            },
            {
                "property": {
                    "name": "node3"
                }
            }
        ]
    }
];
// load tree from json.
tree.load({
    json: json
});

Si lo desean pueden ver una demostración online de este fantástico plugin.

Web: Mif.Tree