JavaScript + PHP 应用二:网页设计中树形菜单的动态实现

原创 2000年12月01日 10:29:00

  树形菜单,熟悉Windows程序管理器的读者一定不会陌生。单击项目左侧的+号,项目展开;再次单击,项目收缩。读过很多篇有关树形菜单的JavaScript实现方法,原理很简单,都是利用Style中display属性的控制。笔者本文的重点并不侧重于此,倒是想谈一谈如何实现每一次从数据库中提取数据并动态更新树形菜单。
  树形菜单主要用来导航。网站有很多栏目,每个栏目下有很多子栏目,栏目经常变动,如增加新栏目,改变现有栏目名称,调整主次栏目之间关系等等,如果每一次都去改动页面代码,非常不便。而且因为信息都存放在数据库中,动态实现变得可能和必要。
  本文并不侧重理论,只是为大家提供自己的一段代码,和大家一起来探讨一下PHP实现问题。为了便于说明,笔者对数据库作了一些改动,假设菜单字符串存放在menu表中,main字段存放主菜单字符串,sub字段存放子菜单字符串,subid字段存放子菜单标识。


<?php
 $DB = new My_DB();
 $DB->query("select subid, main from menu group by main order by subid");
 while ($DB->next_record()){
  $Main[] = $DB->f("main");
  $Key[] = $DB->f("subid");
 }
 /*首先,连接数据库,查询所谓的栏目名称。以上代码采用了PHPLib中的数据库函数,其中,$Main数组用来存放主菜单字符串,$Key数组用来存放子菜单关键字。大家可以采用多种方法,因人而异*/
 for ($i=0;$i<count($Main);$i++){
  $j=0;
  $DB->query("select sub, subid from menu where main='".$Main[$i]."'");
  ////利用query查询出与当前主菜单匹配的所有子菜单字符串
?>
/*以下代码和HTML代码结合到一起,大家看起来可能会不习惯,但这样代码显得简洁多了。为了模拟树形菜单,笔者源程序中使用了几个图片文件,l.gif, m.gif和p.gif,并利用onMouse事件模拟菜单的动态效果。PHP语句主要是为Javascript制作标签(tag)的id*/
<table width="140" border="0" cellspacing="0" cellpadding="0" class="f14">
  <tr>
    <td width="15"></td>
    <td id="<?php echo "m_".$Key[$i]; ?>" width="9" height="21"><img src="images/p.gif" width="9" height="21"></td>
    <td>
      <div style="cursor:hand" onclick="javascript:MakeMenu('<?php echo $Key[$i]; ?>')"  onMouseOver="javascript:MakeShow('in')" onMouseOut="javascript:MakeShow('out')">&nbsp;<?php echo $Main[$i]; ?></div>
    </td>
  </tr>
  <tr id="<?php echo "s_".$Key[$i]; ?>" style="display:none">
    <td width="15"></td>
    <td colspan="2">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="f9">
        <?php
         while ($DB->next_record()){
        ?>
          <tr>
           <td width="12">
<img src="images/<?php echo ++$j==$DB->nf()?"l.gif":"t.gif"; ?>" width="12" height="21"></td>
////需要说明一下,$j变量在这里用来决定显示什么图片。此句的意思是,子菜单的最后一项显示l.gif,其它项显示t.gif
            <td>&nbsp;<?php echo "<a href=/"yoururl/">yourstr</a>";?></td>
          </tr>
        <?php
         }
        ?>
        </table>
    </td>
  </tr>
</table>
<?php
 }
?>
到此为止,PHP的使命已经结束,大家可以把代码运行一下,看看输出是什么。总而言之,它的输出结果正是树形菜单所要的结构。下面我们需要构造Javascript代码。很简单,我不打算作向详细的描述。
<script language="javascript1.2">
<!--
 function MakeMenu(id){
  mid="m_"+id;
  sid="s_"+id;
  with (document){
   if (all(sid).style.display=="none"){
    all(sid).style.display="";
    all(mid).innerHTML="<img src='images/m.gif' width='9' height='21'>";
   }else{
    all(sid).style.display="none";
    all(mid).innerHTML="<img src='images/p.gif' width='9' height='21'>";
   }
  }
 }
 
 function MakeShow(to){
  with (document){
   if (to=='in'){
    window.event.srcElement.style.color="red";
    window.event.srcElement.style.fontWeight="bold";
   }else{
    window.event.srcElement.style.color="";
    window.event.srcElement.style.fontWeight="";
   }
  }
 } 
