在线用户    站点地图 技术论坛 文档中心 站点导航 资源下载 语言参考 教程专题 站点统计 业务项目 使用帮助
您的位置
MSDN参考新加了CSS2参考,全中文,制作精良。245k下载。           新加了sxf_sxf推荐的"动态网页专家指导" 下载!          新加了lsg2002lsg推荐的"ASP.NET高级编程(PDF)" 下载!          新加了DHTML代码预览!!,功能强大哦!欢迎试用          新加了网友lincong为大家提供的SQL Server 2000 程序员指南,有点大,但同时也就说明内容全咯!           新加了网友ibra为大家提供的北大的JAVA课件,很适合初学者入门           新加了一个java的连接缓冲池代码示例           新加了人月神话电子版下载!软件工程巨著哦~~           更新了评分标准,引入了“专家分”概念,相信可以更好的激励大家的学习!详情请看“使用帮助”           新加了由网友GGG提供的“IIS超级管理手册”,值得一看哦!(虽然我没看过 :P )           新加了“英雄榜”,欢迎测试!           “无组件上传·从原理剖析到实践”已经全部完成,源码全部开放,有兴趣的朋友请到文档中心一探究竟。  您的位置  首页>文档中心>ASP>文档A0000122 在同一窗口中打开页面中的链接 在新窗口中打开页面中的链接 将ASPCHINA设为首页 将ASPCHINA加入书签    
 LOGIN HERE
用户:
密码: 忘记密码
记住密码 用户注册 游客进入
相关文章

asp编码的转换

超漂亮后台完善企业代码V5.0

№ → 发布几个经典的ASP源码

利用asp连接远端Oracle数据库方法!

用ASP生成BMP图片

ASP与存储过程

ASP中对FoxPro自由表(DBF文件)的操作

优化asp数据访问代码

[原创]:DW+ASP.Net实战(五):留言板演示--大结局

[原创]:DW+ASP.Net实战(四):开发中应注意的一些小技巧
发表文章
跟我学做树型菜单(二)

作者:xmxoxo     提交人:xmxoxo     发布时间:03-03-08     文章类型:原创     浏览量:3312
参考链结:http://    
关键字:ASP|树型菜单|递归
[本文档没有附件]
字体:    视力保护色: 杏仁黄  秋叶褐  胭脂红  芥末绿  天蓝  雪青  灰  银河白(默认色) [A0000122]


续上篇
  上一篇我们已经确定了树型菜单的功能,数据库结构,以及所要用到的一些函
数。现在可以开始程序的设计了。由于树型菜单要在网页上实现动态展开子树的效
果,所以需要用到DHTML。我们先来分析一下如何在客户端实现这样的动态效果。

一、实现动态菜单的客户端
    在这里,我们先不管ASP的程序,仅来分析一下如何在客户端的网页中实现展
开菜单的动态效果。首先,要展开一个子菜单,可以把子菜单放在一个图层或者一
个表格里,用CSS样式里的dsiplay属性来控制它。如果把display属性设为none,
则隐藏这个菜单;反过来,如果设为一个值,比如block,则显示。有了这种方法,
就可以用JS脚本来控制了。
    1、实际隐藏的菜单。
    现在我们先来做一个这样的菜单,暂时我们还不写脚本程序,只是来显示一下
