編寫另外一個顯示頁面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
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章