left click action

38 views
Skip to first unread message

Murillo Bortot

unread,
Sep 9, 2010, 2:35:49 PM9/9/10
to jsTree
Please, how to set a normal click action here?


<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" : "../../include/treeview/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_","") : -3
};
}
}
},
// 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" : "../../include/treeview/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" : "../../include/treeview/themes/file.png"
}
},
// The "public" type
"public" : {
// can have files and other folders inside of it, but NOT
`drive` nodes
"valid_children" : [ "default", "folder" ],
"icon" : {
"image" : "../../include/treeview/themes/file.png"
}
},
// The "private" type
"private" : {
// can have files and other folders inside of it, but NOT
`drive` nodes
"valid_children" : [ "default", "folder" ],
"icon" : {
"image" : "../../include/treeview/themes/private.gif"
}
},
// The "registered" type
"registered" : {
// can have files and other folders inside of it, but NOT
`drive` nodes
"valid_children" : [ "default", "folder" ],
"icon" : {
"image" : "../../include/treeview/themes/registered.gif"
}
},
// The "hidden" type
"hidden" : {
// can have files and other folders inside of it, but NOT
`drive` nodes
"valid_children" : [ "default", "folder" ],
"icon" : {
"image" : "../../include/treeview/themes/hidden.png"
}
},

// The `drive` nodes
"drive" : {
// can have files and folders inside, but NOT other `drive`
nodes
"valid_children" : [ "default", "folder" ],
"icon" : {
"image" : "../../include/treeview/themes/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,

//Funcoes Murillo - nao permite quando é portal -> DRIVE
"config_page" :false,
"copy_page" :false,
"page_down" :false,
"page_up" :false,
"delete_page" :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" ]
}
})
});
</script>
<script type="text/javascript">
$(function () {
$("#mmenu input").click(function () {
switch(this.id) {
case "search":
$("#demo").jstree("search",
document.getElementById("text").value);
break;
case "text": break;
default:
$("#demo").jstree(this.id);
break;
}
});
});
</script>

vakata

unread,
Sep 17, 2010, 10:01:54 AM9/17/10
to jsTree
Do you need the UI plugin - if you do simply do this:

$("#demo").bind("select_node.jstree", function (e, data) {
data.rslt.obj // the node that got selected
// do stuff!
})

If you do not need selection and simply need the links to work -
removing the UI plugin will start following the HREF attributes on
links, or you could do this (if not using the UI plugin):

$("#demo").delegate("a", "click", function (e) {
e.preventDefault();
this.blur();
// do stuff!
});

Kindest regards,
Ivan

Reply all
Reply to author
Forward
0 new messages