Version 9.1 by Thomas Mortagne on 2011/10/27 18:01
mktree : DHTML Static Tree |
Type | application |
Category | |
Developed by | Dilipkumar J |
Rating | |
License | Unknown |
Table of contents
Description
Intro:
Example
The example demonstrates a 3 level tree. It is possible to create as many nested levels as possible.
Ready Made example:
$xwiki.ssx.use("XWiki.mktree")
$xwiki.jsx.use("XWiki.mktree")
<ul name ="anyname" class="mktree">
<li>Movies 2008/2009
<ul>
<li>Action
<ul>
<li>Fast & Furious 4
<ul>
<li>tags
<ul>
<li>Cars
<li>Car Chase
</ul>
</ul>
<li>X-Men Origins: Wolverine
<ul>
<li>
</ul>
<li>Sniper
<ul>
<li>
</ul>
<li>Star Trek
<ul>
<li>
</ul>
</ul>
<li>Fantasy
<ul>
<li>The Hunt for Gollum
<li>Watchmen
<li>Dragonquest
</ul>
<li>Comedy
<ul>
<li>I Love you, Man
<li>Frankenhood
<li>Baby On Board
</ul>
<li>Drama
<ul>
<li>El Cartel
<li>Angels & Demons
<li>Little Ashes
</ul>
<li>History
<ul>
<li>Time of the Comet
<li>Winter of Frozen Dreams
<li>Red Cliff II
</ul>
</ul>
</ul>
$xwiki.jsx.use("XWiki.mktree")
<ul name ="anyname" class="mktree">
<li>Movies 2008/2009
<ul>
<li>Action
<ul>
<li>Fast & Furious 4
<ul>
<li>tags
<ul>
<li>Cars
<li>Car Chase
</ul>
</ul>
<li>X-Men Origins: Wolverine
<ul>
<li>
</ul>
<li>Sniper
<ul>
<li>
</ul>
<li>Star Trek
<ul>
<li>
</ul>
</ul>
<li>Fantasy
<ul>
<li>The Hunt for Gollum
<li>Watchmen
<li>Dragonquest
</ul>
<li>Comedy
<ul>
<li>I Love you, Man
<li>Frankenhood
<li>Baby On Board
</ul>
<li>Drama
<ul>
<li>El Cartel
<li>Angels & Demons
<li>Little Ashes
</ul>
<li>History
<ul>
<li>Time of the Comet
<li>Winter of Frozen Dreams
<li>Red Cliff II
</ul>
</ul>
</ul>
Creating the tree step by step:
1.Including the proper resources
$xwiki.jsx.use("XWiki.mktree")
$xwiki.ssx.use("XWiki.mktree")
$xwiki.ssx.use("XWiki.mktree")
2.Chosing the right editor
The mktree works only in the Wiki editor & is not supported by the WYSIWYG editor.
The mktree works in the XWiki 1.0 Syntax only & is not supported by the XWiki 2.0 Syntax
3.Creating a basic block of code
A basic block in the mktree plugin is nothing but a ul - li block.
Everytime, you want to create a node (node = branch of tree that opens when clicked on + sign), you add a ul - li block.
Basic Building Block
<ul>
<li>
</ul>
<li>
</ul>
4.Adding more BBB(Basic Building Blocks)
Let's add some data and more ul - li tags to the block we created in the above step. First, let's name the start of the tree as 'Movies'. Please refer the example image above to understand the tree flow.
<ul>
<li>Movies
</ul>
<li>Movies
</ul>
<ul>
<li>Movies
<ul>
<li>Action
</ul>
</ul>
<li>Movies
<ul>
<li>Action
</ul>
</ul>
<ul>
<li>Movies
<ul>
<li>Action
<li>Fantasy
</ul>
</ul>
<li>Movies
<ul>
<li>Action
<li>Fantasy
</ul>
</ul>
<ul>
<li>Movies
<ul>
<li>Action
<ul>
<li>Fast & Furious 4
</ul>
<li>Fantasy
</ul>
</ul>
<li>Movies
<ul>
<li>Action
<ul>
<li>Fast & Furious 4
</ul>
<li>Fantasy
</ul>
</ul>
5.Name & Class for the tree
Give this tree an id and class. This is done only to the very first 'ul' tag. The id is any name that you want to give this tree. However, the class will be always "mktree".<ul id="anyname" class="mktree">
<li>Movies
<ul>
<li>Action
<ul>
<li>Fast & Furious 4
</ul>
<li>Fantasy
</ul>
</ul>
<li>Movies
<ul>
<li>Action
<ul>
<li>Fast & Furious 4
</ul>
<li>Fantasy
</ul>
</ul>
Or, you can save your page and you should have your basic DHTML tree all ready to go.
Special Feature
1. Expand the entire tree
Use the following code snippet to expand the entire tree. Use the name of your tree in expandTree('anyname').<a onclick="expandTree('anyname');return false;" class="button" href="#">Expand All Nodes</a>
2. Collapse the entire tree
Use the following code snippet to collapse the entire tree. Use the name of your tree in collapseTree('anyname').<a onclick="collapseTree('anyname'); return false;" href="#" class="button">Collapse All Nodes</a>
3. mktree & macros
The mktree plugin supports macros within it. Add a macro as you would normally would in a page.This mktree has been tested with the info macro, warning macro & error macro.
Below, is just a snippet of the actual code that show how you can add a macro underneath any li tag.
<li>Fast & Furious 4
#warning("Not for the faint hearted!!!")
<ul>
<li>tags
<ul>
<li>Cars
<li>Car Chase
</ul>
</ul>
#warning("Not for the faint hearted!!!")
<ul>
<li>tags
<ul>
<li>Cars
<li>Car Chase
</ul>
</ul>
3. mktree & applications
The mktree plugin supports applications within it. Add an application to any li tag in your tree.This mktree has been tested with the DatePicker & LightBox applications for XWiki
The mktree javascript does not interfere with the code of these applications.