ref: master
plugins/display_content/public/javascripts/jstree-v.pre1.0/_docs/ui.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 |
<!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 - UI documentation</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> <link type="text/css" rel="stylesheet" href="syntax/!style.css"/> <link type="text/css" rel="stylesheet" href="!style.css"/> <script type="text/javascript" src="syntax/!script.js"></script> </head> <body> <div id="container"> <h1 id="dhead">jsTree v.1.0</h1> <h1>ui plugin</h1> <h2>Description</h2> <div id="description"> <p>The <code>UI</code> plugin handles selecting, deselecting and hovering tree items.</p> </div> <h2 id="configuration">Configuration</h2> <div class="panel configuration"> <h3>select_limit</h3> <p class="meta">A number. Default is <code>-1</code>.</p> <p>Defines how many nodes can be selected at a given time (<code>-1</code> means unlimited).</p> <h3>select_multiple_modifier</h3> <p class="meta">A string. Default is <code>"ctrl"</code>.</p> <p>The special key used to make a click add to the selection and not replace it (<code>"ctrl"</code>, <code>"shift"</code>, <code>"alt"</code>, <code>"meta"</code>).<br />You can also set this to <code>"on"</code> making every click add to the selection.</p> <h3>select_range_modifier</h3> <p class="meta">A string. Default is <code>"shift"</code>.</p> <p>The special key used to make a click expand a range from the last selected item (<code>"ctrl"</code>, <code>"shift"</code>, <code>"alt"</code>, <code>"meta"</code>).<br />Note that the last clicked elemtn should be a sibling of the currently clicked element so that a range will be created (same as common file explorers).</p> <h3>selected_parent_close</h3> <p class="meta">A string (or <code>false</code>). Default is <code>"select_parent"</code>.</p> <p>What action to take when a selected node's parent is closed (making the selected node invisible). Possible values are <code>false</code> - do nothing, <code>"select_parent"</code> - select the closed node's parent and <code>"deselect"</code> - deselect the node.</p> <h3>selected_parent_open</h3> <p class="meta">A Boolean. Default is <code>true</code>.</p> <p>When set to <code>true</code> when programatically selecting a node in the tree all of its closed parents are opened automatically.</p> <h3>select_prev_on_delete</h3> <p class="meta">A boolean. Default is <code>true</code>.</p> <p>If set to <code>true</code> when a selected node is deleted, its previous sibling (or parent) is selected.</p> <h3>disable_selecting_children</h3> <p class="meta">A boolean. Default is <code>false</code>.</p> <p>If set to <code>true</code> you will not be able to select children of already selected nodes.</p> <h3>initially_select</h3> <p class="meta">An array. Default is <code>[]</code>.</p> <p>Defines which nodes are to be automatically selected when the tree finishes loading - a list of IDs is expected.</p> </div> <h2 id="demos">Demos</h2> <div class="panel"> <h3>Using the UI plugin</h3> <div id="demo1" class="demo"> <ul> <li id="phtml_1"> <a href="#">Root node 1</a> <ul> <li id="phtml_2"> <a href="#">Child node 1</a> </li> <li id="phtml_3"> <a href="#">Child node 2</a> </li> </ul> </li> <li id="phtml_4"> <a href="#">Root node 2</a> </li> </ul> </div> <script type="text/javascript" class="source"> $(function () { $("#demo1").jstree({ "ui" : { "select_limit" : 2, "select_multiple_modifier" : "alt", "selected_parent_close" : "select_parent", "initially_select" : [ "phtml_2" ] }, "core" : { "initially_open" : [ "phtml_1" ] }, "plugins" : [ "themes", "html_data", "ui" ] }); }); </script> </div> <h2 id="api">API</h2> <div class="panel api"> <h3 id="_get_node">._get_node ( node , allow_multiple )</h3> <p>Overrides the function from the <a href="core.html#_get_node">core</a> module.<br />if <code>node</code> is <code>undefined</code> or <code>null</code> and <code>allow_multiple</code> is <code>true</code> all the currently selected nodes are returned<br />if <code>node</code> is <code>undefined</code> or <code>null</code> and <code>allow_multiple</code> is NOT <code>true</code> only the last selected node is returned.</p> <ul class="arguments"> <li> <code class="tp">mixed</code> <strong>node</strong> <p>This can be a DOM node, jQuery node or selector pointing to an element within the tree.</p> </li> <li> <code class="tp">boolean</code> <strong>allow_multiple</strong> <p>Whether to return all selected nodes or only the last selected one if <code>node</code> is <code>null</code>.</p> </li> </ul> <h3 id="save_selected">.save_selected ( )</h3> <p>Saves away the current selection state of the tree (saves it in a variable, so do not expect a restore after a refresh - for that functionality refer to the <a href="cookies.html">cookies plugin</a>. Used mostly internally. Triggers an event.</p> <h3 id="reselect">.reselect ( )</h3> <p>Restores the state of the tree using the variable saved in the above function. Used mostly internally. Triggers an event.</p> <h3 id="refresh">.refresh ( node )</h3> <p>Overrides the function form the <a href="core.html#refresh">core</a> module.<br />Enables saving the selection state before the refresh and restoring it afterwards.</p> <h3 id="hover_node">.hover_node ( node )</h3> <p>Sets the specified node as hovered. Triggers an event.</p> <ul class="arguments"> <li> <code class="tp">mixed</code> <strong>node</strong> <p>This can be a DOM node, jQuery node or selector pointing to an element within the tree.</p> </li> </ul> <h3 id="dehover_node">.dehover_node ( )</h3> <p>Removes the hover state from the currently hovered node (if there is one). Triggers an event.</p> <h3 id="select_node">.select_node ( node , check , event )</h3> <ul class="arguments"> <li> <code class="tp">mixed</code> <strong>node</strong> <p>This can be a DOM node, jQuery node or selector pointing to an element within the tree.</p> </li> <li> <code class="tp">bool</code> <strong>check</strong> <p>Whether to check the specified rules and do appropriate actions (check <code>select_limit</code>, deselect other nodes respectively, etc) or to just force selection of the node regardless of <code>select_limit</code>.</p> </li> <li> <code class="tp">event</code> <strong>event</strong> <p>Used internally - when a click on a node caused this function to be executed.</p> </li> </ul> <div style="height:1px; visibility:hidden; overflow:hidden;"><span id="toggle_select"> </span></div> <h3 id="deselect_node">.deselect_node ( node ), .toggle_select ( node )</h3> <p>There functions control the selected state on a node. <code>deselect_node</code> triggers an event.</p> <ul class="arguments"> <li> <code class="tp">mixed</code> <strong>node</strong> <p>This can be a DOM node, jQuery node or selector pointing to an element within the tree.</p> </li> </ul> <h3 id="deselect_all">.deselect_all ( context )</h3> <p>Deselects all selected nodes. If context is set - only the selected nodes within that context are deselected. Triggers an event.</p> <ul class="arguments"> <li> <code class="tp">mixed</code> <strong>context</strong> <p>This can be a DOM node, jQuery node or selector pointing to an element within the tree.</p> </li> </ul> <h3 id="get_selected">.get_selected ( context )</h3> <p>Returns all selected nodes. If context is set - only the selected nodes within that context are returned.</p> <ul class="arguments"> <li> <code class="tp">mixed</code> <strong>context</strong> <p>This can be a DOM node, jQuery node or selector pointing to an element within the tree.</p> </li> </ul> <h3 id="is_selected">.is_selected ( node )</h3> <p>Returns whether the specified node is selected or not.</p> <ul class="arguments"> <li> <code class="tp">mixed</code> <strong>node</strong> <p>This can be a DOM node, jQuery node or selector pointing to an element within the tree.</p> </li> </ul> </div> </div> </body> </html> |