用javascript封装的导航菜单

2022-07-15 80酷酷网 80kuku.com

　　javascript|菜单|导航|封装

正好这几天公司不忙，学校又没有事情，所以想抽空架一个个人主页，设计的时候想在主页做一个酷酷的导航菜单，于是就上网找灵感。有一个网站的导航栏给我的印象不错,于是就把网页保存下来想研究一下它的js代码，没想到的是竟然是用.NET的自定义控件生成的！上面的代码差点没把我看晕过去！（有兴趣的话可以试一试哦，里面N多变量的～～～汗），还好大三时学过c＃（垃圾）加上它的控件可以试用，就下下来用了，感觉还真的不错，简单易用，可是～测试的时候差点没昏了！NND试用版的竟然只能再本机测试，别人的PC访问不但显示不了网页还警告说要注册购买！！！！大哥的竟然还要$（本少爷每月实习补助才1千￥啊），一怒之下决定自己封装一个。参考了树型菜单的js源码，花了3天时间，终于第一版写好了^_^
由于imags文件夹传不上来，所以菜单背景的切换效果显示不了^_^大家定制自己喜欢的样式^_^

运行代码框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Phenix PanelBar</title><script language="javascript">/*--------------------------------------------------|| Phenix PanelBar | www.seu.edu.cn ||---------------------------------------------------|| || I believe one day I can fly like phenix! || || Finished: 17.11.2004 ||--------------------------------------------------*///item object//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 objectfunction 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 arrayPhenMenu.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 pagePhenMenu.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 structurePhenMenu.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 textPhenMenu.prototype.itemCreate = function(pItem, itemId) {//alert(pItem.type.toLowerCase());var str = ''; if(pItem.type == 'header') str = '<table width="100%" class="header" valign="middle" ><tr><td>';elsestr = '<table width="100%" class="item" valign="middle" ><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 += ' ';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%" + ((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 siblingPhenMenu.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 closePhenMenu.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();}elsecTable.style.display = 'none';//cDiv.style.display = (status) ? 'block': 'none';};// Closes all items on the same level as certain itemPhenMenu.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><table width="221" border="0" cellspacing="0" cellpadding="0"> <tr> <td><p>Phenix panelbar</p><script type="text/javascript">p = new PhenMenu('p'); //alert("asds");p.add(0,-1,'label1凤凰','','header','http://www.telerik.com/images/ProductImages//e.gif');p.add(1,0,'label1.1凤凰','www.sina.com.cn');p.add(2,0,'label1.2','www.sina.com.cn');p.add(3,0,'label1.3','www.sina.com.cn');p.add(4,0,'label1.4','www.sina.com.cn');p.add(5,-1,'label2','','header','http://www.telerik.com/images/ProductImages//c.gif');p.add(6,5,'label2.1','www.seu.edu.cn');p.add(7,5,'label2.2','www.seu.edu.cn');p.add(8,5,'label2.3','www.seu.edu.cn');p.add(9,5,'label2.4','www.seu.edu.cn');p.add(10,-1,'label3','','header','http://www.telerik.com/images/ProductImages//m.gif');p.add(11,10,'label3.1','www.seu.edu.cn');p.add(12,10,'label3.2','www.seu.edu.cn');p.add(13,10,'label3.3','www.seu.edu.cn');p.add(14,10,'label3.4','www.seu.edu.cn');p.add(15,-1,'label4','','header','http://www.telerik.com/images/ProductImages//r.gif');p.add(16,15,'label4.1','www.seu.edu.cn');p.add(17,15,'label4.2','www.seu.edu.cn');p.add(18,15,'label4.3','www.seu.edu.cn');p.add(19,15,'label4.4','www.seu.edu.cn'); //alert(p.items.length)document.write(p);//p.toString(); //alert(p.items.length);//delete(p);</script></td> </tr></table></body></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

PS：里面的script代码和style样式可以写在单独的js和css文件里。