New! 動態 N 階選單 By Dreamweaver & PHP MySQL 終極版
在許多場合中,動態的N階選單是個很好用的功能,例如出現選擇「郵遞區號」的場合,主選項選擇縣市、副選項則會出現所對應的縣市中鄉鎮的列表,或者是主選項選擇部門,副選項則可出現所對應部門內的所有職稱、人員等。
在這之前,一般在需要製作到相關功能時會求助到JavaScript,或者郵遞區號的選單可以找到Extension來使用,但這Extension實際上也是包裝著JavaScript,以這個方式有一個缺點就是日後管理不易、以及要修改為其他應用的時候麻煩,必須在原始程式碼的模式下按照原本的格式作修改,看著密密麻麻的原始碼還沒開始要改就已經頭昏眼花了。
今天要介紹的方式只讓各位自己修改原始程式碼「輸入11個英文字母」,其他的都是利用Dreamweaver MX 2004的內建功能組合起來,配合得則是PHP+MySQL,如果使用其他資料庫+其他語言來達成的話,則是大同小異的,這是第一次以「影像檔案」來做教學檔(你們聽不到我的聲音就是了),若有問題的話可以至討論區一個專屬的主題內討論。
首先在這先對資料庫介紹一下,這樣子應該有助於各位在接著下來看影片說故事。
基本上這個教學的資料庫是建立在一個資料庫(test)內含兩個資料表(main、sub)的基礎上。
main資料表:
|
欄位
|
型態
|
屬性
|
Null
|
預設值
|
附加
|
| tinyint(4) | 否 | auto_increment | |||
| tinytext | 否 |
|
ID
|
COLOR
|
|
1
|
黃色
|
|
2
|
紅色
|
|
3
|
綠色
|
sub資料表:
|
欄位
|
型態
|
屬性
|
Null
|
預設值
|
附加
|
| tinyint(4) | 否 | auto_increment | |||
| smallint(6) | 否 | 0 | |||
| tinytext | 否 |
|
ID
|
CLASS
|
SUB
|
|
1
|
1
|
香蕉
|
|
2
|
1
|
木瓜
|
|
3
|
1
|
香瓜
|
|
4
|
2
|
蕃茄
|
|
5
|
2
|
火龍果
|
|
6
|
3
|
芭樂
|
|
7
|
3
|
西瓜
|
這樣子大家應該很清楚了,main資料表的ID欄位,每一個ID各代表著一個顏色,而與mian.ID相對應的就是sub資料表的CLASS欄位,所以sub資料表中第一筆到第三筆資料中SUB欄位記錄的都是同樣外皮是「黃色」的水果(香瓜好像有點不像….)
總而言之就是要製作一個像這樣的選單#Sample Link,瞭解之後呢,就來看看影片檔案吧。
教學名稱:製作「動態二階選單」
影片長度:三分零九秒
影片大小:1689K
影片尺寸:640×480
( 用影片檔就是想少打點字,想不到還是得打這麼多><” )
–
影片中提到修改< option value=”menu.php?ID=< ? php echo $row_rsmain['ID'] ? >”部分
送進資料庫後值也是照單全收
因此跳頁部分要從內定產生之JavaScript著手
<script language=”JavaScript” type=”text/JavaScript”>
<!–
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+”.location=’”+’網頁.php?URL參數ID=‘+selObj.options[selObj.selectedIndex].value+”‘”);
if (restore) selObj.selectedIndex=0;
}
//–>
</script>






最新回應