万卷书-WANJUANSHU.COM--电脑书籍--网页制作--ASP--ASP专题文档集--用ASP方式实现拥有动态伸缩层次列表的主页

用ASP方式实现拥有动态伸缩层次列表的主页

济南大众日报社信息中心
王飞

---- 微软公司推出的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 >
< a href="#" onclick="return HideDiv('test');" >隐藏< /a >

---- 将上面的片段组合到一个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: >< ul >
< li >< a href="#" onclick="return
OnClickDiv('dy2')") >国内报刊< /a >
< Div Id="dy2" Style=display:none >< ul >
< li >< a href="http://www.peopledaily.com.cn" >
人民日报< /a >
< li >< a href="http://www.gmdaily.com.cn" >
光明日报< /a >
< li >< a href="#" onclick="return
OnClickDiv('dy3')") >大众日报< /a >
< Div Id="dy3" Style=display:none >< ul >
< li >< a href="http://www.dzdaily.com.cn" >
大众日报< /a >
< li >< a href="http://www.dzdaily.com.cn/ncdz.htm" >
农村大众< /a >
< li >< a href="http://www.dzdaily.com.cn/qlwb.htm" >
齐鲁晚报< /a >
< li >< a href="http://www.dzdaily.com.cn/shrb.htm" >
生活日报< /a >
< /ul >< /div >
< /ul >< /div >
< li >< a href="#" onclick="return OnClickDiv('dy4')") >
搜索引擎< /a >
< Div Id="dy4" Style=display:none >< ul >
< li >< a href="http://gbchinese.yahoo.com" >
雅虎< /a >
< li >< a href="http://www.sohoo.com.cn" >
搜狐< /a >
< /ul >< /div >
< /ul >< /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 文件中的形式：

 文 件 名：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 & " >< ul >" & vbCrLf



	'开始输出每一个子条目
	buf = ItemProf.FirstValue(ItemName)
	Do While Len(buf)  > 0
		InitDyItemStr buf
		If Len(gDyItemLink)  > 0 then
		Response.Write "< li >< a href=
" & YH(gDyItemLink) & " >" & _
		gDyItemTitle & "< /a >" & vbCrLf
		Else
			'如果链接地址为空，则开始下一层的列表
			curDyItemIndex = curDyItemIndex + 1
			Response.Write "< li >
< a href=" & YH("#") & _
			" onclick=" & YH("return OnClickDiv
('" & DyItemId & "')") & _
		") >" & gDyItemTitle & "< /a >" & vbCrLf
		ListItems proPath,gDyItemName,"none" '使用递归
		End If



		buf=ItemProf.NextValue()
	Loop



	'结束定义的DIV对象
	Response.Write "< /ul >< /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.htm
< 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 >
```

WanJuanShu.COM

WANJUANSHU.COM

万卷书