AJAX TREE API


Now it is easy to generate menus just using html, xml and css !!!


(DOWNLOAD)

AJAX TREE API is an application which generates an html tree by xml data, with <ul> and <li> tags.
The xml data is inside a file defined in the variable: fileDataURL. (Variable defined inside the html document) You can see the xml data file here.
After loading the xml data, the API will create an html tree, with the configuration of another xml file defined in the variable: fileConfigURL. This second xml file records the configuration to construct the html tree, with the information needed to transform the xml data into <ul> and <li> html tags. To understand how it works, see the configuration file here.
The configuration file is divided into sections. Each section contains an html code related to an xml tag. The example below shows how it works:
      example of a xml data file: <complex>item 1</complex>
      example of a xml configuration file: <row><tag>complex</tag><html><a href="#">#_DATA</a></html></row>
      example of a html tree created by the API: <ul><li><a href="#">item 1</a></li></ul>
      conclusion: the API conciliates the xml data file with the xml configuration file and constructs the html tree.

      Other important information:
            If the xml tag (of the xml data) contains attributes, like an id or href (<element id="21" href="#">item</element>), these attributes can be called on the html tags of the configuration file, using #_ATTRIBUTE[id] or #_ATTRIBUTE[href] inside the html tags of the xml configuration file, like this: <a id="a_#_ATTRIBUTE[id]" href="#_ATTRIBUTE[href]">item</a>.
            To call the data of an xml element of the xml data file (<element>DATA</element>), is just need to write: #_DATA.
            You can see the example in the followed files: xml data file.php and xml config file.xml

It is very important to respect the syntax of the xml configuration file (fileConfigURL).
It is advisable to describe an ID for each xml elements of the xml data file, or they cannot be distinguished (<element id="21">item</element>)! (you can see an example on the xml data file)

Beyond these two files, there are predefined functions which can be used on the configuration file. These functions are defined in tree_functions.js file and explained here!

The other type of interface is defined by CSS files, as you can see on the examples below.

The html tree is built with javascript code, with html code generated dynamically. This can be a problem to the indexation of Google and others web searchable.
To solve this, the html tree can be generated by php code, like some examples below.
As you can see below, there are several javascripts and php examples listed below:

JAVASCRIPT EXAMPLES:

JAVASCRIPT EXAMPLE WITH AUTOMATIC UPDATE:

PHP EXAMPLES:
All the examples have different interfaces as they have different css. If you see the source code, you will verify that the generated html code is the same to all examples.
(The CSS isn't optimized to the firefox browser, but I leave this to the WebDesigners)


Note:
It is also important to define the variable "mainTreeDivID" with the id of the div that will contain the generated html tree (var mainTreeDivID = 'tree').
(you can see an example on the source code of any html file of examples folder)

Advantages:
With this API you can have the data separated from the interface code, without need to know programming languages.
However, if you want, you can program your own functions.

Now it is easy to generate menus just using html, xml and css !!!

Done by: Joao Pinto