XML和JavaScript-续2

    在该窗口中,单击【上一页】,【下一页】,【第一页】,【最后一页】会显示相应的数据信息。读者自己可以操作一下。
    现在我们编写另外一个显示页面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源文件显示】窗口
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值