引言

　　由于越來越多的企業(yè)開始建立自己的網(wǎng)站，網(wǎng)站除了具有傳播信息的功能外，還往往代表企業(yè)的形象。網(wǎng)站建設(shè)商業(yè)化和廣告化的趨勢，對網(wǎng)頁設(shè)計(jì)的藝術(shù)性提出了更高的要求。雖然HTML語言提供了對常用Windows標(biāo)準(zhǔn)控件的支持，但是，由于Windows標(biāo)準(zhǔn)控件的形狀和顏色十分單一，網(wǎng)頁的視覺效果可能會(huì)很差。例如：列表框和下拉列表框只能呈現(xiàn)凹陷邊框，而且下拉列表的箭頭的顏色不能改變，滾動(dòng)條只能出現(xiàn)在窗口的下邊和右邊，當(dāng)網(wǎng)頁分成多個(gè)幀的時(shí)候，滾動(dòng)條就不可避免的出現(xiàn)在網(wǎng)頁的中間，破壞網(wǎng)頁的整體性。若在網(wǎng)頁的設(shè)計(jì)中主動(dòng)配合Windows標(biāo)準(zhǔn)控件的形狀和顏色，網(wǎng)頁的創(chuàng)作空間就會(huì)受到限制。因此，有必要實(shí)現(xiàn)網(wǎng)頁中的自定義控件，以滿足網(wǎng)頁設(shè)計(jì)藝術(shù)化的要求。

　　編程原理

　　用客戶端的JavaScript腳本語言，對HTML語言的< UL>< /UL>、< SPAN>< /SPAN>和< DIV>< /DIV>標(biāo)記進(jìn)行編程，可以在Internet Explore中實(shí)現(xiàn)網(wǎng)頁中的菜單、樹形結(jié)構(gòu)目錄、滾動(dòng)條、列表框、下拉列表框及其它控件。

　　< SPAN>< /SPAN>標(biāo)記定義了HTML文檔中的一個(gè)行內(nèi)間隔，可以給這個(gè)間隔賦一個(gè)id屬性，給整個(gè)間隔一個(gè)統(tǒng)一的顏色、字體、邊框、背景等屬性，使整個(gè)間隔響應(yīng)相同的事件，可以用這個(gè)標(biāo)記制作菜單、樹形結(jié)構(gòu)目錄、列表框及下拉列表框的某一項(xiàng)。多個(gè)< SPAN>< /SPAN>標(biāo)記可以放在同一行內(nèi)，組成下拉式菜單的菜單條。

　　< DIV>< /DIV>標(biāo)記定義了HTML文檔中的一個(gè)矩形區(qū)域，可以給這個(gè)區(qū)域賦一個(gè)id，給整個(gè)區(qū)域一個(gè)統(tǒng)一的顏色、字體、邊框、背景等屬性，使整個(gè)區(qū)域響應(yīng)相同的事件，通過設(shè)置< DIV>< /DIV>標(biāo)記的style.display屬性為block或none可以在運(yùn)行時(shí)動(dòng)態(tài)的顯示或隱藏這個(gè)區(qū)域，可以用這個(gè)標(biāo)記制作樹形結(jié)構(gòu)目錄的子目錄、彈出式菜單、下拉式菜單的某一子菜單、列表框及下拉列表框。通過程序代碼設(shè)置< DIV>< /DIV>標(biāo)記的style.posLeft、style.posTop、style.posWidth、style.posHeight屬性，可以在運(yùn)行時(shí)動(dòng)態(tài)的改變< DIV>< /DIV>區(qū)域的位置和大小，用來設(shè)計(jì)滾動(dòng)條。

　　列表框和下拉列表框

　　在一個(gè)< DIV>< /DIV>標(biāo)記中放置一組< SPAN>< /SPAN>標(biāo)記，不同的< SPAN>< /SPAN>標(biāo)記間用< BR>標(biāo)記換行，形成一個(gè)列表框。給< SPAN>< /SPAN>標(biāo)記添加事件，使其能根據(jù)鼠標(biāo)的位置改變顏色。在< SPAN>< /SPAN>標(biāo)記的onclick事件中，完成指定的操作或?qū)⑺x擇的項(xiàng)目的innerText或id屬性存放與隱藏控件或變量中，以便檢索所選擇的項(xiàng)目。

　　在網(wǎng)頁中放置一個(gè)< SPAN>< /SPAN>標(biāo)記作為下拉列表框。

　　在下拉列表框的右邊放置另外一個(gè)< SPAN>< /SPAN>標(biāo)記，設(shè)置這個(gè)< SPAN>< /SPAN>標(biāo)記的背景圖片，形成下拉箭頭。在下拉列表框的下邊放置一個(gè)< DIV>< /DIV>標(biāo)記制作的列表框作為下拉列表，設(shè)置下拉列表的style.display屬性為none，然后根據(jù)鼠標(biāo)動(dòng)作顯示或隱藏列表。編寫列表項(xiàng)目的onclick事件處理程序，將所選擇的項(xiàng)目文本放在下拉列表框中。

