导航组件实现:XML+XSLT+jQuery Accordion

隐身守侯 提交于 2020-02-20 00:39:57
1、xml数据格式(数据动态生成):

1<?xml version="1.0" encoding="utf-8" ?>
2<menu>
3  <item text="Menu1" url="../default.aspx"/>
4  <item text="Menu2" url="#">
5    <subitem text="Menu21" url="http://www.baidu.com"/>
6    <subitem text="Menu22" url="http://www.eric.com"/>
7  </item>
8</menu>
2、XSL文件内容:

 1<?xml version="1.0" encoding="utf-8"?>
 2<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 3    xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl">
 4    <xsl:output method="html" encoding="utf-8" indent="yes"/>
 5    <xsl:template match="/">
 6      <ul id="navigation" class="menu collapsible">
 7        <xsl:for-each select="//menu/item">
 8          <li>
 9            <class="head" target="rightmain">
10              <xsl:attribute name="href">
11                <xsl:value-of select="@url"/>
12              </xsl:attribute>
13              <xsl:value-of select="@text"/>
14            </a>
15            <xsl:variable name="subItems" select="subitem"/>
16            <xsl:if test="count($subItems) &gt; 0">
17              <ul style="display:none;">
18              <xsl:for-each select="subitem">
19                  <li>
20                    <target="rightmain">
21                      <xsl:attribute name="href">
22                        <xsl:value-of select="@url"/>
23                      </xsl:attribute>
24                      <xsl:value-of select="@text"/>
25                    </a>
26                  </li>                
27              </xsl:for-each>
28              </ul>
29            </xsl:if>
30          </li>
31        </xsl:for-each>        
32      </ul>
33    </xsl:template>
34</xsl:stylesheet>
35
3、目标html代码,为jQuery Accordion的js所用(可以使用上文中提及的jQuery组件):

1<ul id="navigation" class="menu collapsible">
2  <li><class="head" target="rightmain" href="../default.aspx">Menu1</a></li>
3  <li><class="head" target="rightmain" href="#">Menu2</a>
4    <ul style="display:none;">
5      <li><target="rightmain" href="http://www.baidu.com">Menu21</a></li>
6      <li><target="rightmain" href="http://www.eric.com">Menu22</a></li>
7    </ul>
8  </li>
9</ul>
4、用于生成menu的c#代码(其他语言的代码类似):

 1        XslCompiledTransform xsl = new XslCompiledTransform();
 2        xsl.Load(xslPath);
 3        MemoryStream msIn = new MemoryStream(Encoding.UTF8.GetBytes(strXML));
 4        MemoryStream msOut = new MemoryStream();
 5        msIn.Position = 0;
 6        XmlTextReader trInput = new XmlTextReader(msIn);
 7        XmlWriter twOutput = XmlWriter.Create(msOut, xsl.OutputSettings);
 8        xsl.Transform(trInput, twOutput);
 9        trInput.Close();
10        msIn.Close();
11        msOut.Position = 0;
12        StreamReader sr = new StreamReader(msOut);
13        String xmlStr = String.Format("{0}", sr.ReadToEnd());
14        msOut.Close();
15        sr.Close();
16        return xmlStr;
可以不用复杂的服务端NavBar的实现了,简单动态的导航组件就实现了,简易的状态还是可以维护的,
复杂的应用场景可能得令作些工作了.




标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!