|
續(xù)上篇
上一篇我們已經(jīng)確定了樹型菜單的功能，數(shù)據(jù)庫結構，以及所要用到的一些函
數(shù)。現(xiàn)在可以開始程序的設計了。由于樹型菜單要在網(wǎng)頁上實現(xiàn)動態(tài)展開子樹的效
果，所以需要用到DHTML。我們先來分析一下如何在客戶端實現(xiàn)這樣的動態(tài)效果。
一、實現(xiàn)動態(tài)菜單的客戶端
在這里，我們先不管ASP的程序，僅來分析一下如何在客戶端的網(wǎng)頁中實現(xiàn)展
開菜單的動態(tài)效果。首先，要展開一個子菜單，可以把子菜單放在一個圖層或者一
個表格里，用CSS樣式里的dsiplay屬性來控制它。如果把display屬性設為none,
則隱藏這個菜單；反過來，如果設為一個值，比如block,則顯示。有了這種方法，
就可以用JS腳本來控制了。
1、實際隱藏的菜單。
現(xiàn)在我們先來做一個這樣的菜單，暫時我們還不寫腳本程序，只是來顯示一下
效果。既然是看效果，就先顯示一個只有一個項的二層菜單吧，為了區(qū)分不同層次的
菜單，我們把子菜單放在一個表格中，再把這個表格放在上一級菜單所在表格的一個
單元格中。代碼如下：
樹型菜單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='http://cfan.net.cn/info/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='http://cfan.net.cn/info/images/line_cco.gif' width='16' height='16'>
</td>
<td height='16'>
<img src='http://cfan.net.cn/info/images/fc.gif' width='16' height='16' align='absmiddle'>
<a href='mgw' target='main'>名古屋</a>
</td>
</tr>
</td>
</tr>
</body>
</html>
</BODY>
</HTML>
為了突出效果，我們在里面加入了CSS來控制不同對象的顯示效果。當然，上面的鏈接都是任意指定的。
顯示一下上面的文件，我們可以看到"名古屋“這個子菜單被隱藏了。現(xiàn)在把上面文件中的
<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屬性來實現(xiàn)子菜單的顯示的。現(xiàn)在我們來加入腳本進
行控制。只要在腳本里改變子菜單的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)"
現(xiàn)在再顯示一下這個網(wǎng)頁，然后點擊“我的電腦”前的圖片，就可以看到子菜單的顯示和隱藏的效果了。
3、完整的腳本控制
上面我們已經(jīng)實現(xiàn)了子菜單的顯示和隱藏，但是上面的是只有兩個菜單項的情況，實際的情況要
比上面的復雜。我們來分析一個典型的情況：每個菜單（除了根菜單）外，都有三項內(nèi)容：
1）連接的樹型圖：可能是“+”或者“-”或者其它的幾種連線。如果是“+”或者“-”，就要給它加上鏈接
點擊后展開下一級菜單。根菜單沒有這一項。
2）圖標：根菜單是電腦的圖樣，其它的菜單是文件夾的圖樣。同樣也要加上鏈接來展開下一級菜單。
3）文字：菜單的顯示文字，點擊后指向一個新鏈接。
對于每一級菜單，我們按一定的方式進行編號，以便在ASP程序中生成：用L表示行，用R表示列。對于某個
菜單，上面的第一項（連接圖）標為第一個；第二項（圖標）標為第二個；它的子菜單所在的表格，標為第
三個。示意圖如下
----------------------
| L1R1 | L1R2 | 文字 |
----------------------
| | --L2R2------|
| | | |
| | | |
| | | |
| | |-----------|
----------------------
根據(jù)上面的結構圖，我們來改進一下網(wǎng)頁，一是每個菜單的連接圖和圖標都要加上點擊的動作，二是腳本
程序要修改一下。對于根菜單，沒有第一項，所有點擊的動作里前兩項留空。下面是一個典型的例子：
<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='http://cfan.net.cn/info/images/fo.gif';
if (self!=='')
{
sr=self.src;
//len=sr.length;
var str1="http://cfan.net.cn/info/images/cc.gif"
var str2='http://cfan.net.cn/info/images/ctc.gif'
//alert(sr);
if (sr.indexOf(str1)!==(-1))
sr=sr.replace('http://cfan.net.cn/info/images/cc.gif','images/co.gif');
else
{
if (sr.indexOf(str2)!==(-1))
sr=sr.replace('http://cfan.net.cn/info/images/ctc.gif','images/cto.gif');
}
//alert(sr);
self.src=sr;
}
}
else
{
subid.style.display='none';
if (btnid!=='')
btnid.src='http://cfan.net.cn/info/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','http://cfan.net.cn/info/images/cc.gif');
else
{
if (sr.indexOf(str2)!==(-1))
sr=sr.replace('images/cto.gif','http://cfan.net.cn/info/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='http://cfan.net.cn/info/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='http://cfan.net.cn/info/images/cc.gif' width='16' height='16' class='cur'>
</td>
<td height='16'>
<img id='L3R4' onclick='showhide(L3R3,L3R4,L4R4)' src='http://cfan.net.cn/info/images/fc.gif' class='cur' width='16' height='16' align='absmiddle'>
<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='http://cfan.net.cn/info/images/line_cco.gif' width='16' height='16'>
</td>
<td height='16'>
<img src='http://cfan.net.cn/info/images/fc.gif' width='16' height='16' align='absmiddle'> <a href='musci' target='main'>音樂</a>
</td>
</tr>
</td>
</tr>
<tr height='16'>
<td width='16' height='16'>
<img id='L5R5' onclick='showhide(L5R5,L5R6,L6R6)' src='http://cfan.net.cn/info/images/ctc.gif' width='16' height='16' class='cur'>
</td>
<td height='16'>
<img id='L5R6' onclick='showhide(L5R5,L5R6,L6R6)' src='http://cfan.net.cn/info/images/fc.gif' class='cur' width='16' height='16' align='absmiddle'>
<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='http://cfan.net.cn/info/images/line_cco.gif' width='16' height='16'>
</td>
<td height='16'>
<img src='http://cfan.net.cn/info/images/fc.gif' width='16' height='16' align='absmiddle'> <a href='fav' target='main'>收藏夾</a>
</td>
</tr>
</td>
</tr>
</td>
</tr>
</body>
</html>
到上面為止，我們已經(jīng)在網(wǎng)頁中實現(xiàn)了多級菜單的顯示，并且可以用腳本來控制了。剩下的就是如何用ASP程序生成這樣的網(wǎng)頁了。
下一篇，我們將用遞歸的方法，來生成這樣的菜單。
|
