在该窗口中，单击【上一页】，【下一页】，【第一页】，【最后一页】会显示相应的数据信息。读者自己可以操作一下。
现在我们编写另外一个显示页面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" onLoad="load1()">
<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" οnclick="load1()">
<input type=button value="样式2" οnclick="load2()">
<input type=button value="样式3" οnclick="load3()">
</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文件的源代码。
若在图11-20所示的窗口中，输入你要查询的信息，如在里面输入的信息是“孙静”，这时会弹出如图11-32所示的窗口，
图11-32 【指定样式显示】窗口
该样式的显示是以【样式1】显示的，在窗口中，分别单击【样式2】和【样式3】分别显示如图11-33所示的窗口和如图11-34所示的窗口。
图11-33 【样式2显示】窗口
图11-34 【样式3显示】窗口
在上面的11-34的窗口中，单击“查看源文件”，会显示如图11-35所示窗口。本章实例仅供学习，编写有点仓促，程序处理不够细致处，望大家原谅。
图11-35 【cha.xml源文件显示】窗口
扫一扫
813
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