-->
</script>
  熟悉Javascript的读者,以上代码理解起来应该不成问题。这段代码的难点就在于PHP的实现部分,调试时遇到很大麻烦,总是提示Javascirpt错误。在排除万难之后,把这段代码奉献给大家,希望能为大家以后的网页设计工作节省一点宝贵的时间。

JAVASCRIPT + PHP 应用二:网页设计中树形菜单的动态实现

树形菜单,熟悉Windows程序管理器的读者一定不会陌生。单击项目左侧的+号,项目展开;再次单击,项目收缩。读过很多篇有关树形菜单的 JavaScript实现方法,原理很简单,都是利用Style中di...
  • luochengbang
  • luochengbang
  • 2007年09月18日 18:39
  • 1176

在网页中利用javascript实现动态时间的设计

向网页中添加一个动态时间 动态时间设计 function showTime(){ var time=new Date();//获取当前系统的时间 var y=time.getFullYear(...
  • m0_37905429
  • m0_37905429
  • 2017年04月16日 10:50
  • 933

详解用JavaScript实现"树形菜单"效果

网页里的树形菜单有两种实现方式:一种是结合后台(JSP/Struts2等), 每次下载不同的数据来刷新页面,实现树形菜单的效果。另一种是由纯JavaScript方式来实现,在树形菜单的工作过程中,不会...
  • iamshaofa
  • iamshaofa
  • 2012年08月02日 14:44
  • 4240

PHP动态网页设计(第2版)——使用PHP

一、php是如何使页面实现动态效果的。 当访问用PHP构建的网站时,它会启动以下事件序列。 1、浏览器向Web服务器发送一个请求。 2、Web服务器将请求提交给嵌入到服务器中的PHP引擎。 3...
  • Arther90
  • Arther90
  • 2013年02月04日 00:23
  • 1849

PHP动态网页设计与制作案例教程pdf

下载地址:网盘下载 内容简介 编辑 《PHP动态网页设计与制作案例教程》通过展示一个完整网站的设计和实现过程,详细地介绍动态网页设计和制作的技术和相关理论。全书共8章,主要包括:动态网...
  • cf406061841
  • cf406061841
  • 2017年07月18日 21:25
  • 582

javascript树形菜单(一):Tigra Tree Menu,实现动态数据加载

要使用一个javascript的树菜单,找了个现成的Tigra Tree Menu,看了下效果,还不错,就打算使用。  http://www.softcomplex.com/products/tigr...
  • kittaaron
  • kittaaron
  • 2013年03月15日 15:01
  • 1421

php 从数据库读取数据并生成树型可折叠菜单

  • u013632989
  • u013632989
  • 2014年05月06日 20:15
  • 2419

JavaScript + XML树型菜单

思路:利用ASP读取数据库数据,生成XML文件,然后用JS调入XML数据生成树型菜单 1.数据结构表名:InfoClass字段名称   数据类型          说明SID         int ...
  • hztgcl1986
  • hztgcl1986
  • 2007年11月19日 14:49
  • 2452

11个Javascript树形菜单

转自:http://paranimage.com/11-javascript-tree-menus/ 树形菜单能很好的呈现菜单项之前的从属关系,结构清晰明了。本文为你收集了11个Java...
  • hdchangchang
  • hdchangchang
  • 2013年12月11日 14:24
  • 1661

非常简洁的仿js树形菜单

非常简洁的仿js树形菜单
  • sinat_31016743
  • sinat_31016743
  • 2016年01月12日 22:15
  • 6252
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript + PHP 应用二:网页设计中树形菜单的动态实现
举报原因:
原因补充:

(最多只允许输入30个字)