　　彈出式菜單

　　由于網(wǎng)頁不能響應(yīng)鼠標(biāo)右鍵，因此，在網(wǎng)頁中只能用鼠標(biāo)左鍵的click事件實(shí)現(xiàn)彈出式菜單。按照列表框的設(shè)計(jì)方法設(shè)計(jì)彈出式菜單，將彈出式菜單< DIV>< /DIV>標(biāo)記的style.display屬性設(shè)置為none。在document的click事件中，通過設(shè)置< DIV>< /DIV>標(biāo)記的style.posLeft和style.posTop屬性，將彈出式菜單移動(dòng)到光標(biāo)所在的位置，將< DIV>< /DIV>標(biāo)記的style.display屬性設(shè)置為block，顯示菜單。當(dāng)鼠標(biāo)離開菜單時(shí)，隱藏菜單。

　　下拉式菜單

　　用一個(gè)< SPAN>< /SPAN>標(biāo)記制作菜單條，菜單條< SPAN>< /SPAN>標(biāo)記中嵌

　　套幾個(gè)< SPAN>< /SPAN>標(biāo)記作為子菜單。按照彈出式菜單的設(shè)計(jì)方法，分別為每一個(gè)子菜單設(shè)計(jì)下拉菜單。通過響應(yīng)子菜單的鼠標(biāo)事件，顯示或隱藏下拉式菜單。

　　為了方便程序移植，可以將菜單數(shù)據(jù)放在數(shù)組里，在程序中通過document對象的write方法動(dòng)態(tài)生成菜單。

　　滾動(dòng)條

　　在網(wǎng)頁中放置一個(gè)< DIV>< /DIV>標(biāo)記作為滾動(dòng)條的背景，設(shè)置背景的顏色和圖片，背景圖片的重復(fù)屬性設(shè)置為repeat-x。在背景區(qū)域的左右兩端放置兩個(gè)< DIV>< /DIV>標(biāo)記作為滾動(dòng)條的左右箭頭，設(shè)置左右箭頭的背景顏色和背景圖片。在背景區(qū)域的中間放置一個(gè)< DIV>< /DIV>標(biāo)記作為滾動(dòng)條的滑塊，設(shè)置滑塊的背景顏色和背景圖片，背景圖片的重復(fù)屬性設(shè)置為repeat-x。在滾動(dòng)條的上面覆蓋一個(gè)事件< DIV>< /DIV>標(biāo)記用來響應(yīng)鼠標(biāo)事件，不設(shè)置這個(gè)標(biāo)記的背景顏色和背景圖片屬性，使其透明。為了能正確的看到滾動(dòng)條的各個(gè)部分并使事件< DIV>< /DIV>區(qū)域能截獲鼠標(biāo)事件，應(yīng)使事件< DIV>< /DIV>標(biāo)記的Z-INDEX屬性最大，背景< DIV>< /DIV>標(biāo)記的Z-INDEX屬性最小。在事件< DIV>< /DIV>標(biāo)記的鼠標(biāo)事件中，通過比較鼠標(biāo)window.event.clientX和滾動(dòng)條各個(gè)部件的相對位置進(jìn)行不同的滾動(dòng)操作。

　　在window對象的load事件和resize事件中根據(jù)窗口和網(wǎng)頁的大小改變滾動(dòng)條各個(gè)部件的大小和位置。在網(wǎng)頁中放置一個(gè)< DIV>< /DIV>標(biāo)記，將網(wǎng)頁中需要滾動(dòng)的部分都放在這個(gè)< DIV>< /DIV>區(qū)域中。在滾動(dòng)條的滾動(dòng)事件中通過改變這個(gè)標(biāo)記的style.posLeft和style.posTop屬性，實(shí)現(xiàn)網(wǎng)頁的滾動(dòng)。

　　用以上方法實(shí)現(xiàn)的滾動(dòng)條，可以設(shè)計(jì)成任意的大小和顏色，放置在網(wǎng)頁的任意位置，選擇任意的圖片作為箭頭和滑塊的背景，極大的滿足藝術(shù)化設(shè)計(jì)網(wǎng)頁的需求。

　　本文利用了HTML標(biāo)記< SPAN>< /SPAN>和< DIV>< /DIV>的風(fēng)格屬性，在網(wǎng)頁中實(shí)現(xiàn)了菜單、樹形結(jié)構(gòu)目錄和自定義的滾動(dòng)條、列表框、下拉列表框。到目前為止，只有運(yùn)行在Windows平臺(tái)下的瀏覽器Internet Explore支持這種風(fēng)格屬性，實(shí)際應(yīng)用中應(yīng)當(dāng)判斷客戶瀏覽器類型，以便提供不同的網(wǎng)頁。