IDC资讯中心
微软公司推出的ie4.x，使得按照html4标准制作的网页一时成为时尚，这类网页在动态功能方面有了非常大的提高。特别是可以通过页面内嵌的script语句，使页面中的任意一段文字可以在需要时显示出来，在不需要时隐藏起来，利用这一特性，就可以在页面上设计出可以伸缩的层次列表出来。这种列表实际表现的是一种分层次的树状结构，读者可以用鼠标点击上一层的条目，而展开或收起它的下一层。在明白了html4标准中dom的实现机制及对风格表单的定义之后，很容易可以找到实现这种列表的途径。但是一般来说，这种列表的条目都比较多，如果每次都用手工制作，不仅非常烦琐，而且也十分容易出错，所以要真正应用到实际的页面制作当中，还必须有一种比较自动的方法。本人通过实验，用asp方式完成了一种比较通用的实现过程，稍加变化就可以应用到各种主页的制作过程当中，非常方便，在这里我把它写出来奉献给大家，希望大家能多提意见喽。
简单的实现
要在网页上实现伸缩，首先要清楚如何使页面中的一段文字按需要隐藏和显示出来。我们看下面这段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程序中建立这个对象，我想这些大家一定也有些经验了，这里就不多说了。那么列出一个主题中的所有子条目，大概的形式就如下面的样子：
set prof = server.createobject(“vbprofile.profile”)
prof.filename = propath
buf = prof.firstvalue(“主题名”)
do while len( buf ) > 0
… …
buf = prof.nextvalue()
loop
在上面的循环中，buf中接收的数据是这样的一种形式：“条目名=条目标题，链接地址”，为了便于在程序中使用，用initdyitemstr函数将字符串分解到定义好的全局变量当中：
<!–#include file=”str.inc”–>
<%
gdyitemname=”” ‘ 当前条目的名称
gdyitemtitle=”” ‘ 当前条目的标题
gdyitemlink=”” ‘ 当前条目的链接地址
sub initdyitemstr( s )
gdyitemname = strhead(s, “=”)
gdyitemtitle = strhead(s, “,”)
gdyitemlink = s
end sub
%>
这里调用了一个strhead函数，这个函数也是出自本人之手，在处理字符串时十分有用，是我在编程时使用频率最高的函数之一。另外为了方更地在程序中输出引号，就写了一个专门在字符串两端加上引号的函数，因为在编写asp程序时常常要调用这两个函数，所以我单独把他们放在一个文件中，在要使用时把这个文件包含进行就可以了，下面就是这个文件：
文件名：str.inc
<%
‘ 在第一次遇参数c的位置载取ss
‘ 返回载取的前半载，ss中保留后半载
‘ 当ss中不包含c时，相当于从ss的最后载取
public function strhead(ss, c)
i = instr(ss, c)
if i > 0 then
strhead = mid(ss, 1, i – 1)
ss = mid(ss, i + len(c))
else
strhead = ss
ss = “”
end if
end function
‘ 在s的两端加上引号返回
public function yh(s)
yh = chr(34) & s & chr(34)
end function
%>
在响应onchick事件时，为书写简单，可以先写成一个javascript函数，以备调用（注意：这里的java script函数是在浏览器上执行的，一定要与服务器端执行的代码区分开来）：
<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>
为了给每一个条目在页面上建立一个唯一的id值，以便在事件处理过程中进行操作，所以定义了一个全局的计数器和一个id构造函数：
<%
curdyitemindex=0
function dyitemid()
dyitemid=”dy” & curdyitemindex
end function
%>
有了这些准备工作，最后的输出就不难了，提炼一下我们要完成的任务，就在从lstest.ini文件中读取数据，输出如lstest.htm文件中的格式数据。由于数据是树状的，所以很自然地会使用上函数的递归，请看下面实现的主体函数：
sub listitems(propath,itemname,disp)
‘ 建立并初始化profile对象
set itemprof = server.createobject(“vbprofile.profile”)
itemprof.filename = propath
‘ 开始一个div对象，包含所有的子条目在其中
response.write “<div id=” & yh(dyitemid) & _
” style=display:” & disp & “>
” & vbcrlf
‘ 开始输出每一个子条目
buf = itemprof.firstvalue(itemname)
do while len(buf) > 0
initdyitemstr buf
if len(gdyitemlink) > 0 then
response.write “
<a href=” & yh(gdyitemlink) & “>” & _
gdyitemtitle & “” & vbcrlf
else
‘ 如果链接地址为空，则开始下一层的列表
curdyitemindex = curdyitemindex + 1
response.write “
<a href=” & yh(“#”) & _
” onclick=” & yh(“return onclickdiv(” & dyitemid & “)”) & _
“)>” & gdyitemtitle & “” & vbcrlf
listitems propath,gdyitemname,”none” ‘ 使用递归
end if
buf=itemprof.nextvalue()
loop
‘ 结束定义的div对象
response.write “
</div>” & vbcrlf
end sub
最后为了调用方便，再定义一个对外的接口函数：
public sub dylist(proname,rootitem)
‘ 将逻辑路径映射成物理路径
propath=server.mappath(proname)
curdyitemindex = curdyitemindex + 1
listitems propath,rootitem,””
end sub
把上面这些片段保存到一个文件中，文件名就叫dylist.inc吧，我们就算大功告成了，你是不是想马上看看效果呢？用下面这个asp文件来做一下实验，瞧瞧你是否满意？
文件名：lstest.asp
<html>
<head>
<title>dylist test</title>
<!–#include file=” dylist.inc”–>
</head>
<body>
<h3>list start</h3><hr>
<%
dylist “lstest.ini”,”root”
%>
<hr><h3>list end</h3>
</body>
</html>
走向完善
功能是实现了，但在美观程度上还不能尽人意，不过这是让每个人施展各自绝活的时候，我可就不便包办了。这里我只提出几个我想到的改进方式，供大家参考：
通过响应onmouseover和onmouseout两个事件，可以做到当鼠标移到某一个条目上时，令其变成与众不同的颜色，这功能实现起来不难，确很有效果，何乐而不为呢？只要在条目输出时，象下面的样子加上点内容，想要的效果就有了：
<a … onmouseover=”this.style.color=color1” onmouseout=”this.style.color=color2” … >
再有一点，在列表中，我们使用的是
和
标记，这能很好地体现出层次来，不过有时会感到，页面上层次缩进的距离不是太合适，好象总是偏大了一点，在没有风格表单时，我们是无能为力了，可现在通过对风格表单的定义，修改这一距离就十分简单了，试试在asp文件的头部加上下面的风格定义，看看是否会有效果：
<style>
<!–
ul {margin-left:14pt; margin-top:0}
li {line-height:12pt}
–>
</style>
其他的点子，就请各位自己去想吧，想到了什么好点子，别忘了也告诉我一声喽。我把以上的例子也放到了我的个人主页上了，要是有兴趣，不妨去看看啦。
