• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

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

asp 搞代码 3年前 (2018-08-10) 134次浏览 已收录 0个评论

微软公司推出的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">  

http://www.gaodaima.com/66230.html用ASP方式实现拥有动态伸缩层次列表的主页_asp

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 &nbsp;

a2=光明日报,http://www.gmdaily.com.cn &nbsp;

a3=大众日报  

   

[a3]  

a3_1=大众日报,http://www.dzdaily.com.cn/ &nbsp;

a3_1=农村大众,http://www.dzdaily.com.cn/ncdz.htm &nbsp;

a3_1=齐鲁晚报,http://www.dzdaily.com.cn/qlwb.htm &nbsp;

a3_1=生活日报,http://www.dzdaily.com.cn/shrb.htm &nbsp;

   

[b]  

b1=雅虎,http://gbchinese.yahoo.com &nbsp;

b2=搜狐,http://www.sohoo.com.cn &nbsp;

   

文件中表现出的树状层次关系非常明显,你只要稍微花点心思就一定能够明白了。这里我做了一个小小的约定,就是每一个条目的等号后面,首先是这个条目的“标题”,它是不应省略的。之后是该条目的超级链接地址,由一个逗号进行分隔,如果没有地址,就表明它还有下一层的子条目。  

要在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>  

  其他的点子,就请各位自己去想吧,想到了什么好点子,别忘了也告诉我一声喽。我把以上的例子也放到了我的个人主页上了,要是有兴趣,不妨去看看啦。 

欢迎大家阅读《用ASP方式实现拥有动态伸缩层次列表的主页_asp》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址