article.xml

可以实现无限级的动态树型菜单,您可以进行学习,然后根据你自己的需求进行定制.

</tbody>
</table>

<h2>WebFXTree</h2>

<p>
  The WebFXTree object is used to create the actual tree root that can later be populated with tree items.
  All properties and methods from the WebFXTreeAbstractNode are inherited.
</p>

<h3>Constructor</h3>

<pre>new WebFXTree([text], [action], [behavior])</pre>

<table>
<thead><tr>
	<td>Name</td>
	<td>Type</td>
	<td>Description</td>
</tr></thead>
<tbody>
<tr>
	<td>text</td>
	<td>String</td>
	<td>Optional. The text label for the tree root.</td>
</tr>
<tr>
	<td>action</td>
	<td>String</td>
	<td>Optional. The action (uri) associated with the tree root.</td>
</tr>
<tr>
	<td>behavior</td>
	<td>String</td>
	<td>Optional. Name of the behavior to use, check the setBehavior() method for details.</td>
</tr>
<tr>
	<td>icon</td>
	<td>String</td>
	<td>Optional. Image to use as the icon.</td>
</tr>
<tr>
	<td>openIcon</td>
	<td>String</td>
	<td>Optional. Image to use as the open icon.</td>
</tr>
</tbody>
</table>

<h3>Properties</h3>

<table>
<thead><tr>
	<td>Name</td>
	<td>Type</td>
	<td>Description</td>
</tr></thead>
<tbody>
<tr>
	<td>rendered</td>
	<td>Boolean</td>
	<td>Flag that indicates whatever or no the tree has been generated and rendered.</td>
</tr>
</tbody>
</table>

<h3>Methods</h3>

<table>
<thead><tr>
	<td>Name</td>
	<td>Returns</td>
	<td>Description</td>
</tr></thead>
<tbody>
<tr>
	<td>getSelected()</td>
	<td>Reference</td>
	<td>Returns the id of the selected object, if any.</td>
</tr>
<tr>
	<td><nobr>setBehavior(sBehavior)</nobr></td>
	<td>Void</td>
	<td>
		Has to be specified before the tree is created and can be used to change the way the tree behaves,
		possible values are <i>classic</i> (default) and <i>explorer</i>. Check the usage page for more
		information about this.
	</td>
</tr>
<tr>
	<td>getBehavior()</td>
	<td>String</td>
	<td>Returns the name of the behavior used.</td>
</tr>
</tbody>
</table>

<h2>WebFXTreeItem</h2>

<p>
  Used to create tree items, can be added (uisng the add method) to a WebFXTree or to another
  WebFXTreeItem object.
  All properties and methods from the WebFXTreeAbstractNode are inherited.
</p>

<h3>Constructor</h3>

<pre>new WebFXTreeItem([text], [action], [parent], [icon], [openIcon])</pre>

<table>
<thead><tr>
	<td>Name</td>
	<td>Type</td>
	<td>Description</td>
</tr></thead>
<tbody>
<tr>
	<td>text</td>
	<td>String</td>
	<td>Optional. The text label for the tree item.</td>
</tr>
<tr>
	<td>action</td>
	<td>String</td>
	<td>Optional. The action (uri) associated with the tree item.</td>
</tr>
<tr>
	<td>parent</td>
	<td>Reference</td>
	<td>Optional. Reference to an object to witch the node should be added.</td>
</tr>
<tr>
	<td>icon</td>
	<td>String</td>
	<td>Optional. Image to use as the icon.</td>
</tr>
<tr>
	<td>openIcon</td>
	<td>String</td>
	<td>Optional. Image to use as the open icon.</td>
</tr>
</tbody>
</table>

<h3>Properties</h3>

<table>
<thead><tr>
	<td>Name</td>
	<td>Type</td>
	<td>Description</td>
</tr></thead>
<tbody>
<tr>
	<td colspan="3">None but the inherited ones</td>
</tr>
</tbody>
</table>

<h3>Methods</h3>

