[分享] 樹形導航條

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>漂亮的樹形導航條</title>
<script language="javascript">
//alert("arrived here");
function PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target){
this.id=id;
this.pid=pid;
this.label=label;
this.url=url;
this.title=title;
this.target=target;
this.img=img;
this.over=over;
this.img2=img2;
this.over2=over2;
this.type=type;
//this._ih = false; //is it the head item?
this._hc = false; //has the child item?
this._ls = false; //has sibling item?
this._io = false; //whether the panelbar is open?
};
//menu object
function PhenMenu(objName) {
this.config = {
closeSameLevel : true
};
//alert("asdsdf");
this.obj = objName;
this.items = [];
this.root = new PhenItem(-1);
};
//add a new item to the item array
PhenMenu.prototype.add = function(id,pid,label,url,type,img,over,img2,over2,title,target){
this.items[this.items.length] = new PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target);
};
// Outputs the menu to the page
PhenMenu.prototype.toString = function() {
//alert("arrived here");
var str = '<div>\n';
if (document.getElementById) {
str += this.addItem(this.root);
} else str += 'Browser not supported.';
str += '\n</div>';
//alert(str);
//document.write(str);
//alert(this.items[0]._hc);
return str;
};
// Creates the menu structure
PhenMenu.prototype.addItem = function(pItem) {
var str = '';
//var n=0;
for (var n=0; n<this.items.length; n++) {
if(this.items[n].pid == pItem.id){
var ci = this.items[n];
//alert(ci.pid);
//alert(ci.id);
this.setHS(ci);
//alert("item:"+ci._hc);
//alert(ci._ls);
str += this.itemCreate(ci, n);
if(ci._ls) break;
}
}
return str;
};
// Creates the node icon, url and text
PhenMenu.prototype.itemCreate = function(pItem, itemId) {
//alert(pItem.type.toLowerCase());
var str = '';
if(pItem.type == 'header')
str = '<table width="100%" class="header" valign="middle" onmouseover="this.className=\'headerSelected\'" onmouseout="this.className=\'header\'" onclick="'+this.obj+'.o('+itemId+')"><tr><td>';
else
str = '<table width="100%" class="item" valign="middle" onmouseover="this.className=\'itemOver\'" onmouseout="this.className=\'item\'" onclick="'+this.obj+'.o('+itemId+')"><tr><td>';
if (pItem.img) {
str += ' <img id="i' + this.obj + itemId + '" src="' + pItem.img + '" alt="" />';
}
if (pItem.url) {
str += '<a id="s' + this.obj + itemId + '" class="navigation_item" href="' + pItem.url + '"';
if (pItem.title) str += ' title="' + pItem.title + '"';
if (pItem.target) str += ' target="' + pItem.target + '"';
str += ' onmouseover="window.status=\'' + pItem.label + '\';return true;" onmouseout="window.status=\'\';return true;"';
str += '>';
}
str += ' ' + pItem.label;
if (pItem.url) str += '</a>';
str += '</td></tr></table>';
//alert(pItem.url);
//alert(str);
if (pItem._hc) {
str += '<table id="ct' + this.obj + itemId + '" width="100%" style="display:' + ((pItem._io) ? 'block' : 'none') + '; FILTER: blendTrans(Duration=3.0); VISIBILITY: hidden"><tr><td>';
str += this.addItem(pItem);
str += '</td></tr></table>';
//alert(str);
//document.write(str);
}
return str;
};
// Checks whether a item has child and if it is the last sibling
PhenMenu.prototype.setHS = function(pItem) {
var lastId;
for (var n=0; n<this.items.length; n++) {
if (this.items[n].pid == pItem.id) pItem._hc = true;
if (this.items[n].pid == pItem.pid) lastId = this.items[n].id;
}
if (lastId==pItem.id) pItem._ls = true;
};
// Toggle Open or close
PhenMenu.prototype.o = function(id) {
//alert(this.items.length);
var ci = this.items[id];
//alert(ci);
//this.setHS(ci);
//alert(this.items[id]._hc);
this.itemStatus(!ci._io, id);
ci._io = !ci._io;
if (this.config.closeSameLevel) this.closeLevel(ci);
};
// Change the status of a item(open or closed)
PhenMenu.prototype.itemStatus = function(status, id) {
cTable= document.getElementById('ct' + this.obj + id);
if(status){
cTable.filters.item(0).Apply();
cTable.style.display = 'block';
cTable.style.visibility = "";
cTable.filters.item(0).Play();
}
else
cTable.style.display = 'none';
//cDiv.style.display = (status) ? 'block': 'none';
};
// Closes all items on the same level as certain item
PhenMenu.prototype.closeLevel = function(pItem) {
//alert(this.items[0]._hc);
for (var n=0; n<this.items.length; n++) {
//alert(this.items[n]._hc);
if ((this.items[n].pid == pItem.pid) && (this.items[n].id != pItem.id) && this.items[n]._hc) {
this.itemStatus(false, n);
this.items[n]._io = false;
this.closeAllChildren(this.items[n]);
}
}
};
PhenMenu.prototype.closeAllChildren = function(pItem) {
for (var n=0; n<this.items.length; n++) {
if (this.items[n].pid == pItem.id && this.items[n]._hc) {
if (this.items[n]._io) this.itemStatus(false, n);
this.items[n]._io = false;
this.closeAllChildren(this.items[n]);
}
}
};
</script>
<style>
.header {
height:25px;
FONT-FAMILY: Arial,Verdana;
background-image:url(images/sideNavCategoryBg.gif);
font-size:11px;
color: #666666;
}
.headerSelected {
height:25px;
FONT-FAMILY: Arial,Verdana;
background-image:url(images/sideNavCategorySelectedBg.gif);
font-size:11px;
background-repeat:repeat-x;
COLOR: #333333;
CURSOR: pointer;
}
.navigation_item {
PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: none
}
.item {
PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px;
}
.itemOver {
PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #333333; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; font-weight:bold; background-color:#EDEDED
}
.itemSelected {
PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: underline;
}
A.headerSelected {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; HEIGHT: 10px
}
</style>
</head>
<body bgcolor="#F7F7F7">
<table width="221" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<p><a target="_blank" href="http://n7197.66rt.com/">
<img border="0" src="http://homepage8.seed.net.tw/web@5/n7197/logo.gif"></a></p>
<script type="text/javascript">
p = new PhenMenu('p');
//alert("asds");
p.add(0,-1,'網頁特效','','header','http://homepage8.seed.net.tw/web@5/n7197/20070902e.gif');
p.add(1,0,'窗口特效','http://n7197.66rt.com/');
p.add(2,0,'頁面導航','http://n7197.66rt.com/');
p.add(3,0,'按鈕鏈接','http://n7197.66rt.com/');
p.add(4,0,'文本特效','http://n7197.66rt.com/');
p.add(5,-1,'JS教程','','header','http://homepage8.seed.net.tw/web@5/n7197/20070902e.gif');
p.add(6,5,'最新教程','http://n7197.66rt.com/');
p.add(7,5,'教程排行','http://n7197.66rt.com/');
p.add(8,5,'實際應用','http://n7197.66rt.com/');
p.add(9,5,'基礎教程','http://n7197.66rt.com/');
p.add(10,-1,'特效論壇','','header','http://homepage8.seed.net.tw/web@5/n7197/20070902e.gif');
p.add(11,10,'最新贴子','http://n7197.66rt.com/');
p.add(12,10,'最熱帖子','http://n7197.66rt.com/');
p.add(13,10,'最新會員','http://n7197.66rt.com/');
p.add(14,10,'論壇公告','http://n7197.66rt.com/');
p.add(15,-1,'聯繫方式','','header','http://homepage8.seed.net.tw/web@5/n7197/20070902e.gif');
p.add(16,15,'MSN號碼','http://n7197.66rt.com/');
p.add(17,15,'電話號碼','http://n7197.66rt.com/');
p.add(18,15,'傳真號碼','http://n7197.66rt.com/');
p.add(19,15,'電子信箱','http://n7197.66rt.com/');
//alert(p.items.length)
document.write(p);
//p.toString();
//alert(p.items.length);
//delete(p);
</script> </td>
</tr>
</table>
</body>
</html>