首页 新闻 论坛 群组 Blog 文档 下载 读书 Tag 网摘 搜索 .NET Java 游戏 视频 人才 外包 培训 数据库 书店 程序员
中国软件网
欢迎您:游客 | 登录 注册 帮助
  • 求js+xml生成下拉带二级导航条的代码 [已结贴,结贴人:xiaoniqiu]
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • xiaoniqiu
    • 等级:
    发表于:2007-11-12 10:24:16 楼主
    如题,想做一个非树形的读取xml生成下拉菜单式的导航条,搞了良久实现不了。上来求助!
    50  修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • xiaoniqiu
    • 等级:
    发表于:2007-11-12 11:40:531楼 得分:0
    难道这个问题很难吗?
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • xiaoniqiu
    • 等级:
    发表于:2007-11-12 14:52:432楼 得分:0
    为求答案,继续up
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • tantaiyizu
    • 等级:
    发表于:2007-11-12 17:03:203楼 得分:2
    难道这个问题很难吗?
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-12 18:04:014楼 得分:5
    是这样的不?
    <select name="selID" id="selID" style="width:100px"> </select>
    JScript code
    <script language="javascript"> var v1='a,1|b,2|c,3|d,4|a,1|b,2|c,3|d,4';//此数据从XML中读取^ var obj=document.getElementById('selID'); var v2=v1.split('|'); for(var i=0;i<v2.length;i++){ var v3=v2[i].split(','); obj.options.add(new Option(v3[0],v3[1])); } obj.onchange=function(){alert(this.value)}; </script>
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-12 18:13:535楼 得分:0
    不好意思看错了,你要的是这种效果吧:
    http://www.02dz.cn/t/
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • xiaoniqiu
    • 等级:
    发表于:2007-11-13 17:24:426楼 得分:0
    对呀,对呀。效果是这个样子的,但是不是要的那种单纯js写成的,因为我想把链接跟文字存储到xml中读出来,这样以后只改写xml就可以了!楼上有代码吗?
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-13 17:35:047楼 得分:1
    我写过下拉列表多级联动的,这个应该类似!
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-13 17:35:518楼 得分:0
    xmlTest.css  ---------------------------------------------
    CSS code
    @import url("http://style.china.alibaba.com/css/blog/alicn_bb.css?t=0708241"); table{+margin:-1px;border-collapse:collapse;} .wnav dl.fc{zoom:1;padding-left:0px;height:auto;line-height:18px;background:#fff;} .wnav dl.fc dd{position:relative;float:left;display:inline;margin-left:0px;margin-right:3px;text-align:center;cursor:pointer;background:#6699CC;} .wnav dl.fc dd a{position:relative;float:left;display:block;height:100%;width:80px;padding:0px 14px;border:1px solid #000;z-index:3} .wnav dl.fc dd a:link, dl.fc dd a:visited{background:#fff;} .wnav dl.fc dd a:hover{color:#fff;background:transparent;} * +html .wnav dl.fc dd a:active{+color:#000;+background:#fff;} .wnav dl.fc dd a.hov{border-bottom:none;font-weight:bold;line-height:19px;color:#000 !important;background:#fff url(http://img.china.alibaba.com/images/unsort/graybrim.gif) left repeat-y !important;cursor:default} .wnav dl.fc dd .us a{float:none;padding:0px;border:none;text-align:left;width:auto;} .wnav .us {position:absolute;line-height:19px;border:1px solid #000;border-bottom:none;width:140px;background:#fff url(http://img.china.alibaba.com/images/unsort/graybrim.gif) left repeat-y;z-index:2} .wnav .us ul{zoom:1;margin:5px 0px 0px 0px;padding:0px 0px 5px 0px;border-bottom:1px solid #000} .wnav .us li{position:relative;vertical-align:middle;} .wnav dl.fc dd .us li{_width:100%;_overflow:hidden;} .wnav dl.fc dd .us li a{display:block;padding-left:25px;height:100%;vertical-align:middle;} .wnav dl.fc dd .us li a:link, .wnav .us li a:visited{background:transparent;} .wnav dl.fc dd .us li a:hover{color:#808080;background:#D7D6E8;} .wnav dl.fc dd .us li a.hc:link, .wnav .us li a.hc:visited{background:url(http://img.china.alibaba.com/images/unsort/triang_r.gif) 132px 5px no-repeat;} .wnav dl.fc dd .us li a.hc:hover{background:#D7D6E8 url(http://img.china.alibaba.com/images/unsort/triang_r.gif) 135px 6px no-repeat;} .wnav dl.fc dd a{width:80px;} .wnav .us{display:block;left:140px;top:0px;margin-top:0px} .wnav .us_t{display:block;left:0px;top:auto;margin-top:19px} .wnav table{display:none;_display:block} .wnav dl.fc dd .us li:hover > table{display:block;margin-bottom:0px;} .wnav dl.fc dd .us li.hover {_overflow:visible;}



    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-13 17:36:599楼 得分:40
    xmlTest.xsl  ---------------------------------------------

    HTML code
    <?xml version="1.0" encoding="gb2312"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:bookObj="http://my_object" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:dah="urn:my-scripts"> <xsl:output method="html" omit-xml-declaration="yes" indent="yes" /> <!-- omit-xml-declaration="yes" : 忽略 xml 声明 indent="yes" : 缩进元素 --> <!--根节点 模板 开始--> <xsl:template match="/"> <div class="wnav"> <!-- 导航总目 start --> <dl id="fc" class="fc ll lk_n"> <xsl:for-each select="root/org"> <xsl:variable name="strOrgName" select="@oName" /> <xsl:variable name="strOrgValue" select="@oID" /> <dd><xsl:element name="a"> <xsl:attribute name="id">fc_<xsl:number value="position()-1" format="1" /></xsl:attribute> <xsl:attribute name="href">#</xsl:attribute> <xsl:attribute name="val"><xsl:value-of select="$strOrgValue" /></xsl:attribute> <xsl:attribute name="valo"><xsl:value-of select="$strOrgValue" /></xsl:attribute> <xsl:attribute name="title"><xsl:value-of select="$strOrgName" /></xsl:attribute> <xsl:value-of select="$strOrgName" /> </xsl:element> <xsl:if test="org"> <!-- 无限级子目 start --> <xsl:element name="div"> <xsl:attribute name="id">fc_<xsl:number value="position()-1" format="1" />_us</xsl:attribute> <xsl:attribute name="class">us us_t lk_n dn</xsl:attribute> <ul> <xsl:apply-templates /> </ul> </xsl:element> <!-- 无限级子目 end --> </xsl:if> </dd> </xsl:for-each> </dl> <!-- 导航总目 end --> <div class="c"></div> </div> </xsl:template> <!--根节点 模板 结束--> <!--无限节点 模板 开始--> <xsl:template match="root/org//org"> <xsl:variable name="strOrgName" select="@oName" /> <xsl:variable name="strOrgValue" select="@oID" /> <li onmouseover="liOverforIE6(this)" onmouseout="liOutforIE6(this)"> <xsl:choose> <xsl:when test="org"> <xsl:element name="a"> <xsl:attribute name="class">hc</xsl:attribute> <xsl:attribute name="href">#</xsl:attribute> <xsl:attribute name="val"><xsl:value-of select="$strOrgValue" /></xsl:attribute> <xsl:attribute name="title"><xsl:value-of select="$strOrgName" /></xsl:attribute> <xsl:value-of select="$strOrgName" /> </xsl:element> <table cellpadding="0" cellspacing="0"><tr><td> <!-- 无限级子目 start --> <div class="us"> <ul> <xsl:apply-templates /> </ul> </div> <div class="c"></div> <!-- 无限级子目 end --> </td></tr></table> </xsl:when> <xsl:otherwise> <xsl:element name="a"> <xsl:attribute name="href">#</xsl:attribute> <xsl:attribute name="val"><xsl:value-of select="$strOrgValue" /></xsl:attribute> <xsl:attribute name="title"><xsl:value-of select="$strOrgName" /></xsl:attribute> <xsl:value-of select="$strOrgName" /> </xsl:element> </xsl:otherwise> </xsl:choose> </li> <xsl:if test="@gpend=1"> </xsl:if> </xsl:template> <!--无限节点 模板 结束--> </xsl:stylesheet>


    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-13 17:40:3410楼 得分:0
    xmlTest.xml  -------------------------------------
    HTML code
    <?xml version="1.0" encoding="gb2312"?> <root> <org oName="化工" oID="022" hsChild="1"> </org> <org oName="塑料" oID="030" hsChild="1"> </org> <org oName="石油" oID="032" hsChild="1"> <org oName="市场报价" oID="032003" hsChild="1"> <org oName="国际原油油品" oID="032003001" hsChild="1"> <org oName="际原油-收盘价格细报" oID="032003001001"></org> <org oName="国际原油-盘中时时报价" oID="032003001002"></org> <org oName="国际原油-分析" oID="032003001003"></org> <org oName="国际油品-价格" oID="032003001004"></org> <org oName="国际原油-收盘价格早报" oID="032003001006"></org> </org> <org oName="汽柴油" oID="032003002"> <org oName="汽柴油-华北市场行情分析" oID="032003002001"></org> <org oName="汽柴油-北京价格及评述" oID="032003002002"></org> </org> <org oName="液化气" oID="032003003"> <org oName="LPG-国际液化气价格" oID="032003003001"></org> <org oName="LPG-东北市场走势分析" oID="032003003002"></org> </org> <org oName="燃料油" oID="032003004"> <org oName="燃料油-国际收盘价格" oID="032003004001"></org> </org> <org oName="石油焦" oID="032003005"> <org oName="石油焦-东北市场报价" oID="032003005001"></org> </org> <org oName="沥青" oID="032003006"> <org oName="沥青-华北沥青市场报价" oID="032003006002"></org> </org> <org oName="溶剂油" oID="032003007"> <org oName="溶剂油-东北市场报价" oID="032003007001"></org> </org> <org oName="石蜡" oID="032003008"> </org> <org oName="润滑油" oID="032003009"> <org oName="润滑油-基础油报价" oID="032003009001"></org> <org oName="润滑油-成品油报价" oID="032003009002"></org> </org> </org> </org> <org oName="测试分类" oID="088" hsChild="1"> </org> </root>
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2007-11-13 17:41:4611楼 得分:0
    xmlTest.js -----------------------------------
    JScript code
    //浏览器识别 var Browser = { 'isIE' : (navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0), 'isIE6' : (document.all && !window.XMLHttpRequest) , 'isIE7' : (document.all && window.XMLHttpRequest) , 'isFirefox' : navigator.userAgent.indexOf('Firefox') >= 0, 'isOpera' : navigator.userAgent.indexOf('Opera') >= 0 }; function createXML(u,f){ var xmlDom,pi if (window.ActiveXObject) xmlDom=new ActiveXObject("Microsoft.XMLDOM"); else if (document.implementation&&document.implementation.createDocument) xmlDom=document.implementation.createDocument("","",null); xmlDom.async = f || false xmlDom.preserveWhiteSpace=true; if(u!="" && u!=null) xmlDom.load(u) return xmlDom } //返回值为转化为处理器oXslProcessor, 调用完该函数后, 可以视情形载入新的object function cXML_to_HTML(xmlPath,xslPath){ if(Browser.isIE){ var oXmlDom = createXML(xmlPath) var oXslDom = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0"); oXslDom.async = false; oXslDom.load(xslPath) //创建XSL模板对象 var oXslTemplate = new ActiveXObject("Msxml2.XSLTemplate.3.0"); oXslTemplate.stylesheet = oXslDom var oXslProcessor = oXslTemplate.createProcessor(); oXslProcessor.input = oXmlDom; oXslProcessor.transform(); oXslProcessor.transform() return oXslProcessor.output //......调用完该函数后, 可以视情形载入新的object }else if(Browser.isFirefox){ var oXmlDom = createXML(xmlPath) var oXslDom = createXML(xslPath) var oXsltProcessor = new XSLTProcessor() oXsltProcessor.importStylesheet(oXslDom) var oNewDom = oXsltProcessor.transformToDocument(oXmlDom) var oSerializer = new XMLSerializer() return oSerializer.serializeToString(oNewDom) } } function addEvent(el,eventType,fn){ if(el.addEventListener){ el.addEventListener(eventType,fn,false); }else if(el.attachEvent){ el.attachEvent("on" + eventType,fn); }else{ el["on"+eventType]=fn; } } addEvent(window,'load',new Function("fcInitialize('fc')")) addEvent(window,'load',new Function("aLnkInitialize('fc')")) function fcInitialize(nm){ var ula = document.getElementById(nm) var lisa = ula.getElementsByTagName('dd') var i for(i=0; i<lisa.length; i++){ //lisa[i].setAttribute('num',i) var tmp if(tmp = document.getElementById(nm+'_'+i)){ tmp.onclick = function(){ this.innerHTML = this.getAttribute('title') this.setAttribute('val',this.getAttribute('valo')) var fc = document.getElementById(nm) if(fc.getAttribute('curr') && fc.getAttribute('curr') != this.id){ var b = document.getElementById(fc.getAttribute('curr')) b.className = '' b.innerHTML = b.title b.setAttribute('val',b.getAttribute('valo')) document.getElementById(fc.getAttribute('curr')+'_us').className += ' dn' } var us = document.getElementById(this.id+'_us') if(us && us.className.match(/(\s)*dn(\s)*/g)){ this.className = 'hov' us.className = us.className.replace(/(\s)*dn(\s)*/g,' ') fc.setAttribute('curr',this.id) }else if(us){ this.className = '' us.className += ' dn' //this.blur() } return false } } } } function aLnkInitialize(nm){ var ula = document.getElementById(nm) var lnks = ula.getElementsByTagName('a') for(var i=0; i<lnks.length; i++){ if(!lnks[i].id){ lnks[i].onclick = function(){ var u = upback(this) } } } }