用Xslt/CSS/Xml/Javascript做标签-优快云博客

本文分享了一个利用XSLT格式化XML的示例代码，旨在帮助读者理解XSLT的工作原理并掌握其实现技巧。文章详细介绍了如何通过三层循环处理XML数据，包括布局、标签块及标签内容。

　　在周未的时间里，忙了两个小时，终于把示例代码写完了，虽然很累，但却很开心，因为我知道这个示例代码将会给很多人带来启发，它是有价值的，它的价值也将体现我的价值，不是么?

　　在你看这篇文章之前，我想唠叨几句，我希望你在看文章也好，看示例代码也好，着重是看其中的思想与技巧，举一反三，而不是直接拿代码就去使用了。或许你会有更好的实现方法，没关系，我希望我这篇文章能起到抛砖引玉的作用，让我们一起进步。看这篇文章，你可能需要具备一些基础的知识，如Javascript、CSS、Xslt、Xml，当然这不是必需的，如果你悟性比较高的话。闲话少讲，言归正传，follow me！让我们步入Xslt神奇的殿堂吧

　　首先，我们应该了解一下需求：

　　1、要求在一个页面中有若干个标签块(即是由若干个标签组成的区域)，并且通过Xslt格式化Xml

2、具备扩展性，标签及签块可以在xml中自由添加

3、鼠标移至不同的标签，会显示相应的内容

我们知道，程序最重要的是在规划，在做之前我们也应该要规划一下，我初步实现的思路是这样的，用xml描述布局、标签块及标签的信息，通过xslt循环布局信息，然后再循环标签块信息，再循环标签及内容信息。

这样就需要经过三层循环，最后一层循环需要两次循环，第一次是循环标签标题，第二次是循环标签内容。最后一层循环还需要做一个事情调用一个javascript函数，把当前标签块及内容块的元素ID，以便注册事件，关于这个函数的详细说明，请参考拙作用DIV+Javascript实现标签功能

现在我们重点来规划一下xml，xml的结构是否合理，直接影响到xslt的编写，首先我们看一下xml的基本结构，然后根据示例再作说明

 <?xml version="1.0" encoding="UTF-8"?>  
 <?xml-stylesheet type="text/xsl" href="index.xsl" ?>  
 <Root>  
  <!--栏目列表-->  
  <Columus Class="LeftSide">  
   <!--标签块列表-->  
   <Labels>  
    <!--相应的标签-->  
    <Label>  
     <Caption><![CDATA[标签1]]></Caption>  
     <Content><![CDATA[内容1]]></Content>  
    </Label>  
    <!--更多标签...-->  
   </Labels>  
   <!--更多的标签块...-->  
  </Columus>  
 <!--更多栏目...-->  
  </Root>

　　我们首先将页面采用三分栏的布局，用Columus节点来描述布局信息，并增加一个Class的属性；在每一个分栏中，会有若干个标签块，用Labels节点来描述标签块；在每一个标签块中，会有若干个标签，用Label节点来描述；而在每一个标签中，又会由一个标签标题及内容组成，我们用Caption描述标签标题，用Content描述内容信息。

转载于:https://www.cnblogs.com/conis/archive/2007/07/22/1720579.html