玉 冰

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

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

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

1.穩(wěn)定。不會(huì)因?yàn)樽硬藛蔚娘@示，影響其他元素移位，子菜單寬度改變而影響其他元素的顯示效果。

2.因?yàn)榍芭_(tái)使用Jquery技術(shù)實(shí)現(xiàn)，要保證元素的位置和元素命名能符合讓Jquery控制的原則，便于Jquery對(duì)元素的尋找。

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

二、布局方式分析

圖1 分布式布局方式

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

現(xiàn)在常用的嵌套式布局，將一級(jí)菜單和二級(jí)菜單都放入一個(gè)IDV中。紫色框是一個(gè)包含所有菜單的大容器，寬度與頁(yè)面相同，橙色框是代表一級(jí)菜單組，包括一級(jí)菜單和二級(jí)菜單組，二級(jí)菜單放在二級(jí)菜單組中，橙色框?qū)挾炔粫?huì)被二級(jí)菜單撐大。

圖2 嵌套式布局方式

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

1.查詢方法

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

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

圖3 查詢方法

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

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

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

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

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

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

3.菜單顯示控制

建立一個(gè)偵聽(tīng)器，鼠標(biāo)移入時(shí)主菜單時(shí)偵聽(tīng)相應(yīng)主菜單，對(duì)子菜單的顯示速度進(jìn)行控制。

當(dāng)鼠標(biāo)移出時(shí)，如果偵聽(tīng)的是一級(jí)主菜單，就會(huì)出現(xiàn)鼠標(biāo)還在主菜單時(shí)就會(huì)使子菜單消失的情況，所以需要偵聽(tīng)的是紫色的大的DIV，當(dāng)鼠標(biāo)移出主菜單，子菜單就消失。

圖5 頁(yè)面運(yùn)行的最終效果