实际是XSLT 的解析脚本,在IE和FireFox 中都可以良好的运行!
源代码
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:function="http://www.infopro.cn/epservernamespace" xmlns:msxsl="urn:schemas-microsoft-com:xslt" > <xsl:template match="/"> <html> <head> <!--""" StatCVS 分析结果XML 快速XSLT模板 Zoomq::041227 使用 CSS+JS 进行点击支持 $Id: weeklystat.xsl,v 1.5 2005/01/04 10:34:45 zhouqi Exp $ """--> <title>新浪·研发·邮件-CVS周活动统计 @ FreeBSD+Python+XML</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="sinaeye.ico" rel="shortcut icon" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script language="JavaScript" > //o=document.getElementById('xxx');o.style.display=o.style.display=='none' ? '' : 'none' function _showDIV(divID){ var _obj = document.getElementById(divID); //alert(divID+"\n"+_obj); _obj.style.display = (_obj.style.display=='none')? '' : 'none'; return; } </script> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" > <xsl:for-each select="root"> <xsl:for-each select="week"> <h1 style="cursor : hand"> <xsl:attribute name="onclick"> _showDIV("stat-<xsl:value-of select="@date" />"); </xsl:attribute> CVS活动周分析 截止日期<xsl:value-of select="@date" /> </h1> <ul> <li>总更新文件数: <xsl:value-of select="@files" /> </li> <li>总提交修改数: <xsl:value-of select="@commits" /> </li> <li>总涉及码行数: <xsl:value-of select="@lines" /> </li> <li> <div style="border : 1px dotted #ede; display : none;"> <xsl:attribute name="id">stat-<xsl:value-of select="@date" /></xsl:attribute> <ul> <xsl:for-each select="cvs"> <h3 style="cursor : hand"> <xsl:attribute name="onclick"> _showDIV("cvs-<xsl:value-of select="../@date" />-<xsl:value-of select="@name" />"); //alert("cvs-<xsl:value-of select="@name" />"); </xsl:attribute> <xsl:value-of select="@name" /> 库 中:</h3> <li>总更新文件数: <xsl:value-of select="@files" /> </li> <li>总提交修改数: <xsl:value-of select="@commits" /> </li> <li>总涉及码行数: <xsl:value-of select="@lines" /> </li> <li> <ul> <div style="border : 0px dotted #993300; display : none; background-color : #336699; color:#fff;"> <xsl:attribute name="id">cvs-<xsl:value-of select="../@date" />-<xsl:value-of select="@name" /></xsl:attribute> <xsl:for-each select="module"> <h5>模块 <xsl:value-of select="@name" /> 更新细节:</h5> <li>更新文件数: <xsl:value-of select="@files" /> </li> <li>提交修改数: <xsl:value-of select="@commits" /> </li> <li>涉及码行数: <xsl:value-of select="@lines" /> </li> </xsl:for-each> </div> </ul> </li> </xsl:for-each> </ul> </div> </li> </ul> </xsl:for-each><!--week loop--> </xsl:for-each><!--root--> <!-- end of Page--> </body> </html> </xsl:template> </xsl:stylesheet>
要说
哈哈哈!老本行!快速的实现!
XSL
- 解析XML最自然的方式!
简要的算子介绍:
<xsl:for-each select="root">
- for-each 循环匹配,找所有的root 结点!
- 可以使用 XPath 声明
比如说select="//week" 就是要搜索所有层次中的week 结点
比如说select="week[@name='foo']" 就是要搜索当前层次中有name属性值为"foo"的week节点!
比如说select="/root/week/module" 绝对路径,标识,搜索所有 root中的week中的 module 结点
<xsl:value-of select="@files" />
- 取值处理 也是 XPath 的声明
比如说select="." 取当前结点的文本
比如说select="@files" 取当前结点的files属性值
- 取值处理 也是 XPath 的声明
<xsl:attribute name="id">cvs-<xsl:value-of select="../@date" />-<xsl:value-of select="@name" /></xsl:attribute>
- attribute 附加属性处理
以上是为当前的HTML 之 <div> 层结点附加 id 属性
- 运行结果等于
<div id="解析出的XML信息组合为的值 cvs-时间-当前模块名">
- attribute 附加属性处理
- 其实就这三个动作就足以完成 99%的解析任务了!
XSLT
- 这里解析脚本是声明为 XSLT的!
{{{<xsl:stylesheet
version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:function="http://www.infopro.cn/epservernamespace" xmlns:msxsl="urn:schemas-microsoft-com:xslt">
- }}}
- XSLT 是升级版本的XSL 脚本,极大的扩展了一些处理
- 比如说,可以自动识别奇偶来进行相应处理:
{{{<xsl:for-each select="ContentList">
<div class="slotBody"><xsl:if test="position() mod 2 = 0">
<xsl:attribute name="id">even</xsl:attribute></xsl:if>
- ..
}}} -- position() mod 2 = 0 计算当前结点在集合中的位置,来动态的设置CSS,实现交错的视觉效果
JS
{{{<script language="JavaScript" >
//o=document.getElementById('xxx');o.style.display=o.style.display=='none' ? : 'none' function _showDIV(divID){ _obj.style.display = (_obj.style.display=='none')?
: 'none'; return;
} </script>}}}
- 从尝试中可以看到IE 与 Mozilla 系统的兼容处理
- HTML dom 的解析,两者有共同的 getElementById() 函式!
- 只要输出的HTML相配合,为每一层次的统计信息套上有唯一性的ID 的div
- 就可以在适当的地方添加onClick 点击行为,来展开|关闭 层,实现页面的友好动态效果!!!
CSS
- 不用多说!一切感观的控制都靠她了!
/style.css -- 也是基本通用的CSS框架式脚本
-- ZoomQuiet [2005-01-05 11:27:12]