<marquee width=358>欢迎来到月影社区,希望这里可以成为您美丽的梦幻花园,如果你觉得这里好请分享给您的朋友!- wf66.com</marquee> 将月影社区设置为您的首页将月影社区地址加入到您的收藏栏
月影社区时尚音乐音乐查询IP手机许愿之瓶最新更新文件加密访客留言爱音乐
欢迎您,首页 >> 信息中心 >> 用ASP方式实现动态伸缩形式列表主页

请输入您关键字:


用ASP方式实现动态伸缩形式列表主页

推荐查看本文HTML版本


微软公司推出的IE4.X,使得按照HTML4标准制作的网页一时成为时尚,这类网页在动态功能方面有了非常大的提高。特别是可以通过页面内嵌的Script语句,使页面中的任意一段文字可以在需要时显示出来,在不需要时隐藏起来,利用这
一特性,就可以在页面上设计出可以伸缩的层次列表出来。这种列表实际表现的是一种分层次的树状结构,读者可以用鼠标点击上一层的条目,而展开或收起它的下一层。在明白了HTML4标准中DOM的实现机制及对风格表单的定义之后,很容易可以找到实现这种列表的途径。但是一般来说,这种列表的条目都比较多,如果每次都用手工制作,不仅非常烦琐,而且也十分容易出错,所以要真正应用到实际的页面制作当中,还必须有一种比较自动的方法。本人通过实验,用ASP方式完成了一种比较通用的实现过程,稍加变化就可以应用到各种主页的制作过程当中,非常方便。
简单的实现
要在网页上实现伸缩,首先要清楚如何使页面中的一段文字按需要隐藏和显示出来。我们看下面这段HTML格式的片段:
< Div Id="test" Style="Display:none" >
要隐藏的文字
这是符合HTML4标准的HTML语句,夹在
之间的文本将不显示在页面上,因为它风格表单的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 [月影社区 http://wf66.com/]
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(ActiveServerPage)的形式,这样拿过来就可以直接使用了,当然有时还是需要静态的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

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函数,以备调用(注意:这里的JavaScript函数是在浏览器上执行的,一定要与服务器端执行的代码区分开来):
< 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.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方式实现动态伸缩形式列表主页 2006-9-8
转到本主题第:[ 1 ]
相关评论

暂无评论

总计0页 [ ]上一页 下一页
发表评论(揪错)
呢称: * 您尚未登陆,请登录
来自: *
内容:
 

(为防止非法信息,您的言论提交后需要审核才能正常显示)

文学
精品文萃 情感天地 言情小说
网络小说 玄幻小说 悬疑恐怖
武侠小说 古典品谈 外国名著
儿童文学 会员原创 学习园地
杂谈其它
娱乐
爆笑网文 星座占卜 影音动漫
娱乐新闻 影视剧情
诗词
青竹诗歌 个人诗集 宋词雅赏
全唐诗录
新闻
国际新闻 国内新闻 科技新闻
体育新闻
图片
图文专区 艺术长廊 桌面壁纸
精品素材 像素图片
漫画
单幅漫画 爆笑四格 连环漫画
电脑
电脑入门 图形图像 编程开发
游戏
我爱Q宠 最新攻略 最新秘籍
游戏新闻 技巧心得
经济
帕格节电 财经资讯 股市证券
生活
百科知识 外语学院 潮流时尚
健康医疗 宠物花卉 汽车地带
行走天下
美食
面食甜点 家常菜品 药膳食疗
美食天下 烹饪技巧 松辽风味
燕京风味 巴蜀风味 滇黔风味
赣江风味 徽皖风味 闽台风味
齐鲁风味 中州风味 岭南风味
荆楚风味 三晋风味 淞沪风味
苏扬风味 潇湘风味 钱塘风味
民族风味 素斋仿荤
营销
管理杂谈 谈经论道 培训激励
经营战略 职场生涯 公关交际
关于我们版权声明本站导航友情连结作品演示 TOP↑
本论坛言论纯属发表者个人意见,与£月影社区£立场无关。 皖ICP备16024038号-1
禁止发布任何色情/政治/反动相关信息让我们共同来营造一个属于我们的梦幻家园
Copyright ©2001-2006 MoonShadow. All rights reserved.  Version 4.0  Licence 2006.4.2
建站天数:7182天 本站基于ASP+JS构建,完全自主开发,版权归属月影社区 管理员QQ:23165062 Time:78ms