中文字幕乱码人妻综合二区三区,色综合久久中文字幕综合网

　用javascript封裝的導(dǎo)航菜單

作者：littlephenix　時(shí)間： 2006-03-23　文檔類型：原創(chuàng)　來自：藍(lán)色理想

正好這幾天公司不忙，學(xué)校又沒有事情，所以想抽空架一個(gè)個(gè)人主頁(yè)，設(shè)計(jì)的時(shí)候想在主頁(yè)做一個(gè)酷酷的導(dǎo)航菜單，于是就上網(wǎng)找靈感。有一個(gè)網(wǎng)站的導(dǎo)航欄給我的印象不錯(cuò),于是就把網(wǎng)頁(yè)保存下來想研究一下它的js代碼，沒想到的是竟然是用.NET的自定義控件生成的！上面的代碼差點(diǎn)沒把我看暈過去�。ㄓ信d趣的話可以試一試哦，里面N多變量的～～～汗），還好大三時(shí)學(xué)過c＃（垃圾）加上它的控件可以試用，就下下來用了，感覺還真的不錯(cuò)，簡(jiǎn)單易用，可是～測(cè)試的時(shí)候差點(diǎn)沒昏了！NND試用版的竟然只能再本機(jī)測(cè)試，別人的PC訪問不但顯示不了網(wǎng)頁(yè)還警告說要注冊(cè)購(gòu)買�。。�！大哥的竟然還要$（本少爺每月實(shí)習(xí)補(bǔ)助才1千￥�。�，一怒之下決定自己封裝一個(gè)。參考了樹型菜單的js源碼，花了3天時(shí)間，終于第一版寫好了^_^
由于imags文件夾傳不上來，所以菜單背景的切換效果顯示不了^_^大家定制自己喜歡的樣式^_^

運(yùn)行代碼框
<!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 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> <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 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

PS：里面的script代碼和style樣式可以寫在單獨(dú)的js和css文件里。

經(jīng)典論壇討論帖：
http://www.95time.cn/bbs/NewsDetail.asp?id=1828107

出處：藍(lán)色理想
責(zé)任編輯：moby

◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論

相關(guān)文章

更多相關(guān)鏈接

jscript/javascript條件編譯

實(shí)現(xiàn)一個(gè)日期下拉菜單

基于 Ajax 的無限級(jí)菜單

flash8與javascript集成

web關(guān)聯(lián)菜單實(shí)現(xiàn)方法


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁(yè)制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大�！熬�•自然”設(shè)計(jì)大賽開啟

國(guó)際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行

中國(guó)國(guó)防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語(yǔ)言的編碼規(guī)范

如何在illustrator中繪制臺(tái)歷

Ps簡(jiǎn)單繪制一個(gè)可愛的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡(jiǎn)單的作品展示頁(yè)面

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開發(fā)項(xiàng)目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx