3.3.3.3 巧用命名空间丰富表现效果

3.3.3.3 巧用命名空间丰富表现效果
   

命名空间不仅仅可以是用户自定义的DTD，也可以是一些已经成为标准的置标语言，其中包括大名鼎鼎的HTML，还有我们后面要详细介绍的SVG、SMIL、MathML等等。
利用命名空间将众多用户自定义的DTD或行业DTD融合在一起，可以达到资源的最大程度的综合利用；而利用命名空间将若干已经被W3C镀过金身的置标语言集于大成，则可以极大地丰富页面表现效果，丰富人机交互效果，使浏览器拥有更强的表现力。可以想象，如果我们要表现一批数据，所写的文件既能引入HTML中的表格为它们列表，又能使用SVG中的矢量图形为它们画条形图和饼图，甚至还能利用SMIL为它们设计多媒体表现效果，那该多好！
下面举一个有趣的例子。在HTML文件中我们经常使用脚本语言来丰富交互效果，在XML文件中，我们就可以通过引入HTML的命名空间，达到相同的效果。下面的这个例子中，我们为同样的天气预报数据设计了列表显示和表格显示两种显示方法，在使用按钮"Change Appearance"后，调用Javascript脚本程序，将显示方式由一种切换为另一种。
forecast.xml源文件：






  Dec 1st, 1999
  
   
      Beijing
      Snow
      4
      
        -7
        2
      
   
   
      Shanghai
      Sunny
      2
      
        2
        12
      
   
  

toggle.js源文件：
function toggleStyleSheet() {
  if (enabled) {
    document.styleSheets[1].disabled = true;
  } else {
    document.styleSheets[1].disabled = false;
  }
  enabled = !enabled;
}
function initiateToggle() {
  setTimeout(toggleStyleSheet, 0);
}
var enabled = true;
initiateToggle();

block.css源文件：
date
{
    font-size: 15pt;
    font-weight:bold;
    color:blue;
    display: block;
    margin-bottom: 5pt;
}
name
{
    font-weight:bold;
    display:block;
    margin-top: 5pt;
    margin-left: 8pt;
}
weather, wind-power, temperature
{
    display:block;
    margin-left: 20pt;
}
table.css源文件：
date
{
    font-size: 15pt;
    font-weight:bold;
    color:blue;
    display: block;
    margin-bottom: 5pt;
}
cities
{
    display: table;
    margin-top: 12pt;
}
city
{
    display: table-row;
}
name, weather, wind-power, temperature
{
    display:table-cell;
}
name
{
    font-weight:bold;
}
当使用列表方式显示这些数据时，显示效果如下：

IE不支持CSS描述的表格显示效果。不过如果你使用的是Netscape，就可以大饱眼福了。