You are browsing the old site - check the new version out

back to the documentation homepage

jsTree v.1.0

contextmenu plugin

Description

The contextmenu plugin enables a contextual menu to be shown, when the user right-clicks a node (or when triggered programatically by the developer).

Configuration

select_node

Boolean. Default is false.

Whether to select the right clicked node when showing the context menu. If this is set to true and the node is not selected all currently selected nodes will be deselected.

show_at_node

Boolean. Default is true.

Whether to show the context menu just below the node, or at the clicked point exactly.

items

Expects an object or a function, which should return an object. If a function is used it fired in the tree's context and receives one argument - the node that was right clicked. The object format is:

{
// Some key
"rename" : {
	// The item label
	"label"				: "Rename",
	// The function to execute upon a click
	"action"			: function (obj) { this.rename(obj); },
	// All below are optional 
	"_disabled"			: true,		// clicking the item won't do a thing
	"_class"			: "class",	// class is applied to the item LI node
	"separator_before"	: false,	// Insert a separator before the item
	"separator_after"	: true,		// Insert a separator after the item
	// false or string - if does not contain `/` - used as classname
	"icon"				: false,
	"submenu"			: { 
		/* Collection of objects (the same structure) */
	}
}
/* MORE ENTRIES ... */
}

Demos

Using the contextmenu

API

.show_contextmenu ( node , x, y )

Shows the contextmenu next to a node. Triggered automatically when right-clicking a node.

  • mixed node

    This can be a DOM node, jQuery node or selector pointing to an element within the tree.

  • number x

    The X-coordinate to show the menu at - may be overwritten by show_at_node. If you omit this the menu is shown aligned with the left of the node.

  • number y

    The Y-coordinate to show the menu at - may be overwritten by show_at_node. If you omit this the menu is shown just below the node.