玉 冰

（云南農(nóng)業(yè)職業(yè)技術(shù)學院，云南 昆明 650032）

一、元素布局設(shè)計

對于要實現(xiàn)的功能，頁面中元素布局要遵循三個原則。

1.穩(wěn)定。不會因為子菜單的顯示，影響其他元素移位，子菜單寬度改變而影響其他元素的顯示效果。

2.因為前臺使用Jquery技術(shù)實現(xiàn)，要保證元素的位置和元素命名能符合讓Jquery控制的原則，便于Jquery對元素的尋找。

3.便于用后臺代碼來填充數(shù)據(jù)。

二、布局方式分析

圖1 分布式布局方式

這種布局方式是將一級菜單放入一個大的DIV，將二級菜單放入一個小的DIV中，然后再將DIV放入一個和大的DIV同樣寬度的IDV中來實現(xiàn)，如此可能會造成一級菜單與它下面的二級菜單寬度不一致，產(chǎn)生一級菜單與二級菜單錯位的問題。

現(xiàn)在常用的嵌套式布局，將一級菜單和二級菜單都放入一個IDV中。紫色框是一個包含所有菜單的大容器，寬度與頁面相同，橙色框是代表一級菜單組，包括一級菜單和二級菜單組，二級菜單放在二級菜單組中，橙色框?qū)挾炔粫欢壊藛螕未蟆?/p>

圖2 嵌套式布局方式

三、后臺數(shù)據(jù)填充

1.查詢方法

就是將一級菜單表和二級菜單表建立連接，查詢得到一個新的數(shù)據(jù)。

選擇兩張表通過m0_id字段和m1_m0id字段一對多的關(guān)系，建立兩張表的連接，就得到一張查詢表，顯示一級菜單和二級菜單的所有信息?！霸诰€商城”一級菜單下沒有二級菜單，需要修改SQL語句做右連接。

圖3 查詢方法

SELECT t_menuL0.*，t_menuL1.* FROM t_menuL1 RIGHT JOIN t_menuL0 ON t_menuL1.m1_m0id = t_menuL0.m0_id；

2.對于每條記錄的構(gòu)建

圖4 對于每條記錄的構(gòu)建

將每條記錄包含的菜單項的信息提取出來，尋找或構(gòu)建div_menuset_m0id并將其放入界面的div_menu中。尋找或構(gòu)建a_m0_m0id（主菜單項）并將其放入菜單組層（橙色）如有子菜單內(nèi)容，構(gòu)建子菜單項div_submenu_m0id將其放入菜單組層（橙色）在頁面尋找或構(gòu)建子菜單a_m1_m0id，將構(gòu)建好的子菜單插入pnl_submenu中。

在.cs代碼中構(gòu)建橙色的層，將其插入到紫色框中；構(gòu)建一級菜單，將其插入到橙色框中；構(gòu)建二級菜單項，將其插入到橙色框中；在橙色框中構(gòu)建二級菜單。

在頁面中呈現(xiàn)的結(jié)構(gòu)每個層占據(jù)整個頁面寬度，下面通過CSS來控制每個層的顯示位置。

3.菜單顯示控制

建立一個偵聽器，鼠標移入時主菜單時偵聽相應(yīng)主菜單，對子菜單的顯示速度進行控制。

當鼠標移出時，如果偵聽的是一級主菜單，就會出現(xiàn)鼠標還在主菜單時就會使子菜單消失的情況，所以需要偵聽的是紫色的大的DIV，當鼠標移出主菜單，子菜單就消失。

圖5 頁面運行的最終效果