Javascript - TreeView

You will see many different scripts dealing with treeview but most of them are complex. Today I propose a very simple script based on CSS and a few background images to give the tree a pleasant and simple look.
If you want to see the live result (we believe this is the best way to learn what is the script about), try it here (new window).

The Html page: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="treeview.css" /> <script type="text/javascript" src="treeview.js"></script> </head> <body> <dl class="tree"> <dt id="fold1" onclick="javascript:openclose(0);return false;">Folder 1</dt> <dd id="fold1file"> <a href="#">file 1</a><br /> <a href="#">file 2</a><br /> <a href="#" class="end">file 2</a> </dd> <dt id="fold2" onclick="javascript:openclose(1);return false;">Folder 2</dt> <dd id="fold2file"><a href="#">file 1</a><br /> <a href="#">file 2</a><br /> <a href="#" class="end">file 2</a> </dd> </dl> </body> </html>

The External Javascript code (treeview.js): //Array of folders and respective boolean values - add more if you need more: var folders= new Array('fold1','fold2'); var opened= new Array('0','0'); function openclose(folder) { if(opened[folder] == 0) { //retrieve the id of the folder field and change the background image and height size obj = document.getElementById(folders[folder]); obj.style.background = '#ffffff url(\'minus.gif\') no-repeat left'; obj.style.height = '32px'; //Make the children visible obj = document.getElementById(folders[folder] + 'file'); obj.style.height = 'auto'; obj.style.visibility = 'visible'; opened[folder] = 1; } else { //Same as above but back to initial position obj = document.getElementById(folders[folder]); obj.style.background = '#ffffff url(\'folder.gif\') no-repeat left'; obj.style.height = 'auto'; obj = document.getElementById(folders[folder] + 'file'); obj.style.height = '0.1em'; obj.style.visibility = 'hidden'; opened[folder] = 0; } }

The External CSS file (treeview.css): dl.tree dt{background:#ffffff url('folder.gif') no-repeat left;padding-left:20px;height:auto;cursor:pointer;text-decoration:underline;font-weight:bold;color:red;} dl.tree dd{visibility:hidden;height:0.1em;overflow:hidden;margin-left:32px;} dl.tree dd a{background:#ffffff url('link.gif') left no-repeat;padding-left:20px;border-left:1px dotted red;} dl.tree dd a.end{border:0px;background:#ffffff url('endlink.gif') no-repeat left}

This script is opened to any additional features and it is a good start as it is simple, you can easily add nodes and levels to the tree. You may change the design by changing the background images which you can download here:

Comments

Post a first comment now
or discuss about it at this address:
Forum - Javascript (Simple Treeview)

Webmaster Corner

The Millionaire league
Dozens of Easy and Automatic Ways to Make Money Online Everyday!

Niche Annihilation Method
Crush Your Competition!
Download the method Now

iPowerWeb
Incredible Membership Packages - Web Hosting!

One Month Free Trial! ProStores - an eBay Company
Gain customers, increase sales, and boost profits with your own Web Store.

→ Get Google Pay-Per-Click Ads Free!
→ Automated Cash Formula $$$

Javascript - TreeView

Javascript - TreeView

Comments

Webmaster Corner

Categories