<table>
<thead><tr>
	<td>Name</td>
	<td>Returns</td>
	<td>Description</td>
</tr></thead>
<tbody>
<tr>
	<td>getFirst()</td>
	<td>Reference</td>
	<td>Returns a reference to the first child node, if any.</td>
</tr>
<tr>
	<td>getLast()</td>
	<td>Reference</td>
	<td>Returns a reference to the last child node, if any.</td>
</tr>
</tbody>
</table>
</section>


<section filename="implementation.html" title="Implementation" output="standard">
<p>
	A tree widget is basically a bunch of collapsible containers, when you open a node
	all it's child nodes becomes visible, and when you close it they're hidden. The basic
	idea is that simple however there are a few things that makes it a bit more complicated.
	Below you'll find information about parts of the implementation of this tree widget,
	how the generated code looks like and how a few of the methods work. This is not
	something you need to read and understand in order to use this widget, however if
	you're interested in how this was made and how it works you might find this helpful.
</p>
<h2>Generated Code</h2>
<p>
	As described earlier the tree widget uses an object hierarchy implementation to simplify the creation of trees,
	however since the browser cannot understand that object hierarchy we are required to convert it into something
	that the browser can render, in this case guess what we're using? Yeah you where right, our old buddy html.
	Below is the generated html code for a small tree with only three items. Further down this document you'll find
	the same code but split up and described.
</p>
<pre>
	&lt;div id="webfx-tree-object-0" ondblclick="webFXTreeHandler.toggle(this);" class="webfx-tree-item"&gt;
		&lt;img id="webfx-tree-object-0-icon" src="images/openfoldericon.png" onclick="webFXTreeHandler.select(this);"&gt;
		&lt;a href="javascript:void(0);" id="webfx-tree-object-0-anchor"&gt;Root&lt;/a&gt;
	&lt;/div&gt;
	&lt;div id="webfx-tree-object-0-cont" class="webfx-tree-container" style="display: block;"&gt;
		&lt;div id="webfx-tree-object-1" class="webfx-tree-item"&gt;
			&lt;img id="webfx-tree-object-1-plus" src="images/L.png"&gt;
			&lt;img id="webfx-tree-object-1-icon" src="images/new.png" onclick="webFXTreeHandler.select(this);"&gt;
			&lt;a href="javascript:void(0);" id="webfx-tree-object-1-anchor"&gt;1&lt;/a&gt;
		&lt;/div&gt;
		&lt;div id="webfx-tree-object-2" class="webfx-tree-item"&gt;
			&lt;img id="webfx-tree-object-2-plus" src="images/L.png"&gt;
			&lt;img id="webfx-tree-object-2-icon" src="images/new.png" onclick="webFXTreeHandler.select(this);"&gt;
			&lt;a href="javascript:void(0);" id="webfx-tree-object-2-anchor"&gt;2&lt;/a&gt;
		&lt;/div&gt;
		&lt;div id="webfx-tree-object-3" class="webfx-tree-item"&gt;
			&lt;img id="webfx-tree-object-3-plus" src="images/L.png"&gt;
			&lt;img id="webfx-tree-object-3-icon" src="images/new.png" onclick="webFXTreeHandler.select(this);"&gt;
			&lt;a href="javascript:void(0);" id="webfx-tree-object-3-anchor"&gt;3&lt;/a&gt;
		&lt;/div&gt;
	&lt;/div&gt;
</pre>
<h3>WebFXTree Object</h3>
<p>
	The code below is what is generated from the WebFXTree Object (it will however also contain the code from all tree items
	but to increase the readability that code has been removed).
</p>
<pre>
	&lt;div id="webfx-tree-object-0" ondblclick="webFXTreeHandler.toggle(this);" class="webfx-tree-item"&gt;
		&lt;img id="webfx-tree-object-0-icon" src="images/openfoldericon.png" onclick="webFXTreeHandler.select(this);"&gt;
		&lt;a href="javascript:void(0);" id="webfx-tree-object-0-anchor"&gt;Root&lt;/a&gt;
	&lt;/div&gt;
	&lt;div id="webfx-tree-object-0-cont" class="webfx-tree-container" style="display: block;"&gt;
		<font color="teal">&lt;!-- This is where the Tree Item's will be inserted --&gt;</font>
	&lt;/div&gt;
