AJAX Tree Menu with PHP - Revisited
Sunday 3rd August 2008
The AJAX tree menu has received some minor updates so we have decided to re-release the project. The tree menu now offers a option 'swapping' feature when only one top-level option can be expanded, when a second top-level option is selected any others are collapsed.
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, with checkboxes and with option swapping:
$output = ajax_tree($tree_data, 1, 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,
ENABLE OPTION SWAPPING);
- 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.
- ENABLE OPTION SWAPPING
Set to '1' to enable, leave blank or set to '0' to disable, this controls whether or not the top level options should swap, i.e. when one is expanded all other top level options are collapsed.
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:
|
<- What is membership software?
|
PHP Function for Reciprocal Linkback Checking ->
|
|
|
|
|
|
OpenCrypt Team |
10 out of 10 |
|
Sagra, simply explode/split your string, then place the relevant values in the array. e.g $tree_data['name'] = Option;
|
|
|
sagra |
10 out of 10 |
|
The script it's so good.
But I'm tring to build the array with a string variable generated with the information from a table.
It doesn't works because the string is not an array. Please, It's possible to built the array getting dynamically the information from a mySQL table?
Thanks in advance. Best regards from Spain.
|
|
|
alexmet |
9 out of 10 |
|
I noticed it does not work if at least one of the top-level options has no children. Anyway, it is a very good and simple script.
|
|
|
MichaellaS |
10 out of 10 |
|
tks for the effort you put in here I appreciate it!
|
|
|
Edu Salgado |
10 out of 10 |
|
Man, the menu saved my life! Just one question (sorry about my english): how to have the menu opened where I clicked? Based in your example, I click in And Another Tier and his parent nodes are opened after the page reload. Oh, and how to have the answer of my question? lol []'s from Brazil!
|
|
|
Average Rating: 9.24 out of 10 (221 Votes)
|
|
|
|
