OpenCrypt - Membership Software
Username:
Password:
Register / My Account / Forgotten Password?
 Home  Features and Benefits  Online Demonstration  Purchase  Our Services  Help and Support  my.OpenCrypt 
 Welcome  New Visitor  Latest NewsRSS Feed Company Information  Press/Testimonials  Frequently Asked Questions  BlogNew Content
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. AJAX Tree Menu with PHP
 
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:
Delicious Stumble It!
Stumble It!
 
<- What is membership software?
 
PHP Function for Reciprocal Linkback Checking ->
Articles
Subscribe to RSS Feed
OpenCrypt Version 1.9
New Product: myRepono Website Backup Service
Website Pre-Launch Checklist
ionix in 2010
PHP Security Tips - Part 1
OpenCrypt 1.8 New Feature Highlights
Video Conversion API
We're on Twitter!
IP Location API
Integrating OpenCrypt's PHP Login Interface
Developing Mobile Web Sites
Service Recovery
Building relationships with your customers
Doing the unexpected
PHP/JavaScript World Map with Continent and Ocean Selection
We've Moved!
Customer Showcase: A-Z-Animals.com
Optimising your secure content for Google
Membership business models
AJAX Calendar with PHP and mySQL
PHP Function for Reciprocal Linkback Checking
AJAX Tree Menu with PHP - Revisited
What is membership software?
Login form designs and inspiration
PHP subscriber counter with Addicted to Feedburner class and Feedburner Awareness API
AJAX Tree Menu with PHP
AJAX data listings engine with PHP and mySQL (BETA)
Join the ionix Team!
Press Release: OpenCrypt 2.0 in Development!
PHP: Basic functions for quickstart PHP framework
Welcome to the OpenCrypt Blog!
Visitor Comments
OpenCrypt Team 10 out of 10
Space Holder
Sagra, simply explode/split your string, then place the relevant values in the array. e.g $tree_data['name'] = Option;
Space Holder
Space Holder
sagra 10 out of 10
Space Holder
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.

Space Holder
Space Holder
alexmet 9 out of 10
Space Holder
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.
Space Holder
Space Holder
MichaellaS 10 out of 10
Space Holder
tks for the effort you put in here I appreciate it!
Space Holder
Space Holder
Edu Salgado 10 out of 10
Space Holder
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!
Space Holder
Space Holder
Average Rating: 9.80 out of 10 (5 Votes)
Space Holder
Submit Comment
Space Holder
Article Rating:
Space Holder
Your Name:
Space Holder
Your Comment/Response:
Space Holder
Space Holder
Space Holder

Follow us on Twitter

Copyright © 1999 - 2011 ionix Limited. Affiliates, Contact Us

Powered by OpenCrypt Membership Software, Backups by myRepono Website Backup