分享
 
 
 

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

王朝html/css/js·作者佚名  2006-01-08
窄屏简体版  字體: |||超大  

树形菜单,熟悉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]."'");

[/url] ////利用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>

[url=file://需]////需要说明一下,$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错误。在排除万难之后,把这段代码奉献给大家,希望能为大家以后的网页设计工作节省一点宝贵的时间。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有