王愛華


摘 要:利用網頁中嵌套的div元素結合樣式的相對定位和絕對定位技術,通過訪問JSON數據以及應用腳本中閉包的特點,制作一款簡單實用的省市區聯動菜單。
關鍵詞:定位;JSON數據;閉包;省市區聯動
中圖分類號:TP393 文獻標識碼:A 文章編號:1671-2064(2020)12-0057-02
省市區聯動在很多購物網站中使用,用戶填寫收件地址時,通過省市區聯動功能選擇省份、地市和區鎮,用起來非常方便。本文將使用網站開發中的定位技術、腳本中的閉包技術,結合訪問JSON數據來實現一款美觀方便的省市區聯動菜單。
1 運行效果說明
頁面初始運行時,只顯示圖1①的內容,鼠標指向此處時,顯示圖1②的部分,此時若是直接點擊請選擇地市或者請選擇區鎮,打開的內容區都為空,若是點擊請選擇省份,則顯示圖1下方所有省份以供用戶選擇。
若從所示省份中選擇山東省,修改選項卡名稱為山東省之后,直接跳轉到請選擇地市區域,顯示山東省所有地市,若選擇濟南市,則修改選項卡名稱后,直接跳轉到請選擇區鎮區域,顯示濟南市所有區鎮,若選擇歷下區,則將選項卡名稱改為歷下區,至此,一輪選擇完畢,圖1①內容變成“山東省/濟南市/歷下區”,鼠標離開之后,將收起下面所有的信息,只顯示選擇的結果。
2 頁面元素的結構和樣式要求
生成頁面元素的代碼如下。