</pre>
<p>
	The first div contains the top level icon and label while the secund div is the container that will house the tree items.
	When the first div is double clicked the display property of the secund one will be toggled.
</p>
<h3>WebFXTreeItem</h3>
<p>
	The code below is what is generated from a singel WebFXTreeItem Object.
</p>
<pre>
	&lt;div id="webfx-tree-object-1" class="webfx-tree-item"&gt;
		&lt;img id="webfx-tree-object-1-plus" src="images/L.png"&gt;
		&lt;img id="webfx-tree-object-1-icon" src="images/new.png" onclick="webFXTreeHandler.select(this);"&gt;
		&lt;a href="javascript:void(0);" id="webfx-tree-object-1-anchor"&gt;1&lt;/a&gt;
	&lt;/div&gt;
</pre>				
<p>
	As you can see the code generated by each WebFXTreeItem looks pretty much the same as the one for the WebFXTree object, the
	main difference is the extra image(s) that the tree items has (the plus/minus and track icons). Also note that the code
	shown above is from a tree item without children. If the tree item has children an extra div to contain those will be added
	(much like the secund div generated by the WebFXTree Object).
</p>
<h2>Expanding/Collapsing</h2>
<p>
	The most important methods for this widget are expand and collapse. Here I'll try to describe how those works. As the html
	code above showed <code>webFXTreeHandler.toggle(this);</code> is executed once a tree item is clicked. The tree handler
	then uses an internal reference, <code>webFXTreeHandler.all</code> to look up the object for the clicked tree item. Once
	the object has been found it executes the <code>toggle()</code> method on that
	object.
</p>
<p>
	Below is the code for the toggle method and as you can see all it does is to check whatever or not the item is currently
	expanded or collapsed, and then calls the appropriated method (expand if it's collapsed or collapse if it's expanded).
</p>
<pre>
	WebFXTreeItem.prototype.toggle = function () {
		if (this.open) { this.collapse(); }
		else { this.expand(); }
	}
</pre>
<p>
	Since the expand and collapse methods works pretty much the same I'll only describe one of them, the expand method.
</p>
<pre>
	WebFXTreeItem.prototype.expand = function () {
		if (!this._subItems.length > 0) { return; }
		document.getElementById(this.id + '-cont').style.display = 'block';
		document.getElementById(this.id + '-icon').src = openFolderIcon;
		document.getElementById(this.id + '-plus').src = this.minusIcon;
		this.open = true;
		setCookie(this.id.substr(18,this.id.length - 18), '1');
	}
</pre>
<p>
	The first line of code checks to see if there are any children, since it doesn't do any good to expand it unless
	there are. The next line is the most important one and does the expanding by changing the display mode of the div
	containing all children to block. The next two lines changes the icon and the plus/minus sign, then the <code>open</code>
	property is changed to reflect the expanded/collpased state and finally it sets a cookie (used to keep track of what's
	expanded or not so that the tree can be restored to it's previous state the next time you visit the site).
</p>
</section>


<section filename="demo.html" title="Demo" output="link" />


	</sections>
		<files>
			<file type="archive" version="1.17" filename="/download/xtree117.zip" />
			<file type="archive" version="1.16" filename="/download/xtree116.zip" />
			<file type="archive" version="1.15" filename="/download/xtree115.zip" />
			<file type="archive" version="1.14" filename="/download/xtree114.zip" />
			<file type="archive" version="1.13" filename="/download/xtree113.zip" />
			<file type="archive" version="1.12" filename="/download/xtree112.zip" />
			<file type="archive" version="1.11" filename="/download/xtree111.zip" />
			<file type="misc" filename="webfxcheckboxtreeitem.js">Checkbox tree item implementation</file>
		</files>
	</article>
</articles>