编写另外一个显示页面view4.html，该页面主要显示的是查询指定信息的显示页面，该页面的显示中有三个样式供我们选择。首先我们创建三个样式文件，打开记事本，在里面输入下面的代码：
实例代码11-15
<?xml version="1.0" encoding="gb2312"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head><title>使用不同的样式</title></head>
<body>
<table border="1">
<xsl:for-each select="客户表/客户">
<tr>
<xsl:apply-templates/>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="*">
<td> <font color="red"><xsl:node-name/></font></td>
<td> <font color="blue"><xsl:value-of/></font></td>
</xsl:template>
</xsl:stylesheet>
将该文件保存，文件名为cha1.xsl。这个文件主要是定义XML文件显示的样式。这个文件使用了两个模板，第一个为根模板，第二个模板匹配于任何一个标记。在第二个模板中定义显示的样式，首先使用“<xsl:node-name/>”显示的是该节点的名称，然后使用“<xsl: value-of/>”才显示节点的值。创建第二个XSL文件，打开记事本，在里面输入下列代码：
实例代码11-16
<?xml version="1.0" encoding="gb2312"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head><title>使用不同的样式</title></head>
<body>
<table border="1">
<xsl:for-each select="客户表/客户">
<tr>
<xsl:apply-templates/>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="*">
<td><font color="green"><xsl:node-name/></font></td>
<td><a href=""><b><xsl:value-of/></b></a></td>
</xsl:template>
</xsl:stylesheet>
保存该文件，文件名为cha2.xsl，文件保存的位置在Example文件夹下，该例子的模板和cha1.xsl中模板结构一样，只不过样式不同罢了。打开记事本，创建第三个样式文件，在里面输入下列代码：
实例代码11-17
<?xml version="1.0" encoding="gb2312"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head><title>使用不同的样式</title></head>
<body bgcolor="#ffff">
<table border="1">
<xsl:for-each select="客户表/客户">
<tr>
<xsl:apply-templates/>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="*">
<td> <font color="red"><xsl:node-name/></font></td>
<td> <font color="blue"><s><xsl:value-of/></s></font></td>
</xsl:template>
</xsl:stylesheet>
将该文件保存，文件名为cha3.xsl，文件保存的位置在Example文件夹下。样式文件创建完毕后，创建HTML文件，打开记事本，在里面输入下列代码：
实例代码11-18
<html>
<head>
<title> DSO与XSL转换 </title>
<script language = "JavaScript">
function load1()
{
var xmlDso = sdb.XMLDocument;
var xslDso = Stylesheet1.XMLDocument;
divResults.innerHTML = xmlDso.transformNode(xslDso);
}
function load2()
{
var xmlDso = sdb.XMLDocument;
var xslDso = Stylesheet2.XMLDocument;
divResults.innerHTML = xmlDso.transformNode(xslDso);
}
function load3()
{
var xmlDso = sdb.XMLDocument;
var xslDso = Stylesheet3.XMLDocument;
divResults.innerHTML = xmlDso.transformNode(xslDso);
}
</script>
</head>
<body bgcolor= "#FFFFF" >
<center>
<p style="color:orange;font-size:29;font-weight:bold;text-align:center;background-color:aqua;">请选择自己喜欢的样式</p>
<xml id="sdb" src="cha.xml"></xml>
<xml id="Stylesheet1" src="cha1.xsl"></xml>
<xml id="Stylesheet2" src="cha2.xsl"></xml>
<xml id="Stylesheet3" src="cha3.xsl"></xml>
<DIV id="divResults"></DIV>
<form>
<input type=button value="样式1" >
<input type=button value="样式2" >
<input type=button value="样式3" >
</form>
<a href="cha.xml">查看源文件</a>
</center>
</body>
</html>
将该文件保存，文件名为view4.html，文件保存的位置为Example文件夹下。在当前的页面中，HTML文件以数据岛的形式引入四个符合XML 格式文件，一个保存数据的XML文件，另外三个指定显示样式的XML文件。数据源的名称分别为“sdb”，“Stylesheet1”， “Stylesheet2”，“Stylesheet3”，“src”表示要引入的文件是那个。
在嵌入的JavaScript脚本程序中，创建了三个函数，每个函数的功能都是用来指定样式表显示的样式，以第一个函数为例，首先分别使用“var xmlDso = sdb.XMLDocument”和“var xslDso = Stylesheet1.XMLDocument”创建了XML文件的数据源对象和样式表单的数据源对象。然后使用 “divResults.innerHTML = xmlDso.transformNode(xslDso)”指定样式来显示XML文件。其它的函数功能一样。在下面使用三个按钮，通过单击事件来触发相应的样式事件。我们还可以通过点击超级链接显示该XML文件的源代码。
XML+XSL+HTML+JavaScript
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章