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

《用ASP方式实现拥有动态伸缩层次列表的主页》由会员分享，可在线阅读，更多相关《用ASP方式实现拥有动态伸缩层次列表的主页（7页珍藏版）》请在金锄头文库上搜索。

1、 微软公司推出的 IE4.X，使得按照 HTML4 标准制作的网页一时成为时尚，这类网页在 动态功能方面有了非常大的提高。特别是可以通过页面内嵌的 Script 语句，使页面中的任 意一段文字可以在需要时显示出来，在不需要时隐藏起来，利用这一特性，就可以在页面 上设计出可以伸缩的层次列表出来。这种列表实际表现的是一种分层次的树状结构，读者 可以用鼠标点击上一层的条目，而展开或收起它的下一层。在明白了 HTML4 标准中 DOM 的实现机制及对风格表单的定义之后，很容易可以找到实现这种列表的途径。但是一般来 说，这种列表的条目都比较多，如果每次都用手工制作，不仅非常烦琐，而且也十分容易 出错，所

2、以要真正应用到实际的页面制作当中，还必须有一种比较自动的方法。本人通过 实验，用 ASP 方式完成了一种比较通用的实现过程，稍加变化就可以应用到各种主页的制 作过程当中，非常方便。 简单的实现 要在网页上实现伸缩，首先要清楚如何使页面中的一段文字按需要隐藏和显示出来。 我们看下面这段 HTML 格式的片段： 要隐藏的文字这是符合 HTML4 标准的 HTML 语句，夹在之间的文本将不显示在页面上，因 为它风格表单的 Display 属性为 none。 （由于本文不主要介绍 HTML4 的风格表单，有关祥 情请读者查找相关资料。 ）只要能动态地将 Display 属性设为空，即缺省值，那么这段文

3、字 就可以动态地被显示出来。这需要 Script 的支持，下面就是一个让上面那样的文字显示和 隐藏起来的两个 JavaScript 函数，只要将自定义的 Div 的 Id 值代入，对应的文字就显示或 隐藏起来了： function ShowDiv(DivId) document.allDivId.style.display=;return 0; function HideDiv(DivId) document.allDivId.style.display=none;return 0; 有了这两个函数，就要考虑在什么时候调用它们。熟悉 Script 编程的读者当然已经想 到，可以把它们放到事件响

4、应过程之中了。大体的形式可能是这样： 显示 隐藏将上面的片段组合到一个 HTML 文件中，也算是一个完整的例子了，用 IE4 试验一下，看看是否达到了预期的效果。 （注意：JavaScript 是大小写敏感的，排版时可能出现差错， 实际应用中，最好都用小写。 ） 有了以上的了解，制作一个伸缩式的层次列表，只是由简到繁的过程，所以我也就不 必做什么解释，只提供一个例子做为参考，这个例子也是我们下一步要用程序来实现的一 个结果： 文 件 名：LsTest.htmDyList Test/*根据对象当前的属性，改变对象的显示状态 */ function OnClickDiv(DivId) if(doc

5、ument.allDivId.style.display=none) document.allDivId.style.display=; else document.allDivId.style.display=none; return 0; List Start国内报刊人民日报光明日报 大众日报大众日报农村大众齐鲁晚报生活日报搜索引擎雅虎搜狐List End实现自动化 上面的一大堆东西，谁看了都会眼花缭乱的。不过在 IE4 上浏览的效果，又确实酷得 让人心痒，所以费一点力气，用程序将这一烦琐的制作过程自动化一下，是完全值得的。 一个简单的思路：将树状层次结构的数据保存到一个简洁的文件载体当中

6、，写一段通用的 程序从载体文件中读取数据，生成我们所要的 HTML 文件。那么头一步是要选择什么样的 载体啦，数据库方式当然最值得考虑，但这将牵扯出一大堆的问题，我想还是在另一个专 题里来讨论吧，在这里我选择了 Windows 平台上常用的.ini 文件，这种文件很适合于保存 树状的层次数据，并且系统平台已经提供了基本的操作函数，可以大大省些力气。 我把这一过程制成了 ASP（ActiveServerPage）的形式，这样拿过来就可以直接使用了， 当然有时还是需要静态的 HTML 文件，那么可以把 ASP 中的代码转移到 VB 程序中，也 并不困难。为了能在 ASP 中处理.ini 文件，用到

7、了我以前写的一个 ActiveX 服务对象，这 个服务对象将对.ini 文件操作的各种函数函数封装在一个类（class）中，我用起来已经有顺 手了,下面开始我们的程序设计吧，先来看一下树状的层次数据保存在.ini 文件中的形式： 文 件 名：LsTest.ini root a= 国 内 报 刊 b= 搜 索 引 擎a a1= 人 民 日 报,http:/ a2= 光 明 日 报,http:/ a3= 大 众 日 报a3 a3_1= 大 众 日 报,http:/ 农 村 大 众,http:/ a3_1= 齐 鲁 晚 报,http:/ a3_1= 生 活 日 报,http:/ b1= 雅 虎,ht

