Hi Snib,
Thanks for your quick reply.
The tree menu consists of four files.
1. index.html
2. tree.
js
3. tree_items.
js
4. tree_tpl.
js
1. This is code for index.html
<html>
<head>
<title>Tigra Tree Menu - Demo #2 (Win help style)</title>
<meta name="description" content="Free Cross Browser Javascript DHTML Tree Menu Navigation">
<meta name="keywords" content="JavaScript tree menu, DHTML tree menu, client side tree menu, table of contents, site map, web authoring, scripting, freeware, download, shareware, free software, DHTML, Free Tree Menu, site, navigation, html, web, netscape, explorer, IE, opera, DOM, control, cross browser, support, frames, target, download">
<meta name="robots" content="index,follow">
<style>
a, A:link, a:visited, a:active
{color: #000000; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
A:hover
{color: #ff0000; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
p, tr, td, ul, li
{color: #000000; font-family: Tahoma, Verdana; font-size: 11px}
.header1, h1
{color: #ffffff; background: #4682B4; font-weight: bold; font-family: Tahoma, Verdana; font-size: 13px; margin: 0px; padding: 2px;}
.header2, h2
{color: #000000; background: #DBEAF5; font-weight: bold; font-family: Tahoma, Verdana; font-size: 12px;}
.intd
{color: #000000; font-family: Tahoma, Verdana; font-size: 11px; padding-left: 15px; padding-right: 15px;}
</style>
<script language="JavaScript" src="tree.
js"></script>
<script language="JavaScript" src="tree_items.
js"></script>
<script language="JavaScript" src="tree_tpl.
js"></script>
</head>
<body bottommargin="15" topmargin="15" leftmargin="15" rightmargin="15" marginheight="15" marginwidth="15" bgcolor="white">
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#4682B4" width="19%"><tr><td>
<table cellpadding="0" cellspacing="1" width="57%" border="0">
<tr>
<td valign="top" bgcolor="#FFFFFF">
<table cellpadding="3" cellspacing="1" border="0" width="100%">
<tr></tr-->
</table>
</td>
<td valign="top" bgcolor="#FFFFFF" width="100%">
<table cellpadding="0" cellspacing="5" border="0" width="100%">
<tr><td><img src="pixel.gif" width="1" height="1" border="0"></td></tr>
<tr><td>
<script language="JavaScript">
new tree (TREE_ITEMS, TREE_TPL);
</script>
</td></tr>
</table>
</td>
</tr>
</table>
</td></tr></table>
</body>
</html>
2. This is code for tree.js
// Title: Tigra Tree
// Description: See the demo at url
// URL:
http://www.softcomplex.com/products/tigra_menu_tree/
// Version: 1.1
// Date: 11-12-2002 (mm-dd-yyyy)
// Notes: This script is free. Visit official site for further details.
function tree (a_items, a_template) {
this.a_tpl = a_template;
this.a_config = a_items;
this.o_root = this;
this.a_index = [];
this.o_selected = null;
this.n_depth = -1;
var o_icone = new Image(),
o_iconl = new Image();
o_icone.src = a_template['icon_e'];
o_iconl.src = a_template['icon_l'];
a_template['im_e'] = o_icone;
a_template['im_l'] = o_iconl;
for (var i = 0; i < 64; i++)
if (a_template['icon_' + i]) {
var o_icon = new Image();
a_template['im_' + i] = o_icon;
o_icon.src = a_template['icon_' + i];
}
this.toggle = function (n_id) { var o_item = this.a_index[n_id]; o_item.open(o_item.b_opened) };
this.select = function (n_id) { return this.a_index[n_id].select(); };
this.mout = function (n_id) { this.a_index[n_id].upstatus(true) };
this.mover = function (n_id) { this.a_index[n_id].upstatus() };
this.a_children = [];
for (var i = 0; i < a_items.length; i++)
new tree_item(this, i);
this.n_id = trees.length;
trees[this.n_id] = this;
for (var i = 0; i < this.a_children.length; i++) {
document.write(this.a_children[i].init());
this.a_children[i].open();
}
}
function tree_item (o_parent, n_order) {
this.n_depth = o_parent.n_depth + 1;
this.a_config = o_parent.a_config[n_order + (this.n_depth ? 2 : 0)];
if (!this.a_config) return;
this.o_root = o_parent.o_root;
this.o_parent = o_parent;
this.n_order = n_order;
this.b_opened = !this.n_depth;
this.n_id = this.o_root.a_index.length;
this.o_root.a_index[this.n_id] = this;
o_parent.a_children[n_order] = this;
this.a_children = [];
for (var i = 0; i < this.a_config.length - 2; i++)
new tree_item(this, i);
this.get_icon = item_get_icon;
this.open = item_open;
this.select = item_select;
this.init = item_init;
this.upstatus = item_upstatus;
this.is_last = function () { return this.n_order == this.o_parent.a_children.length - 1 };
}
function item_open (b_close) {
var o_idiv = get_element('i_div' + this.o_root.n_id + '_' + this.n_id);
if (!o_idiv) return;
if (!o_idiv.innerHTML) {
var a_children = [];
for (var i = 0; i < this.a_children.length; i++)
a_children[i]= this.a_children[i].init();
o_idiv.innerHTML = a_children.join('');
}
o_idiv.style.display = (b_close ? 'none' : 'block');
this.b_opened = !b_close;
var o_jicon = document.images['j_img' + this.o_root.n_id + '_' + this.n_id],
o_iicon = document.images['i_img' + this.o_root.n_id + '_' + this.n_id];
if (o_jicon) o_jicon.src = this.get_icon(true);
if (o_iicon) o_iicon.src = this.get_icon();
this.upstatus();
}
function item_select (b_deselect) {
if (!b_deselect) {
var o_olditem = this.o_root.o_selected;
this.o_root.o_selected = this;
if (o_olditem) o_olditem.select(true);
}
var o_iicon = document.images['i_img' + this.o_root.n_id + '_' + this.n_id];
if (o_iicon) o_iicon.src = this.get_icon();
get_element('i_txt' + this.o_root.n_id + '_' + this.n_id).style.fontWeight = b_deselect ? 'normal' : 'bold';
this.upstatus();
return Boolean(this.a_config[1]);
}
function item_upstatus (b_clear) {
window.setTimeout('window.status="' + (b_clear ? '' : this.a_config[0] + (this.a_config[1] ? ' ('+ this.a_config[1] + ')' : '')) + '"', 10);
}
function item_init () {
var a_offset = [],
o_current_item = this.o_parent;
for (var i = this.n_depth; i > 1; i--) {
a_offset[i] = '<img src="' + this.o_root.a_tpl[o_current_item.is_last() ? 'icon_e' : 'icon_l'] + '" border="0" align="absbottom">';
o_current_item = o_current_item.o_parent;
}
return '<table cellpadding="0" cellspacing="0" border="0"><tr><td wrap>' + (this.n_depth ? a_offset.join('') + (this.a_children.length
? '<a href="javascript
: trees[' + this.o_root.n_id + '].toggle(' + this.n_id + ')" onmouseover=" trees[' + this.o_root.n_id + '].mover(' + this.n_id + ')" onmouseout="trees[' + this.o_root.n_id + '].mout(' + this.n_id + ')"><img src="' + this.get_icon(true) + '" border="0" align="absbottom" name="j_img' + this.o_root.n_id + '_' + this.n_id + '"></a>'
: '<img src="' + this.get_icon(true) + '" border="0" align="absbottom">') : '')
+ '<a href="' + this.a_config[1] + '" target="' + this.o_root.a_tpl['target'] + '" onclick="return trees[' + this.o_root.n_id + '].select(' + this.n_id + ')" ondblclick="trees[' + this.o_root.n_id + '].toggle(' + this.n_id + ')" onmouseover="trees[' + this.o_root.n_id + '].mover(' + this.n_id + ')" onmouseout="trees[' + this.o_root.n_id + '].mout(' + this.n_id + ')" class="t' + this.o_root.n_id + 'i" id="i_txt' + this.o_root.n_id + '_' + this.n_id + '"><img src="' + this.get_icon() + '" border="0" align="absbottom" name="i_img' + this.o_root.n_id + '_' + this.n_id + '" class="t' + this.o_root.n_id + 'im">' + this.a_config[0] + '</a></td></tr></table>' + (this.a_children.length ? '<div id="i_div' + this.o_root.n_id + '_' + this.n_id + '" style="display:none"></div>' : '');
}
function item_get_icon (b_junction) {
return this.o_root.a_tpl['icon_' + ((this.n_depth ? 0 : 32) + (this.a_children.length ? 16 : 0) + (this.a_children.length && this.b_opened ? 8 : 0) + (!b_junction && this.o_root.o_selected == this ? 4 : 0) + (b_junction ? 2 : 0) + (b_junction && this.is_last() ? 1 : 0))];
}
var trees = [];
get_element = document.all ?
function (s_id) { return document.all[s_id] } :
function (s_id) { return document.getElementById(s_id) };
3. This is code for tree_items.js
/*
the format of the tree definition file is simple,
you can find specification in the Tigra Menu documentation at:
http://www.softcomplex.com/products/...html#hierarchy
*/
var TREE_ITEMS = [
['Module', 0,
['Learning Units', 0,
['LU1','http://google.co.in/',],
['LU2'],
['Notes', 0,
['Description'],
['Lab', 0,
['Exp1'],
['Exp2'],
['Exp3'],
]
],
]
]
];
4. This is code for tree_tpl.js
/*
Feel free to use your custom icons for the tree. Make sure they are all of the same size.
User icons collections are welcome, we'll publish them giving all regards.
*/
var TREE_TPL = {
'target' : '_self', // name of the frame links will be opened in
// other possible values are: _blank, _parent, _search, _self and _top
'icon_e' : 'icons/empty.gif', // empty image
'icon_l' : 'icons/empty.gif', // vertical line
'icon_32' : 'icons/base.gif', // root leaf icon normal
'icon_36' : 'icons/base.gif', // root leaf icon selected
'icon_48' : 'icons/folder.gif', // root icon normal
'icon_52' : 'icons/foldersel.gif', // root icon selected
'icon_56' : 'icons/folder.gif', // root icon opened
'icon_60' : 'icons/foldersel.gif', // root icon selected
'icon_16' : 'icons/folder.gif', // node icon normal
'icon_20' : 'icons/foldersel.gif', // node icon selected
'icon_24' : 'icons/folderopen.gif', // node icon opened
'icon_28' : 'icons/foldersel.gif', // node icon selected opened
'icon_0' : 'icons/page.gif', // leaf icon normal
'icon_4' : 'icons/pagesel.gif', // leaf icon selected
'icon_2' : 'icons/empty.gif', // junction for leaf
'icon_3' : 'icons/empty.gif', // junction for last leaf
'icon_18' : 'icons/plus.gif', // junction for closed node
'icon_19' : 'icons/plus.gif', // junctioin for last closed node
'icon_26' : 'icons/minus.gif',// junction for opened node
'icon_27' : 'icons/minus.gif' // junctioin for last opended node
};
Waing for your quick reply and thanks in advance and pls give me detailed instructions to insert code for extra attribute as i mentioned in my previous post.
Regards,
Need help over code