效果。既然是看效果,就先显示一个只有一个项的二层菜单吧,为了区分不同层次的
菜单,我们把子菜单放在一个表格中,再把这个表格放在上一级菜单所在表格的一个
单元格中。代码如下:
树型菜单1,文件名:tree1.htm
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<html>
<head>
<title>树形菜单1</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
td {  font-size: 12px; font-family: "宋体"}
a:active {  font-size: 12px; text-decoration: none; background-color: #0099FF; font-family: "宋体"}
a:link {  font-size: 12px; text-decoration: none; font-family: "宋体"}
a:hover {  font-size: 12px; text-decoration: none; background-color: #0099FF; font-family: "宋体"}
a:visited {  font-size: 12px; text-decoration: none}
table {  font-size: 12px; font-family: "宋体"}
.cur {  cursor: hand}
.tt {  border-color: #FFFFFF #000000 #000000 #FFFFFF;
border-style: solid; border-top-width: 1px; border-right-width: 1px;
border-bottom-width: 1px; border-left-width: 1px}
.s12 {  font-family: "宋体"; font-size: 12px}
.txtbox {  font-family: "宋体"; font-size: 12px; border: 1px solid; height: 18px;
border-color: #000000 #FFFFFF #FFFFFF #000000}
-->
</style>
</head>
<body>
<table width='100%' border=0 cellspacing=0 cellpadding=0>
  <tr height='16' width='100%'>
    <td height='16'>
    <img id='home' src='images/home.gif'  class='cur' width='16' height='16' align='absmiddle'>
<a href='/photo/index.asp' target='main'>我的电脑</a>
    </td>
  </tr>
  <tr>
    <td height='0' >
<table id='aa' style='display=none' width='100%' border='0' cellspacing='0' cellpadding='0'>
  <tr height='16'>
    <td width='16' height='16'>
    <img src='images/line_cco.gif' width='16' height='16'>
    </td>
    <td height='16'>
    <img src='images/fc.gif' width='16' height='16' align='absmiddle'>
  <a href='mgw' target='main'>名古屋</a>
    </td>
  </tr>
</table>
    </td>
  </tr>
</table>
</body>
</html>
</BODY>
</HTML>


为了突出效果,我们在里面加入了CSS来控制不同对象的显示效果。当然,上面的链接都是任意指定的。
显示一下上面的文件,我们可以看到"名古屋“这个子菜单被隐藏了。现在把上面文件中的
<table id='aa' style='display=none' width='100%' border='0' cellspacing='0' cellpadding='0'>

改为
<table id='aa' style='display=block' width='100%' border='0' cellspacing='0' cellpadding='0'>

再显示一下,下一级的菜单也显示出来了。
    2、用脚本来控制菜单的显示。
    刚才我们是通过手工修改子菜单的display属性来实现子菜单的显示的。现在我们来加入脚本进
行控制。只要在脚本里改变子菜单的display属性就可以了。脚本如下:
<script language="JavaScript">
function showhide(subid)
{
  if (subid.style.display=='none')
  {
    subid.style.display='block';
  }
  else
  {
    subid.style.display='none';
  }
}
</script>


然后,我们给在父菜单加上一个动作:

<img id='home'

的后面加上:
onclick="showhide(aa)"


现在再显示一下这个网页,然后点击“我的电脑”前的图片,就可以看到子菜单的显示和隐藏的效果了。

3、完整的脚本控制
    上面我们已经实现了子菜单的显示和隐藏,但是上面的是只有两个菜单项的情况,实际的情况要
比上面的复杂。我们来分析一个典型的情况:每个菜单(除了根菜单)外,都有三项内容:
  1)连接的树型图:可能是“+”或者“-”或者其它的几种连线。如果是“+”或者“-”,就要给它加上链接
      点击后展开下一级菜单。根菜单没有这一项。
  2)图标:根菜单是电脑的图样,其它的菜单是文件夹的图样。同样也要加上链接来展开下一级菜单。
  3)文字:菜单的显示文字,点击后指向一个新链接。

对于每一级菜单,我们按一定的方式进行编号,以便在ASP程序中生成:用L表示行,用R表示列。对于某个
菜单,上面的第一项(连接图)标为第一个;第二项(图标)标为第二个;它的子菜单所在的表格,标为第
三个。示意图如下
----------------------
| L1R1 | L1R2 | 文字  |
----------------------
|      | --L2R2------|
|      | |          |
|      | |          |
|      | |          |
|      | |-----------|
----------------------

    根据上面的结构图,我们来改进一下网页,一是每个菜单的连接图和图标都要加上点击的动作,二是脚本
程序要修改一下。对于根菜单,没有第一项,所有点击的动作里前两项留空。下面是一个典型的例子:

