| 
 [RIA]根据xml生成menu |
这是我历经两天多的时间通过ie6，7，firefox，safari四个浏览器测试成功并且是用javascript读取xml动态生成html menu的东东，在此过程中，首先感谢我敬爱的老师稻草人对我无私的帮助，其次在此呼吁所有高手和达人们多多帮助那些刚刚入门学习的孩子们，你们对他的帮助胜过雨中送伞，雪中送炭的情，默默的传递了人间的爱。。。。。。。。。。。。。
html页面：（body之间是空的）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <head> <title>Generic Schmapplet Navigation</title> <meta content="text/html; charset=latin-1" http-equiv="Content-Type" /> <link href="main.css" rel="stylesheet" /> <link href="guidesmenu.xml" rel="guidesmenu" /> <script language="javascript" src="/common/lib/MochiKit.js" type="text/javascript"> </script> <script language="javascript" src="/common/base.js" type="text/javascript"> </script> <script language="javascript" src="/common/lib/xmldom.js" type="text/javascript"> </script> <script language="javascript" src="menu.js" type="text/javascript"> </script> </head> <body> </body></html>
menu。js：
var schmapplet = {view: 'menus',viewid:'guidesmenu', scrollOffset: 0, IEquirks: document.documentElement.style.filter !== undefined, menuById: {}};var bigMenus= new Array();var midMenus= new Array();var smallMenus= new Array();var m=0;var n=0;var scrollDirection_NO=0;var scrollDirection_UP=1;var scrollDirection_DOWN=-1;var scrollDirection=scrollDirection_NO;var scrollStep=4;var scrollTimerInterval=50;var b = navigator.userAgent.toLowerCase();// Figure out what browser is being usedvar browser = { safari: /webkit/.test(b), opera: /opera/.test(b), msie6: /msie 6.0/.test(b) && !/opera/.test(b), mozilla: /mozilla/.test(b) && !/(compatible|webkit)/.test(b)};function beforSetup(){ var nodes = document.getElementsByTagName('meta'); for(var i=0; i < nodes.length; i++) { var node = nodes[i]; if(node.name) schmapplet[node.name] = node.content; } nodes = document.getElementsByTagName('name'); for(var i=0; i < nodes.length; i++) { var node = nodes[i]; if(node.rel) schmapplet[node.rel] = node; } var nodes = document.getElementsByTagName('meta'); for(var i=0; i < nodes.length; i++) { var node = nodes[i]; if(node.name) schmapplet[node.name] = node.content; } nodes = document.getElementsByTagName('link'); for(var i=0; i < nodes.length; i++) { var node = nodes[i]; if(node.rel) schmapplet[node.rel] = node; } exception(); // }function bulidMenu(bigMenus){ var parent; for(var i=0;i<bigMenus.length;i++){ var b_text1 = bigMenus[i].text; var mm = bigMenus[i].midMenus.length; var parentPos = DIV({'id':'b_'+i,'class':'bigMenu'},DIV({'class':'mainTxt'},b_text1)); $('leftMenu').appendChild(parentPos); for(var j=0;j<mm;j++){ var pos; var b_text2 = bigMenus[i].midMenus[j].text; if((b_text2 =='')||(b_text2 == 'null')){ parentPos.appendChild(IMG({'id':'rigArrow',src:'/images/pageiconstest/arrow.gif'})); pos = parentPos; }else{ pos = DIV({'id':'b_'+i+'_'+j,'class':'bigMenu'},DIV({'class':'subTxt'},b_text2),IMG({id:'arrow',src:'/images/pageiconstest/arrow.gif'})); $('leftMenu').appendChild(pos); } createSubMenu(pos,bigMenus[i].midMenus[j]); connect(pos,'onmouseover',showSubMenu); connect(pos,'onmouseout',hideSubMenu); } }}function setupPage(data) { appendChildNodes(document.body, DIV({id:'main'}, DIV({id: 'leftMain'}, DIV({id: 'leftMain'}, IMG({id:'upper', src: '/images/pageiconstest/up.gif'}), IMG({id:'disup', src: '/images/pageiconstest/disup.gif',style:'display:none;'}), DIV({id: 'leftMenu'}), IMG({id:'down', src: '/images/pageiconstest/down.gif'}), IMG({id:'disdown', src: '/images/pageiconstest/disdown.gif',style:'display:none;'}) ) ), DIV({id:'rightMain'}) )); connect( $('upper'),'onmouseover',upMenu); connect( $('upper'),'onmouseout',clearUp); connect( $('down'),'onmouseover',downMenu); connect( $('down'),'onmouseout',clearDown); loadXML(schmapplet.guidesmenu.href); }function loadXML(xmlName){//Load the xml document which contains the information about the templates var xmlHttp, xmlDoc, xmlDom, xmlError; try{// Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e){// Internet Explorer try{ xmlHttp=new ActiveXObject("MSXML2.XMLHTTP.3.0"); }catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){ alert("Your browser does not support AJAX!"); } } } xmlHttp.open("GET", xmlName+"?rnd="+Math.random(), false); xmlHttp.send(null); xmlDom = new XMLDoc(xmlHttp.responseText, xmlError); xmlDoc = xmlDom.docNode; getTemplatesInfo(xmlDoc);}function getTemplatesInfo(xml){//parse xml var t_elements = xml.getElements("L1Entry"); var bigMenus =new Array(); for(var i=0;i<t_elements.length;i++){ var bigMenu ={}; var t_node = t_elements[i]; var L2Entry; var L1EntryTxt = t_node.getElements("Text")[0].getText(); var L1SubEntry = t_node.getElements("L1SubEntry"); var midMenus =new Array(); for(var j=0;j<L1SubEntry.length;j++){ var midMenu ={}; var L1SubEntryTxt = L1SubEntry[j].getElements("Text")[0].getText(); var subMenu = L1SubEntry[j].getElements("SubMenu"); L2Entry= subMenu[0].getElements('L2Entry'); var smallMenus =new Array(); for(var ii=0;ii<L2Entry.length;ii++){ var smallMenu={}; var text = L2Entry[ii].getElements('Text')[0].getText(); var link = L2Entry[ii].getElements('Link')[0].getText(); var count = L2Entry[ii].getElements('Count')[0].getText(); smallMenu.text = text; smallMenu.link =link; smallMenu.count =count; smallMenus.push(smallMenu); } midMenu.text = L1SubEntryTxt; midMenu.smallMenus=smallMenus; midMenus.push(midMenu); } bigMenu.text = L1EntryTxt; bigMenu.midMenus =midMenus; bigMenus.push(bigMenu); } bulidMenu(bigMenus); }function createSubMenu(pos,parent){ $('rightMain').innerHTML=''; if(parent.smallMenus.length>0) { var current = DIV({'class':'floatMenu'}); current.id = 's_'+pos.id; for(var i=0;i<parent.smallMenus.length;i++){ var text = parent.smallMenus[i].text; var link = parent.smallMenus[i].link; var count = parent.smallMenus[i].count; if(count.length > 0){ var linkText= text+' '+'('+count+')'; }else{ var linkText= text; } var linkUrl = link; var childNodes =DIV({'class':'subItem'},A({'target':'_blank','href':linkUrl},linkText)); current.appendChild(childNodes); pos.appendChild(current); } }}function setPosition(pos1,pos2){ var base = getElementPosition(pos1).y; var hh = getElementDimensions(pos2).h; var mainHeight = getElementDimensions('leftMenu').h-$('leftMenu').scrollTop; if(base + hh >mainHeight){ var tem=base-hh-base; setElementPosition(pos2,{y:tem}); }}function showSubMenu(){ if(browser.msie6){ this.style.overflow = "hidden"; } showElement('s_'+this.id); setPosition(this,'s_'+this.id); this.style.backgroundColor='#FFEA97';}function hideSubMenu(){ if(browser.msie6){ this.style.overflow = "visible"; } hideElement('s_'+ this.id); this.style.backgroundColor='#ffffff';}function upMenu(){ scrollDirection=scrollDirection_UP;}function downMenu(){ scrollDirection=scrollDirection_DOWN;}function clearUp(){ scrollDirection=scrollDirection_NO;}function clearDown(){ scrollDirection=scrollDirection_NO;}function exception(){ var xmlHttp, xmlDoc, xmlDom, xmlError,xmlname; if(typeof(template) != "undefined"){ xmlname='/'+userID+'/'+schmapletID+'/'+schmapplet.TemplateCode+'exceptions.xml'; }else{ xmlname=schmapplet.TemplateCode+'exceptions.xml'; } try{// Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e){// Internet Explorer try{ xmlHttp=new ActiveXObject("MSXML2.XMLHTTP.3.0"); }catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){ alert("Your browser does not support AJAX!"); } } } xmlHttp.open("GET", xmlname+"?rnd="+Math.random(), false); xmlHttp.send(null); if(xmlHttp.status==200) { xmlDom = new XMLDoc(xmlHttp.responseText, xmlError) xmlDoc = xmlDom.docNode; getException(xmlDoc); }else setupPage(); }function getException(xml){//Create an object that bind information of each template into an object. if(xml.getElements("MapIconsDir")!=''){ var MapIconsDir=xml.getElements("MapIconsDir")[0].getText(); mapiconspath=MapIconsDir;} var t_elements = xml.getElements("IconFile"); for(var i=0;i<t_elements.length;i++){ var t_node = t_elements[i]; var piconname= t_node.getElements("code")[0].getText(); var piconurl= t_node.getElements("url")[0].getText(); _global[piconname]=piconurl; } var t_elements = xml.getElements("PageParams"); if(t_elements!='') for(var i=1;i<t_elements[0].children.length;i=i+2) { var x=t_elements[0].children[i].tagName; var y=t_elements[0].children[i].getText(); _global[x]=y; }}connect(window, 'onload', beforSetup); setInterval(processScrolling,scrollTimerInterval); function processScrolling(){ var scroolRange=$('leftMenu').scrollHeight-getElementDimensions($('leftMenu')).h; switch(scrollDirection) { case scrollDirection_NO: break; case scrollDirection_UP: if(scroolRange>$('leftMenu').scrollTop) if(scroolRange-$('leftMenu').scrollTop>scrollStep) $('leftMenu').scrollTop+=scrollStep; else $('leftMenu').scrollTop+=scroolRange; break; case scrollDirection_DOWN: if($('leftMenu').scrollTop>0) if($('leftMenu').scrollTop>scrollStep) $('leftMenu').scrollTop-=scrollStep; else $('leftMenu').scrollTop=0; break; } if($('leftMenu').scrollTop==0) { $('down').style.display='none'; $('disdown').style.display=''; }else{ $('down').style.display=''; $('disdown').style.display='none'; } if($('leftMenu').scrollHeight-getElementDimensions($('leftMenu')).h==$('leftMenu').scrollTop) { $('upper').style.display='none'; $('disup').style.display=''; }else{ $('upper').style.display=''; $('disup').style.display='none'; }}connect(window, 'onresize', mainAlign);var defaultMainHeight = 500;var defaultMenuHeight = 450;function mainAlign(){ var mainh = Math.min(document.documentElement.clientHeight-10, defaultMainHeight); var menuh = Math.min(document.documentElement.clientHeight-60, defaultMenuHeight); setElementDimensions('main', {h:mainh}); setElementDimensions('rightMain', {h:mainh}); setElementDimensions('leftMenu', {h:menuh});}main。css
html, body { background-color: transparent; font-family: Bitstream Vera Sans, Verdana, Arial, sans; overflow-y: auto; overflow-x: auto; padding: 0px; margin: 0px; font-size:10px;}a:link{ color: #A9A241; text-Decoration:underline;}a:visited, a:active ,a:hover { color: #0000FF;}#main{ height:500px; width:600px; border:1px solid #F5F0E7; overflow:hidden;}#upper,#down{ margin-left:120px; margin-right:120px;}#leftMain{ height:500px; width:250px; border-right:1px solid #F5F0E7;
}#rightMain{ display:block; left:250px; border-right:1px solid #F5F0E7; border-top:1px solid #F5F0E7; border-bottom:1px solid #F5F0E7; width:250px; padding-left:10px; padding-right:10px;}#leftMenu{ padding-left:10px; height:435px; margin-top:20px; margin-bottom:20px;}.subItem{ height:20px;}#mainItem{ height:20px; width:100%;}.bigMenu{ height:20px; vertical-align: middle;}.mainTxt{ font-weight:bold; color:#A9A241; padding-left:5px; width:150px;}.subTxt{ float:left; height:20px; width:120px; padding-left:45px; text-align:left; color:#A9A241; }#rigArrow{ float:left; margin-top:-10px; margin-left:230px;}#arrow{ float:right; padding-right:5px; margin-top:5px;}其次的javascript都是用到了mochikit等js lib:网上随处可见，在此不声明了，因为我在上班，怕老板过来，匆匆经过，有需要的找我
|
|
|
| 
|  .: 公告
|
| 
| « | November 2025 | » | | 日 | 一 | 二 | 三 | 四 | 五 | 六 | | | | | | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | | | | | | | |
|
.: 我的分类(专题) |
| 
.: 最新日志
.: 最新回复
|
| 
blog名称:up forever
日志总数:130
评论数量:274
留言数量:4
访问次数:1955616
建立时间:2006年5月25日 |
|
.: 留言板 |
.:  链接 |
|