8、tp:/ b2= 搜 狐,http:/文件中表现出的树状层次关系非常明显，你只要稍微花点心思就一定能够明白了。这 里我做了一个小小的约定，就是每一个条目的等号后面，首先是这个条目的“标题” ，它是 不应省略的。之后是该条目的超级链接地址，由一个逗号进行分隔，如果没有地址，就表 明它还有下一层的子条目。 要在 ASP 程序中使用自制的 ActiveX 服务对象，首先要把该服务程序安装到 ASP 程 序运行的机器上，然后在 ASP 程序中建立这个对象，我想这些大家一定也有些经验了，这 里就不多说了。那么列出一个主题中的所有子条目，大概的形式就如下面的样子： Set Prof = Server.Cr

9、eateObject(“vbProFile.ProFile“) Prof.FileName = proPath Buf = Prof.FirstValue(“ 主 题 名“) Do While Len( Buf ) 0. .Buf = Prof.NextValue() Loop在上面的循环中，Buf 中接收的数据是这样的一种形式：“条目名=条目标题，链 接地址” ，为了便于在程序中使用，用 InitDyItemStr 函数将字符串分解到定义好的全局变 量当中： 这里调用了一个 StrHead 函数，这个函数也是出自本人之手，在处理字符串时十分有 用，是我在编程时使用频率最高的函数之一。另外为了

10、方更地在程序中输出引号，就写了 一个专门在字符串两端加上引号的函数，因为在编写 ASP 程序时常常要调用这两个函数， 所以我单独把他们放在一个文件中，在要使用时把这个文件包含进行就可以了，下面就是 这个文件： 文件名：Str.inc0 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) else document.allDivId.

11、style.display=none; return 0; 为了给每一个条目在页面上建立一个唯一的 ID 值，以便在事件处理过程中进行操作， 所以定义了一个全局的计数器和一个 ID 构造函数： 有了这些准备工作，最后的输出就不难了，提炼一下我们要完成的任务，就在从 LsTest.ini 文件中读取数据，输出如 LsTest.htm 文件中的格式数据。由于数据是树状的，所 以很自然地会使用上函数的递归，请看下面实现的主体函数： Sub ListItems(proPath,ItemName,Disp)建立并初始化 ProFile 对象Set ItemProf = Server.CreateObje

12、ct(“vbProFile.ProFile“)ItemProf.FileName = proPath开始一个 DIV 对象，包含所有的子条目在其中Response.Write “ & vbCrLf开始输出每一个子条目buf = ItemProf.FirstValue(ItemName)Do While Len(buf) 0InitDyItemStr bufIf Len(gDyItemLink) 0 thenResponse.Write “ & _gDyItemTitle & “ & vbCrLfElse如果链接地址为空，则开始下一层的列表curDyItemIndex = curDyItemIn

13、dex + 1Response.Write “ “ & gDyItemTitle & “ & vbCrLfListItems proPath,gDyItemName,“none“ 使用递归End Ifbuf=ItemProf.NextValue()Loop结束定义的 DIV 对象Response.Write “ & vbCrLf End Sub最后为了调用方便，再定义一个对外的接口函数： Public Sub DyList(proName,rootItem)将逻辑路径映射成物理路径proPath=Server.mappath(proName)curDyItemIndex = curDyItem

14、Index + 1ListItems proPath,rootItem,“End Sub把上面这些片段保存到一个文件中，文件名就叫 dyList.inc 吧，我们就算大功告成 了，你是不是想马上看看效果呢？用下面这个 ASP 文件来做一下实验，瞧瞧你是否满意？ 文 件 名：LsTest.aspDyList TestList StartList End走向完善 功能是实现了，但在美观程度上还不能尽人意，不过这是让每个人施展各自绝活的时 候，我可就不便包办了。这里我只提出几个我想到的改进方式，供大家参考： 通过响应 onmouseover 和 onmouseout 两个事件，可以做到当鼠标移到某一个条目上时， 令其变成与众不同的颜色，这功能实现起来不难，确很有效果，何乐而不为呢？只要在条 目输出时，象下面的样子加上点内容，想要的效果就有了： 再有一点，在列表中，我们使用的是和 标记，这能很好地体现出层次来，不过有时会感到，页面上层次缩进的距离不是太合适， 好象总是偏大了一点，在没有风格表单时，我们是无能为力了，可现在通过对风格表单的 定义，修改这一距离就十分简单了，试试在 ASP 文件的头部加上下面的风格定义，看看是 否会有效果： 作者：王飞