[原创]用Dreamweaver的模板,PHP和JavaScript实现自动设定当前被选菜单
2005-11-15 01:52
671 查看
示例网站(点击下载)
/Files/zuroc/用Dreamweaver的模板,PHP和JavaScript实现自动设定当前被选菜单.zip
[u]
用CSS实现的网页菜单往往要用id来区分当前被选菜单来显示不同的效果,比如:
<div id="header"><ul>
<li id="current"><a href="xx1.php">首页</a></li>
<li><a href="xx2.php">下载</a></li>
<li><a href="xx3.php">新闻</a></li>
<li><a href="xx4.php">体育</a></li>
</ul></div>
这样一来,我们不得不在每一个网页中加入这段代码,并修改id="current"的项,更不幸的是,如果我们要增加一个链接又必须在每个网页修改这段代码,这样就大大地增加了维护的复杂度.
我们可以用PHP和JavaScript实现自动设定当前被选菜单,和单点维护,并利用Dreamweaver的模板来大大的提高工作效率.
JavaScript代码如下
function header(link_file)
{
var href=new Array();var list=new Array();
list[0]="首页";href[0]="index";
list[1]="捐赠";href[1]="donate";
list[2]="下载";href[2]="down";
list[3]="计划";href[3]="dev_map";
list[4]="成员";href[4]="about_us";
list[5]="加入我们";href[5]="join_us";
list[6]="链接";href[6]="friend_link";
list[7]="里程碑";href[7]="milestone";
list[8]="文档";href[8]="doc";
list[9]="其他";href[9]="outside_soft";
document.write("<div id=\"header\"><ul>");
for(var a=0;a<list.length;++a){
var link=".php\">"+list[a]+"</a></li>";
if(href[a]!=link_file){document.write("<li><a href=\""+href[a]+link);}
else{document.write("<li id=\"current\"><a href=\""+href[a]+link);}
}
document.write("</ul></div>");}
模板如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh"><!-- InstanceBegin template="/Templates/顶层模版.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>!AK747-享受英语</title>
<script language="JavaScript" src="../js/header.php"></script>
<link rel="stylesheet" type="text/css" href="../css/header.css">
</head>
<body>
<script language="JavaScript">
header("<?php
echo basename ($_SERVER['PHP_SELF'],".php"); //当前文件
?>");
</script>
<!-- InstanceBeginEditable name="edit" -->
<div id="header">
<ul>
<li id="current"><a href="?choose=learn_wxWidgets">学习wxWidgets</a></li>
<li><a href="?choose=learn_cpp">学习C++</a></li>
</ul>
</div>
<?php
include './php_content/doc.php';
?>
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>
示例网站见附件
作者:张沈鹏
Email:zsp747@gmail.com
[/u]
/Files/zuroc/用Dreamweaver的模板,PHP和JavaScript实现自动设定当前被选菜单.zip
[u]
用CSS实现的网页菜单往往要用id来区分当前被选菜单来显示不同的效果,比如:
<div id="header"><ul>
<li id="current"><a href="xx1.php">首页</a></li>
<li><a href="xx2.php">下载</a></li>
<li><a href="xx3.php">新闻</a></li>
<li><a href="xx4.php">体育</a></li>
</ul></div>
这样一来,我们不得不在每一个网页中加入这段代码,并修改id="current"的项,更不幸的是,如果我们要增加一个链接又必须在每个网页修改这段代码,这样就大大地增加了维护的复杂度.
我们可以用PHP和JavaScript实现自动设定当前被选菜单,和单点维护,并利用Dreamweaver的模板来大大的提高工作效率.
JavaScript代码如下
function header(link_file)
{
var href=new Array();var list=new Array();
list[0]="首页";href[0]="index";
list[1]="捐赠";href[1]="donate";
list[2]="下载";href[2]="down";
list[3]="计划";href[3]="dev_map";
list[4]="成员";href[4]="about_us";
list[5]="加入我们";href[5]="join_us";
list[6]="链接";href[6]="friend_link";
list[7]="里程碑";href[7]="milestone";
list[8]="文档";href[8]="doc";
list[9]="其他";href[9]="outside_soft";
document.write("<div id=\"header\"><ul>");
for(var a=0;a<list.length;++a){
var link=".php\">"+list[a]+"</a></li>";
if(href[a]!=link_file){document.write("<li><a href=\""+href[a]+link);}
else{document.write("<li id=\"current\"><a href=\""+href[a]+link);}
}
document.write("</ul></div>");}
模板如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh"><!-- InstanceBegin template="/Templates/顶层模版.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>!AK747-享受英语</title>
<script language="JavaScript" src="../js/header.php"></script>
<link rel="stylesheet" type="text/css" href="../css/header.css">
</head>
<body>
<script language="JavaScript">
header("<?php
echo basename ($_SERVER['PHP_SELF'],".php"); //当前文件
?>");
</script>
<!-- InstanceBeginEditable name="edit" -->
<div id="header">
<ul>
<li id="current"><a href="?choose=learn_wxWidgets">学习wxWidgets</a></li>
<li><a href="?choose=learn_cpp">学习C++</a></li>
</ul>
</div>
<?php
include './php_content/doc.php';
?>
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>
示例网站见附件
作者:张沈鹏
Email:zsp747@gmail.com
[/u]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Javascript实现的自动验证函数（原创）
- [原创]利用php和javascript实现服务器时间电子时钟
- 【原创】javascript模板引擎的简单实现
- java-web-PIO实现自动生成excel录入模板(实现下拉列表框)[原创]
- PHP&JavaScript二级联动菜单的实现方法
- PHP+JAVASCRIPT实现自动弹出打印窗口并自动跳转页面的实例
- 黄聪：PHP如何实现延迟一定时间后自动刷新当前页面、自动跳转header("refresh:1;url={$url}");
- 『原创』从屏幕右下角自动上升的窗口的Javascript实现
- JavaScriptCookie&PHPCookie实现用户登录信息自动填入
- JavaScript判断页面当前浏览设备为移动端还是PC端，实现自动加载对应端页面
- 通过组策略实现Firefox自动以当前域账号登录MOSS站点---（原创）
- 用php+javascript实现二级级联菜单的制作
- CSS+JavaScript 实现菜单功能--改进版
- javascript 自动填写表单的实现方法
- 新概念智能树形菜单--利用加权多叉树结合JavaScript树形控件实现
- PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
- [原创]超级经典聊天室系统实现 Ajax+PHP+Javascrcript+Json无刷新技术倾力打造（一）
- WPF DynamicDataDisplay 设定X轴间距最大宽度 到达时不再自动缩放的实现
- javascript采用数组实现tab菜单切换效果
- 基于JavaScript代码实现自动生成表格