AJAX Tree Menu with PHP
Monday 9th June 2008
We have recently developed an AJAX tree menu function as part of OpenCrypt version 2.0 which we hoped you might find useful when developing your PHP applications.
Article Updated
View Latest Version
The tree menu offers a convenient method for organising data, whether links or other information which can be grouped. In our example you will see the tree menu function as a navigation menu, but the tree menu can be used for any purpose, for example we use it for selecting categories to search.
The tree menu function supports a limitless depth of options, and can be displayed in table and non-table formats. The function also includes the option to display checkbox selection boxes next to each option in the menu which can be used to select the options.
Usage
After setting the general variables and stylesheets as per the example file (see 'Configuration' instructions below), simply use the following to generate an AJAX tree menu:
$tree_data = array(
array(
name => "Option",
url => "http://www.OpenCrypt.com/index.php",
parent => "0"),
array(
name => "Sub-Option",
url => "http://www.OpenCrypt.com/blog.php",
parent => "Option")
);
require "ajax_tree.php";
$output = ajax_tree($tree_data);
To include the AJAX tree menu in a table and with checkboxes:
$output = ajax_tree($tree_data, 1, 1);
Note, the returned output must be printed after the CSS/JavaScript headers have been printed (included in example.php).
The three input flags are used as outlined below:
ajax_tree(TREE DATA ARRAY, ENABLE CHECKBOXES, ENABLE TABLES);
- TREE DATA ARRAY
This input is used to parse the array of options to be included in the tree menu. See below or see example file for guidance setting up array.
- ENABLE CHECKBOXES
Display checkboxes next to each menu option, set to '1' to enable, leave blank or set to '0' to disable. The name for each checkbox is generated from the option name, all non-alphanumeric charaters are removed from the name including any spaces and the name is prefixed with 'check_'. e.g. 'Another Option' or 'Another_Option' would become 'check_AnotherOption'.
- ENABLE TABLES
Display menu options in tables, set to '1' to enable, leave blank or set to '0' to disable. The colour of the tables can be controlled using the $ajax_tree_table variables which are outlined below.
Configuration
The example.php file contains various JavaScript and CSS/Stylesheets which must be included before loading the AJAX tree menu. A PHP array of options to be displayed in the tree must also be parsed to the function. The array must include a 'name' and 'parent' value for each option, the 'url' value is not required and the link will be used to expand and collapse the option if no URL is provided. The 'parent' value must match the name of the option this option should be listed under. If the option is to be displayed at the top/root level then the parent should be set as '0'. The sub-options have been indented in the following example to aid your understanding.
$tree_data = array(
array(
name => "Top Level Option",
url => "http://www.OpenCrypt.com/",
parent => "0"),
array(
name => "Second Level Option",
url => "http://www.OpenCrypt.com/blog.php",
parent => "Top Level Option"),
array(
name => "Third Level Option",
url => "http://www.OpenCrypt.com/news.php",
parent => "Second Level Option"),
array(
name => "Another Second Level Option",
url => "http://www.OpenCrypt.com/features.php",
parent => "Top Level Option"),
array(
name => "Another Top Level Option",
url => "http://my.OpenCrypt.com/",
parent => "0"),
);
The following variables can also be set to control the colour of the option tables, the text style is controlled with CSS/stylesheets. Note, you can add more options (incrementing the identifying number) if the depth of your menu requires them. Note, '0' is the top/root level, '1' would be the next level and so on...
$ajax_tree_table['0'] = "ffffff";
$ajax_tree_table['1'] = "eeeeee";
$ajax_tree_table['2'] = "e5e5e5";
$ajax_tree_table['3'] = "dddddd";
License and Download
This code is Open Source and is released under the GNU General Public License.
We hope you find this code of use, if you use it in your projects we'd love to hear about it! And of course, if you have any questions please don't hesitate to post a comment and we will respond as soon as possible.
Syntax highlighting powered by JUSH
Share this article:
|
<- AJAX data listings engine with PHP and mySQL (BETA)
|
PHP subscriber counter with Addicted to Feedburner class and Feedburner Awareness API ->
|
|
|
|
|
|
OpenCrypt.com Team |
10 out of 10 |
|
|
|
|
Kadurini |
9 out of 10 |
|
Great work. Very simple to implement and use. I was wondering if it is possible to leave one of the first top level expanded all time.
Thanks for the great tree menu.
|
|
|
Mike |
9 out of 10 |
|
Thanks for the update, which is much appreciated. Unfortunately it would seem that I haven't made myself clear. What I am trying to achieve is as follows:
let's describe the hierarchy as 1 for root, 1.1 for sublevel one, 1.1.1 for a sublevel of sublevel one and so on ( e.g. 1.1.1.1; 1.1.1.1.1...)
so a typical hierarchay would be
1 - RANK 1
1.1 - RANK 2
1.1.1 - RANK 3
1.1.1.1 - RANK 4
1.1.1.2
1.1.2
1.1.3
1.2 - RANK 2
1.2.1 - RANK 3
1.2.2
1.2.3
1.3 - RANK 2
1.3.1 - RANK 3
2 - RANK 1
2.1 - RANK 2
2.2
and so on...
So, using my example above,let's assume the state is that item 1 is open, and sublevel 1.1 is open, and of course, item 2 (and all its sub-levels) is/are closed, and item 1.2 and item 1.3 (and their sublevels) are closed.
By clicking on item 1.2 I would like it to open, and item 1.3 and 1.1 to close. Similarly, when 1.3 is open, 1.2 and 1.1 will be closed but clicking on 1.1 will open it and 1.2 1n.3 will close.
Similarly for each level, sub level and sub-sub level. Thus, only one member of any RANK (which has sub-level) can be open at any time. If we think of it as folders and files, then only one folder at a given RANK can be open at one time, of course the folders which contain the open folder will be open.
I hope that I have explained myself properly, but I don't believe that v2 of the menu implements this behaviour.
PS there are now FOUR input flags, so the USAGE information on the blog is somewhat misleading.
|
|
|
Mike |
10 out of 10 |
|
Great piece of work, neat, and compact. I was wondering if you could help me out with implementing an additional feature in your nifty little menu. I would like to make this such that when one clicks on a different heading AT THE SAME LEVEL in the tree, the existing open level collapses and the new level opens. I don't have much experience with PHP but am reasonably competent with HTML and CSS.
|
|
|
Average Rating: 9.27 out of 10 (217 Votes)
|
|
|
|