類名為dW的元素是頂層元素,寬400像素,相對定位。
Id為tabW的元素,設置圖1①所示界面,高20像素,填充5像素,邊框1像素灰色,絕對定位,z軸取值為2,表示將其置于divW元素的前方,縱橫坐標為0,該div占據縱坐標空間為0到31像素。
Id為divW的元素,寬380像素,最小高度60像素,設置選項卡區,顯示相應的省份、地市或者區鎮,高度需要跟隨變化;下填充0,其余填充10像素,邊框1像素灰色,白色背景用于遮擋后面內容,絕對定位,z軸為1,縱坐標31像素,初始狀態隱藏。
當鼠標指向divW時,使用:hover和子元素選擇符設置tabW的下邊框為白色,設置divW顯示,通過tabW的白色下邊框覆蓋divW上邊框中相應部分,達到圖1①和②上下一體的效果。
選項卡區使用類名divT定義,寬380像素,高34像素,絕對定位,z軸為2。每個選項卡使用類名tab定義,高20像素,填充5像素,右邊距5像素,邊框2像素灰色,下邊框2像素暗紅色,向左浮動,字號10pt,文本行高20像素。選中的選項卡使用類名tabS定義,邊框2像素,顏色暗紅,下邊框2像素白色,做到選項卡和下面內容區連為一個整體。
每個內容區使用類名cont定義,寬380像素,上填充10像素,邊距auto,上邊框2像素暗紅色,絕對定位,z軸為1,縱坐標42像素,這是因為盒子divW有10像素上填充,每個選項卡元素總高度為34像素,所以選項卡在divW中占據的縱坐標范圍為10到43像素,內容區的2像素上邊框需要與選項卡的下邊框重合,重合的兩個像素為42像素和43像素,所以內容區的縱坐標需要設置為42像素。
省份、地市和區鎮三個內容區除了使用類名cont之外,分別應用了prov、city和area類名。內容區中顯示的所有省份、地市或者區鎮名稱,都使用span元素定界,通過浮動將span設置為橫向排列的塊元素,寬95像素,高30像素,字號10pt,藍色文本,鼠標手狀。
3 JSON數據的定義和訪問
省市區聯動功能中,使用的省市區名稱非常多,需要定義JSON數據。為了能夠讓讀者理解數據的結構和定義方式,使用圖2展示了北京市的數據。
數組中每一個元素都是一個對象,對象擁有name和city兩個屬性,name取值為省份名稱,city取值又是一個數組,數組中每個元素都是一個對象,對象擁有name和area兩個屬性,name取值為地市名稱,area取值是一個一維數組,數組元素內容是當前地市下面所有區鎮名稱。對于直轄市來說,city數組只有一個對象元素,對于省份來說,city數組中對象元素的個數取決于地市的個數。使用$.getJSON()方法讀取JSON數據之后保存在全局變量city中,方便下面操作。
4 使用閉包實現省市區聯動功能
首先對數組city進行遍歷,將所有省份名稱使用span標記定界之后連接在一起,保存在變量contP中,為接下來顯示省份做好準備。
4.1 點擊選項卡時的功能設置
定義選擇省份、地市和區鎮三個選項卡的點擊事件處理函數$(“.tab”).click(function(){…}),該函數是頂層函數,功能如下。
使用jQuery的移除類名方法去掉所有選項卡中引用的tabS類名,恢復其初始狀態,同時隱藏所有內容區;之后為當前選項卡添加類名tabS,將其設置為選中狀態,獲取該選項卡索引,根據索引設置相應內容區為顯示狀態;為保證divW的高度能夠跟隨不同內容區內容多少變化,需要判斷選項卡的索引,若是0,表示點擊的是請選擇省份選項卡,將變量contP的內容設置為內容區prov的內容,獲取該內容區的高度,增加60像素之后,重新設置為divW的高度;若當前選項卡索引是1或者2,也就是點擊的是請選擇地市或請選擇區鎮時,分別獲取city和area內容區的高度,增加60像素之后設置為divW的高度。
4.2選擇省份
定義省份的事件處理函數$(“.prov>span”).click(function(){…}),該函數是選項卡點擊事件函數的閉包,功能如下。
獲取點擊的省份名稱保存在變量provT中,替換掉省份選項卡的內容。獲取該省份的索引,保存在變量provI中,通過該索引獲取省份下面的地市;完成該操作之后,使用觸發器方法觸發地市選項卡的click事件;每次重新選擇省份之后,需要清除之前選擇過的地市和區鎮信息,恢復原“請選擇地市”和“請選擇區鎮”內容,清除之前的區鎮選項卡對應的內容區的內容;遍歷當前選中省份的所有地市,以span元素連接在一起放在變量contC中,將contC內容作為內容區city的內容,獲取內容區city的高度,增加60像素之后,設置為divW的高度。
4.3 選擇地市
定義地市的事件處理函數$(“.city>span”).click(function(){…}),該函數是省份點擊事件函數的閉包,功能如下。
獲取點擊的地市名稱保存在變量cityT中,替換掉地市選項卡的內容。獲取當前地市的索引,保存在變量cityI中,通過該索引獲取地市下面的區鎮;完成該操作之后,使用觸發器方法觸發區鎮選項卡的click事件。每次重新選擇地市之后,需要重新選擇區鎮,因此要將之前選擇的區鎮信息去掉,設置區鎮選項卡的文本為“請選擇區鎮”;遍歷將當前選中地市的所有區鎮,以span元素內容形式連接在一起放在變量contA中,將contA內容作為內容區area的內容,獲取內容區area的高度,增加60像素之后,設置為divW的高度。
4.4選擇區鎮
定義區鎮的事件處理函數$(“.area>span”).click(function(){…}),該函數是地市點擊事件函數內部的閉包,功能如下。
獲取點擊的區鎮名稱保存在變量areaT中,替換掉區鎮選項卡的內容;設置變量selT的取值為選擇的結果,例如“山東省/濟南市/歷下區”,作為選項卡“請選擇省份、地市和區鎮”的內容。
5 結語
本文根據閉包的功能特點,使用四層嵌套函數完成省市區聯動菜單,先點擊省份選項卡,在顯示的省份信息中點擊所屬的省份名稱,點擊省份下面的地市名稱,點擊地市下面的區鎮名稱,每一層函數的功能必須基于上一層函數的結果。選擇了一次省份之后,可以反復重新選擇該省份下面的地市和地市下面的區鎮,通過閉包有效保留了父函數中局部變量的取值。
使用該方案實現的省市區聯動菜單,可以嵌入在頁面中任意一個位置,結構清晰,應用方便。