Web Tree Control

Windows Explorer is a well known navigation tool. These JavaScript codes implement the simplified version of this tool on a web page within minutes.

Download "WebTree.zip" file.

Open "Left.htm" with any text/html editor.

At the beginning of the document find the code lines with the names of the root directory, directories, files and linked URLs. Replace them with the required ones.
Show the codes:

//=============================================================

var root = 'Root Directory'

dir[0] = 'Directory 1'
dir0[0] = new list("File 1","File1.htm")
dir0[1] = new list("File 2","File2.htm")
dir0[2] = new list("File 3","File3.htm")
dir0[3] = new list("File 4","File4.htm")

dir[1] = 'Directory 2'
dir1[0] = new list("File 5","File5.htm")
dir1[1] = new list("File 6","File6.htm")
dir1[2] = new list("File 7","File7.htm")

dir[2] = 'Directory 3'
dir2[0] = new list("File 8","File8.htm")
dir2[1] = new list("File 9","File9.htm")
dir2[2] = new list("File 10","File10.htm")
dir2[3] = new list("File 11","File11.htm")

//=============================================================

To add a file to a directory create a new element of the correspondent array. Please ensure that the array index starts from 0 and its order is correct and ascending.
For example:

This is the original "Directory 1":

dir[0] = 'Directory 1'
dir0[0] = new list("File 1","File1.htm")
dir0[1] = new list("File 2","File2.htm")
dir0[2] = new list("File 3","File3.htm")
dir0[3] = new list("File 4","File4.htm")

A file "1a" was added to the "Directory 1":

dir[0] = 'Directory 1'
dir0[0] = new list("File 1","File1.htm")
dir0[1] = new list("File 1a","File1a.htm")
dir0[2] = new list("File 2","File2.htm")
dir0[3] = new list("File 3","File3.htm")
dir0[4] = new list("File 4","File4.htm")

To delete a file in a directory delete the correspondent element from the directory array. Please ensure that the array index starts from 0 and its order is correct and ascending.
For example:

This is the original "Directory 1":

dir[0] = 'Directory 1'
dir0[0] = new list("File 1","File1.htm")
dir0[1] = new list("File 2","File2.htm")
dir0[2] = new list("File 3","File3.htm")
dir0[3] = new list("File 4","File4.htm")

"File 2" was deleted from "Directory 1":

dir[0] = 'Directory 1'
dir0[0] = new list("File 1","File1.htm")
dir0[1] = new list("File 3","File3.htm")
dir0[2] = new list("File 4","File4.htm")

To add a directory declare a new array with the name "dirN" where N is a number of directories - 1. Populate this array with file names and URLs. Please ensure that all array indexes start from 0 and their order is correct and ascending.
For example:

This is the original tree:

var dir = new Array()
var dir0 = new Array()
var dir1 = new Array()
var dir2 = new Array()

var root = 'Root Directory'

dir[0] = 'Directory 1'
dir0[0] = new list("File 1","File1.htm")
dir0[1] = new list("File 2","File2.htm")
dir0[2] = new list("File 3","File3.htm")
dir0[3] = new list("File 4","File4.htm")

dir[1] = 'Directory 2'
dir1[0] = new list("File 5","File5.htm")
dir1[1] = new list("File 6","File6.htm")
dir1[2] = new list("File 7","File7.htm")

dir[2] = 'Directory 3'
dir2[0] = new list("File 8","File8.htm")
dir2[1] = new list("File 9","File9.htm")
dir2[2] = new list("File 10","File10.htm")
dir2[3] = new list("File 11","File11.htm")

The directory "Directory 1a" was added to the tree.

var dir = new Array()
var dir0 = new Array()
var dir1 = new Array()
var dir2 = new Array()
var dir3 = new Array()

dir[0] = 'Directory 1'
dir0[0] = new list("File 1","File1.htm")
dir0[1] = new list("File 2","File2.htm")
dir0[2] = new list("File 3","File3.htm")
dir0[3] = new list("File 4","File4.htm")

dir[1] = 'Directory 1a'
dir1[0] = new list("File 12","File12.htm")
dir1[1] = new list("File 13","File13.htm")
dir1[2] = new list("File 14","File14.htm")
dir1[3] = new list("File 15","File15.htm")

dir[2] = 'Directory 2'
dir2[0] = new list("File 5","File5.htm")
dir2[1] = new list("File 6","File6.htm")
dir2[2] = new list("File 7","File7.htm")

dir[3] = 'Directory 3'
dir3[0] = new list("File 8","File8.htm")
dir3[1] = new list("File 9","File9.htm")
dir3[2] = new list("File 10","File10.htm")
dir3[3] = new list("File 11","File11.htm")

To delete a directory remove the array with the name "dirN" where N is the biggest integer. Please ensure that all array indexes start from 0 and their order is correct and ascending.
For example:

This is the original tree:

var dir = new Array()
var dir0 = new Array()
var dir1 = new Array()
var dir2 = new Array()

dir[0] = 'Directory 1'
dir0[0] = new list("File 1","File1.htm")
dir0[1] = new list("File 2","File2.htm")
dir0[2] = new list("File 3","File3.htm")

dir[1] = 'Directory 2'
dir1[0] = new list("File 5","File5.htm")
dir1[1] = new list("File 6","File6.htm")
dir1[2] = new list("File 7","File7.htm")

dir[2] = 'Directory 3'
dir2[0] = new list("File 8","File8.htm")
dir2[1] = new list("File 9","File9.htm")
dir2[2] = new list("File 10","File10.htm")
dir2[3] = new list("File 11","File11.htm")

Directory "Directory 1" was deleted from the original tree:

var dir = new Array()
var dir0 = new Array()
var dir1 = new Array()

dir[0] = 'Directory 2'
dir0[0] = new list("File 5","File5.htm")
dir0[1] = new list("File 6","File6.htm")
dir0[2] = new list("File 7","File7.htm")

dir[1] = 'Directory 3'
dir1[0] = new list("File 8","File8.htm")
dir1[1] = new list("File 9","File9.htm")
dir1[2] = new list("File 10","File10.htm")
dir1[3] = new list("File 11","File11.htm")