Jstree Plug-in Introduction (III)

Ui-pluginjstree UI plugin: A plugin for handling selection, uncheck, and mouse hover tree options. First, the properties include: 1, Select_limit: Specify that you can select several nodes at a time, the default is-1, indicating unrestricted selection. 2, Select_multiple_modifier: processing when holding down a key, with the mouse click on the other nodes can be selected, (similar to the file directory in the CTRL + mouse to select other directories or files); The default key is "Ctrl", you can use "Shift", " Alt "and other substitutions. 3, Select_range_modifier: First select a node, and then press and hold a key, and then click on another node with the mouse, so that the two nodes are selected and contain the two nodes, similar to the selected file system in Windows "Shift", the default option is "Shift", which can be replaced by "Ctrl", "Alt" and so on. Note: Use this option to select the sibling node that must be selected. 4. Select_parent_close: Whether the parent node is selected when the parent node of the selected node is closed. If "Select_parent" is turned off, the parent node is selected when the parent node is closed, and if "false" and "deselect" the parent node is not selected when the parent node is closed. The default is "Select_parent". 5, Select_parent_open: When the program runs the process of selecting a node and the node is all closed, this time to automatically open the closed parent node. The default is "true" 6, Select_prev_on_delete: The first sibling node is selected by default when a node is deleted, and if there is no previous sibling node, the parent node is selected. The default is "true" 7, Disable_selecting_children: Default is "false", if set to "true", you will not be able to select child nodes of this node. (To be verified) 8, Initially_select: The node that is selected by default when the tree finishes loading, it requires the ID value of the node to identify. Post an official code [HTML]View PlainCopy

2. <div class="Panel">
10. <h3>using the UI plugin</h3>
14. <div id="demo1" class="Demo">
16. <ul>
18. <li id="Phtml_1">
20. <a href="#">root node 1</a>
22. <ul>
24. <li id="phtml_2">
26. <a href="#">child node 1</a>
28. </li>
30. <li id="Phtml_3">
32. <a href="#">child Node 2</a>
34. </li>
36. </ul>
38. </li>
40. <li id="Phtml_4">
42. <a href="#">root Node 2</a>
44. </li>
46. </ul>
50. </div>
54. <script type="Text/javascript" class="source">
58. $ (function () {
62. $ ("#demo1"). Jstree ({
66. "UI": {
68. "Select_limit": 2,
70. "Select_multiple_modifier": "Ctrl",
72. "Selected_parent_close": "Select_parent",
74. "Initially_select": ["phtml_2"]
76. },
80. "Core": {"Initially_open": ["Phtml_1"]},
84. "Plugins": ["Themes", "Html_data", "UI"]
88. });
92. });
96. </Script>
104. </div>

The functions include: 1,. _get_node (node, allow_multiple): The Get_node function that covers the core component. If node is null or undefined, and allow_multiple is true, all nodes that are now selected are returned, and if node is null or undefined, and allow_multiple is not true, the last selected node is returned. Node: Mixed type, you can node,jquery node for the DOM or point to the selection point of the element in the book. Allow_multiple: Whether to return all nodes or the last selected node when node is null. 2. save_selected (): Saves the state that the tree node is currently selected. (The implementation is saved in a variable and therefore does not exist after the page is refreshed). This function is associated with a cookie plugin plugin. Primarily used internally, event-triggered functions. 3. Reselect (): Variables saved from the save_selected () function restore the state of the tree, primarily used internally, event-triggered functions. 4. Refresh (node): Overrides the Refresh function in the core component.before enabling refresh Save selection state and post recovery. 5. Hover_node: Set node Hoverd, Event Trigger function. Node:mixed, a mixed type, can be a DOM node,jquery node or point to an element in a book's selection point. 6, Dehover_node (): Delete the current hovered node, event firing function. 7. Select_node (node, check, event): node:mixed, mixed type, can node,jquery node for DOM or point to the selection point of the element in the book. Check:bool, whether to detect the rule (detect "select_limit" option, etc.) and do the appropriate action or just select the selected node. Event:event, used internally, triggers this action when a node is clicked. 8. Deslect_node (node),. Toggle_select (node): These two functions control the selected state of a node, and Deselect_node fires an event. 9. Get_selected (context): Returns all nodes that were selected. 10. Deselect_all (context): All nodes in by-election. 11, Is_select (node): Returns whether a node is selected. The code of this article see http://download.csdn.net/detail/yizhizouxiaqu/4268775 ui_plugin.html Original English address is: Http://www.jstree.com/documentation/ui

Jstree Plug-in Introduction (III)