<html>
<head>
<title>树形菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
td {  font-size: 12px; font-family: "宋体"}
a:active {  font-size: 12px; text-decoration: none; background-color: #0099FF; font-family: "宋体"}
a:link {  font-size: 12px; text-decoration: none; font-family: "宋体"}
a:hover {  font-size: 12px; text-decoration: none; background-color: #0099FF; font-family: "宋体"}
a:visited {  font-size: 12px; text-decoration: none}
table {  font-size: 12px; font-family: "宋体"}
.cur {  cursor: hand}
.tt {  border-color: #FFFFFF #000000 #000000 #FFFFFF; border-style: solid;
border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.s12 {  font-family: "宋体"; font-size: 12px}
.txtbox {  font-family: "宋体"; font-size: 12px; border: 1px solid; height: 18px;
border-color: #000000 #FFFFFF #FFFFFF #000000}
-->
</style>
<script language="JavaScript">
function showhide(self,btnid,subid)
{
  if (subid.style.display=='none')
  {
    subid.style.display='block';
    if (btnid!=='')
      btnid.src='images/fo.gif';
    if (self!=='')
    {
    sr=self.src;
    //len=sr.length;
    var str1="images/cc.gif"
    var str2='images/ctc.gif'
    //alert(sr);
    if (sr.indexOf(str1)!==(-1))
        sr=sr.replace('images/cc.gif','images/co.gif');
    else
    {
      if (sr.indexOf(str2)!==(-1))
          sr=sr.replace('images/ctc.gif','images/cto.gif');
    }
    //alert(sr);
    self.src=sr;
    }
  }
  else
  {
    subid.style.display='none';
    if (btnid!=='')
      btnid.src='images/fc.gif';
    if (self!=='')
    {
    sr=self.src;
    //len=sr.length;
    var str1="images/co.gif"
    var str2='images/cto.gif'
    //alert(sr);
    if (sr.indexOf(str1)!==(-1))
        sr=sr.replace('images/co.gif','images/cc.gif');
    else
    {
      if (sr.indexOf(str2)!==(-1))
          sr=sr.replace('images/cto.gif','images/ctc.gif');
    }
    self.src=sr;
    }
  }
}
</script>
</head>
<body>
<table width='100%' border=0 cellspacing=0 cellpadding=0>
  <tr height='16' width='100%'>
    <td height='16'>
    <img id='home' onclick=showhide('','',L2R2) src='images/home.gif'  class='cur' width='16' height='16' align='absmiddle'>
<a href='/photo/index.asp' target='main'>我的电脑</a>
    </td>
  </tr>
  <tr>
    <td height='0' >
<table id='L2R2' style='display=none' width='100%' border='0' cellspacing='0' cellpadding='0'>
  <tr height='16'>
    <td width='16' height='16'>
      <img id='L3R3' onclick='showhide(L3R3,L3R4,L4R4)' src='images/cc.gif' width='16' height='16' class='cur'>
    </td>
    <td height='16'>
    <img id='L3R4' onclick='showhide(L3R3,L3R4,L4R4)' src='images/fc.gif'  class='cur' width='16' height='16' align='absmiddle'>
    &nbsp;<a href='mgw' target='main'>名古屋</a>
    </td>
  </tr>
  <tr>
    <td height='0' width='16' background='images/line.gif'>
  </td>
    <td height=0>
<table id='L4R4' style='display=none' width='100%' border='0' cellspacing='0' cellpadding='0'>
  <tr height='16'>
    <td width='16' height='16'>
    <img src='images/line_cco.gif' width='16' height='16'>
    </td>
    <td height='16'>
    <img src='images/fc.gif' width='16' height='16' align='absmiddle'>&nbsp;<a href='musci' target='main'>音乐</a>
    </td>
  </tr>
</table>
    </td>
  </tr>
  <tr height='16'>
    <td width='16' height='16'>
      <img id='L5R5' onclick='showhide(L5R5,L5R6,L6R6)' src='images/ctc.gif' width='16' height='16' class='cur'>
    </td>
    <td height='16'>
    <img id='L5R6' onclick='showhide(L5R5,L5R6,L6R6)' src='images/fc.gif'  class='cur' width='16' height='16' align='absmiddle'>
    &nbsp;<a href='mydocument' target='main'>我的文档</a>
    </td>
  </tr>
  <tr>
    <td height='0' width='16' >
  </td>
    <td height=0>
<table id='L6R6' style='display=none' width='100%' border='0' cellspacing='0' cellpadding='0'>
  <tr height='16'>
    <td width='16' height='16'>
    <img src='images/line_cco.gif' width='16' height='16'>
    </td>
    <td height='16'>
    <img src='images/fc.gif' width='16' height='16' align='absmiddle'>&nbsp;<a href='fav' target='main'>收藏夹</a>
    </td>
  </tr>
</table>
    </td>
  </tr>
</table>
    </td>
  </tr>
</table>
</body>
</html>


    到上面为止,我们已经在网页中实现了多级菜单的显示,并且可以用脚本来控制了。剩下的就是如何用ASP程序生成这样的网页了。
下一篇,我们将用递归的方法,来生成这样的菜单。

关于这篇文章的评论 [注意:这里仅仅是给大家提供了一个发表对文章本身看法的地方,如果有疑问,请到论坛提出] 我要提问!
hjq126        2003/8/8 17:24:00
关于树形菜单
怎样做四级、五级子菜单呢?
fasterff        2003/3/20 16:45:00
好!
好!
fasterff        2003/3/20 16:44:00
好!
yidvjmye        2003/3/11 19:02:00
这菜单不错啊
可是下集呢?赶快帖出来吧。
恋情轩        2003/3/11 11:38:00
老大,我都等急了!
写好后发份给我行不行呀
------------------
huangshiwu@163.com
cn        2003/3/10 10:07:00
什么时候开始做网上调查啊?
望眼欲穿!
标题
内容
发言
*您尚未以注册用户身份登录,不能发表评论。这里登录
您的位置
  (c)2000-2021 Yup Studio, all rights reserved.  
248.0469