CSS Accordion 使用 XML/XSLT 文件中的数据
Posted
技术标签:
【中文标题】CSS Accordion 使用 XML/XSLT 文件中的数据【英文标题】：CSS Accordion using data from XML/XSLT Files 【发布时间】：2014-03-31 13:10:49 【问题描述】：好的，事情就是这样，我有一个带有手风琴风格的 html/CSS 文件，我们正在将其用于项目。
我需要从我正在使用 XSLT 测试的 XML 文件中提取数据
见下面的代码： XML
<?xml version="1.0" encoding="UTF-8"?>
<!-- Edited by XMLSpy -->
<catalog>
<cd>
<Supplier>Empire Burlesque</Supplier>
<Info>Some basic info on the Supplier </Info>
<Email>email@mail.com </Email>
<Phone>1-868-555-5555</Phone>
<Image>http://scmedia.theknot.com/~/media/EDA74AC2F5C34074A02CA053E968547D.ashx</Image>
</cd>
</catalog>
这是 XSLT 代码：
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<xsl:for-each select="catalog/cd">
<div>
<div style="height:auto;width:265px;"></div>
<div style="clear:both"/>
<div style="padding-right:5px; padding-left:5px; padding-top:10px; padding-bottom:10px"><div style="font-style: italic; color: #E50AC2; font-size: 16px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8);"><xsl:value-of select="Supplier"/></div></div>
<div style="float:left; padding-right:5px; padding-left:5px;">
<xsl:element name="img">
<xsl:attribute name="src">
<xsl:value-of select="Image"/>
</xsl:attribute>
<xsl:attribute name="align">left</xsl:attribute>
</xsl:element>
</div>
<div style="font-style: italic; color: #777; font-size: 12px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8);"><xsl:value-of select="Info"/></div>
</div>
<div style="font-style: italic; color: #777; font-size: 12px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8);"><xsl:value-of select="Email"/> | <xsl:value-of select="Phone"/></div>
</div>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
我想使用这款手风琴：http://tympanus.net/Tutorials/CSS3Accordion/ 我已经用我自己的样式编辑了上面这个文件的版本，我只需要知道如何使用 Accordion Html/CSS 文件并从 XML 文件中提取数据
非常感谢
【问题讨论】：
【参考方案1】：使用以下流程：
复制手风琴 HTML 在link 标记中包含手风琴 CSS
包裹在simplified syntax
使用xsl:for-each 创建列表
例如：
<html xsl:version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/TR/xhtml1/strict">
<head>
<title>Expense Report Summary</title>
<link href="foo.css"/>
</head>
<body>
<p>Total Amount: <xsl:value-of select="expense-report/total"/></p>
<xsl:for-each select="//*">
<!--...-->
</xsl:for-each>
</body>
</html>
【讨论】：
以上是关于CSS Accordion 使用 XML/XSLT 文件中的数据的主要内容，如果未能解决你的问题，请参考以下文章
XSLT 使用 xslt 2.0 或更高版本将纯文本文件处理为 XML
如何使用 xslt 获取 XML 的属性值和代码作为 html 的值