内容载入中...
简单的实现
要在网页上实现伸缩，首先要清楚如何使页面中的一段文字按需要隐藏和显示出来。我们看下面这段HTML格式的片段：
<Div Id=”test” Style=”Display:none”>要隐藏的文字</Div>
这是符合HTML4标准的HTML语句，夹在<Div>之间的文本将不显示在页面上，因为它风格表单的Display属性为none。（由于本文不主要介绍HTML4的风格表单，有关祥情请读者查找相关资料。）只要能动态地将Display属性设为空，即缺省值，那么这段文字就可以动态地被显示出来。这需要Script的支持，下面就是一个让上面那样的文字显示和隐藏起来的两个JavaScript函数，只要将自定义的Div的Id值代入，对应的文字就显示或隐藏起来了：
<script language="JavaScript">
function ShowDiv(DivId)
{
document.all[DivId].style.display='';
return 0;
}
</script>
function HideDiv(DivId)
{
document.all[DivId].style.display='none';
return 0;
}
</script>
有了这两个函数，就要考虑在什么时候调用它们。熟悉Script编程的读者当然已经想到，可以把它们放到事件响应过程之中了。大体的形式可能是这样：
<a href=”#” onclick="return ShowDiv(‘test’);”>显示
<a href=”#” onclick="return HideDiv(‘test’);”>隐藏
将上面的片段组合到一个HTML文件中，也算是一个完整的例子了，用IE4试验一下，看看是否达到了预期的效果。（注意：JavaScript是大小写敏感的，排版时可能出现差错，实际应用中，最好都用小写。）
有了以上的了解，制作一个伸缩式的层次列表，只是由简到繁的过程，所以我也就不必做什么解释，只提供一个例子做为参考，这个例子也是我们下一步要用程序来实现的一个结果：
文件名：LsTest.htm
<html>
<head>
<title>DyList Test</title>
<script language="JavaScript">
/*
根据对象当前的属性，改变对象的显示状态
*/
function OnClickDiv(DivId)
{
if(document.all[DivId].style.display=='none')
{ document.all[DivId].style.display=''; }
else
{ document.all[DivId].style.display='none'; }
return 0;
}
</script>
</head>
<body>
<h3>List Start</h3><hr>
<Div Id="dy1" Style=display:>
<a href="#" onclick="return OnClickDiv('dy2')")>国内报刊
<Div Id="dy2" Style=display:none>
人民日报
光明日报
<a href="#" onclick="return OnClickDiv('dy3')")>大众日报
<Div Id="dy3" Style=display:none>
大众日报
农村大众
齐鲁晚报
生活日报
</div>
</div>
<a href="#" onclick="return OnClickDiv('dy4')")>搜索引擎
<Div Id="dy4" Style=display:none>
雅虎
搜狐
</div>
</div>
<hr><h3>List End</h3>
</body>
</html>
||||||实现自动化
上面的一大堆东西，谁看了都会眼花缭乱的。不过在IE4上浏览的效果，又确实酷得让人心痒，所以费一点力气，用程序将这一烦琐的制作过程自动化一下，是完全值得的。一个简单的思路：将树状层次结构的数据保存到一个简洁的文件载体当中，写一段通用的程序从载体文件中读取数据，生成我们所要的HTML文件。那么头一步是要选择什么样的载体啦，数据库方式当然最值得考虑，但这将牵扯出一大堆的问题，我想还是在另一个专题里来讨论吧，在这里我选择了Windows平台上常用的.ini文件，这种文件很适合于保存树状的层次数据，并且系统平台已经提供了基本的操作函数，可以大大省些力气。
我把这一过程制成了ASP（Active Server Page）的形式，这样拿过来就可以直接使用了，当然有时还是需要静态的HTML文件，那么可以把ASP中的代码转移到VB程序中，也并不困难。为了能在ASP中处理.ini文件，用到了我以前写的一个ActiveX服务对象，这个服务对象将对.ini文件操作的各种函数函数封装在一个类（class）中，我用起来已经有顺手了（关于这个服务对象的具体说明，请见本人的《配置文件(.ini)在VB5中的应用》一文，听别人讲在什么刊物上见过我的这篇文章，可我一直也没有接到任何通知，所以将它也一并附在后面）。
下面开始我们的程序设计吧，先来看一下树状的层次数据保存在.ini文件中的形式：
文件名：LsTest.ini
[root]
a=国内报刊
b=搜索引擎
[a]
a1=人民日报,http://www.peopledaily.com.cn
a2=光明日报,http://www.gmdaily.com.cn
a3=大众日报
[a3]
a3_1=大众日报,http://www.dzdaily.com.cn/
a3_1=农村大众,http://www.dzdaily.com.cn/ncdz.htm
a3_1=齐鲁晚报,http://www.dzdaily.com.cn/qlwb.htm
a3_1=生活日报,http://www.dzdaily.com.cn/shrb.htm
[b]
b1=雅虎,http://gbchinese.yahoo.com
b2=搜狐,http://www.sohoo.com.cn
文件中表现出的树状层次关系非常明显，你只要稍微花点心思就一定能够明白了。这里我做了一个小小的约定，就是每一个条目的等号后面，首先是这个条目的“标题”，它是不应省略的。之后是该条目的超级链接地址，由一个逗号进行分隔，如果没有地址，就表明它还有下一层的子条目。
要在ASP程序中使用自制的ActiveX服务对象，首先要把该服务程序安装到ASP程序运行的机器上，然后在ASP程序中建立这个对象，我想这些大家一定也有些经验了，这里就不多说了。那么列出一个主题中的所有子条目，大概的形式就如下面的样子：
document.getElementById('loading').style.display="none";
