用ASP方式实现拥有动态伸缩层次列表的主页
日期：2014-02-17 浏览次数：20907 次
微软公司推出的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=”#” 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="#" )>国内报刊
<Div Id="dy2" Style=display:none>
人民日报
光明日报
<a href="#" )>大众日报
<Div Id="dy3" Style=display:none>
大众日报
农村大众
齐鲁晚报
生活日报
</div>
</div>
<a href="#" )>搜索引擎
<Div Id="dy4" Style=display:none>
雅虎
搜狐
</div>
</div>
<hr><h3>List End</h3>
</body>
</html>
实现自动化
上面的一大堆东西，谁看了都会眼花缭乱的。不过在IE4上浏览的效果，又确实酷得让人心痒，所以费一点力气，用程序将这一烦琐的制作过程自动化一下，是完全值得的。一个简
简单的实现
要在网页上实现伸缩，首先要清楚如何使页面中的一段文字按需要隐藏和显示出来。我们看下面这段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=”#” 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="#" )>国内报刊
<Div Id="dy2" Style=display:none>
人民日报
光明日报
<a href="#" )>大众日报
<Div Id="dy3" Style=display:none>
大众日报
农村大众
齐鲁晚报
生活日报
</div>
</div>
<a href="#" )>搜索引擎
<Div Id="dy4" Style=display:none>
雅虎
搜狐
</div>
</div>
<hr><h3>List End</h3>
</body>
</html>
实现自动化
上面的一大堆东西，谁看了都会眼花缭乱的。不过在IE4上浏览的效果，又确实酷得让人心痒，所以费一点力气，用程序将这一烦琐的制作过程自动化一下，是完全值得的。一个简
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
