引言
由于越來越多的企業(yè)開始建立自己的網(wǎng)站，網(wǎng)站除了具有傳播信息的功能外，還往往代表企業(yè)的形象。網(wǎng)站建設(shè)商業(yè)化和廣告化的趨勢，對網(wǎng)頁設(shè)計的藝術(shù)性提出了更高的要求。雖然HTML語言提供了對常用Windows標(biāo)準(zhǔn)控件的支持，但是，由于Windows標(biāo)準(zhǔn)控件的形狀和顏色十分單一，網(wǎng)頁的視覺效果可能會很差。例如：列表框和下拉列表框只能呈現(xiàn)凹陷邊框，而且下拉列表的箭頭的顏色不能改變，滾動條只能出現(xiàn)在窗口的下邊和右邊，當(dāng)網(wǎng)頁分成多個幀的時候，滾動條就不可避免的出現(xiàn)在網(wǎng)頁的中間，破壞網(wǎng)頁的整體性。若在網(wǎng)頁的設(shè)計中主動配合Windows標(biāo)準(zhǔn)控件的形狀和顏色，網(wǎng)頁的創(chuàng)作空間就會受到限制。因此，有必要實現(xiàn)網(wǎng)頁中的自定義控件，以滿足網(wǎng)頁設(shè)計藝術(shù)化的要求。
編程原理
用客戶端的JavaScript腳本語言，對HTML語言的< UL>< /UL>、< SPAN>< /SPAN>和< DIV>< /DIV>標(biāo)記進行編程，可以在Internet Explore中實現(xiàn)網(wǎng)頁中的菜單、樹形結(jié)構(gòu)目錄、滾動條、列表框、下拉列表框及其它控件。
< SPAN>< /SPAN>標(biāo)記定義了HTML文檔中的一個行內(nèi)間隔，可以給這個間隔賦一個id屬性，給整個間隔一個統(tǒng)一的顏色、字體、邊框、背景等屬性，使整個間隔響應(yīng)相同的事件，可以用這個標(biāo)記制作菜單、樹形結(jié)構(gòu)目錄、列表框及下拉列表框的某一項。多個< SPAN>< /SPAN>標(biāo)記可以放在同一行內(nèi)，組成下拉式菜單的菜單條。
< DIV>< /DIV>標(biāo)記定義了HTML文檔中的一個矩形區(qū)域，可以給這個區(qū)域賦一個id，給整個區(qū)域一個統(tǒng)一的顏色、字體、邊框、背景等屬性，使整個區(qū)域響應(yīng)相同的事件，通過設(shè)置< DIV>< /DIV>標(biāo)記的style.display屬性為block或none可以在運行時動態(tài)的顯示或隱藏這個區(qū)域，可以用這個標(biāo)記制作樹形結(jié)構(gòu)目錄的子目錄、彈出式菜單、下拉式菜單的某一子菜單、列表框及下拉列表框。通過程序代碼設(shè)置< DIV>< /DIV>標(biāo)記的style.posLeft、style.posTop、style.posWidth、style.posHeight屬性，可以在運行時動態(tài)的改變< DIV>< /DIV>區(qū)域的位置和大小，用來設(shè)計滾動條。
列表框和下拉列表框
在一個< DIV>< /DIV>標(biāo)記中放置一組< SPAN>< /SPAN>標(biāo)記，不同的< SPAN>< /SPAN>標(biāo)記間用< BR>標(biāo)記換行，形成一個列表框。給< SPAN>< /SPAN>標(biāo)記添加事件，使其能根據(jù)鼠標(biāo)的位置改變顏色。在< SPAN>< /SPAN>標(biāo)記的onclick事件中，完成指定的操作或?qū)⑺x擇的項目的innerText或id屬性存放與隱藏控件或變量中，以便檢索所選擇的項目。
在網(wǎng)頁中放置一個< SPAN>< /SPAN>標(biāo)記作為下拉列表框。
在下拉列表框的右邊放置另外一個< SPAN>< /SPAN>標(biāo)記，設(shè)置這個< SPAN>< /SPAN>標(biāo)記的背景圖片，形成下拉箭頭。在下拉列表框的下邊放置一個< DIV>< /DIV>標(biāo)記制作的列表框作為下拉列表，設(shè)置下拉列表的style.display屬性為none，然后根據(jù)鼠標(biāo)動作顯示或隱藏列表。編寫列表項目的onclick事件處理程序，將所選擇的項目文本放在下拉列表框中。
彈出式菜單
由于網(wǎng)頁不能響應(yīng)鼠標(biāo)右鍵，因此，在網(wǎng)頁中只能用鼠標(biāo)左鍵的click事件實現(xiàn)彈出式菜單。按照列表框的設(shè)計方法設(shè)計彈出式菜單，將彈出式菜單< DIV>< /DIV>標(biāo)記的style.display屬性設(shè)置為none。在document的click事件中，通過設(shè)置< DIV>< /DIV>標(biāo)記的style.posLeft和style.posTop屬性，將彈出式菜單移動到光標(biāo)所在的位置，將< DIV>< /DIV>標(biāo)記的style.display屬性設(shè)置為block，顯示菜單。當(dāng)鼠標(biāo)離開菜單時，隱藏菜單。
下拉式菜單
用一個< SPAN>< /SPAN>標(biāo)記制作菜單條，菜單條< SPAN>< /SPAN>標(biāo)記中嵌
套幾個< SPAN>< /SPAN>標(biāo)記作為子菜單。按照彈出式菜單的設(shè)計方法，分別為每一個子菜單設(shè)計下拉菜單。通過響應(yīng)子菜單的鼠標(biāo)事件，顯示或隱藏下拉式菜單。
為了方便程序移植，可以將菜單數(shù)據(jù)放在數(shù)組里，在程序中通過document對象的write方法動態(tài)生成菜單。
滾動條
在網(wǎng)頁中放置一個< DIV>< /DIV>標(biāo)記作為滾動條的背景，設(shè)置背景的顏色和圖片，背景圖片的重復(fù)屬性設(shè)置為repeat-x。在背景區(qū)域的左右兩端放置兩個< DIV>< /DIV>標(biāo)記作為滾動條的左右箭頭，設(shè)置左右箭頭的背景顏色和背景圖片。在背景區(qū)域的中間放置一個< DIV>< /DIV>標(biāo)記作為滾動條的滑塊，設(shè)置滑塊的背景顏色和背景圖片，背景圖片的重復(fù)屬性設(shè)置為repeat-x。在滾動條的上面覆蓋一個事件< DIV>< /DIV>標(biāo)記用來響應(yīng)鼠標(biāo)事件，不設(shè)置這個標(biāo)記的背景顏色和背景圖片屬性，使其透明。為了能正確的看到滾動條的各個部分并使事件< 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和滾動條各個部件的相對位置進行不同的滾動操作。
在window對象的load事件和resize事件中根據(jù)窗口和網(wǎng)頁的大小改變滾動條各個部件的大小和位置。在網(wǎng)頁中放置一個< DIV>< /DIV>標(biāo)記，將網(wǎng)頁中需要滾動的部分都放在這個< DIV>< /DIV>區(qū)域中。在滾動條的滾動事件中通過改變這個標(biāo)記的style.posLeft和style.posTop屬性，實現(xiàn)網(wǎng)頁的滾動。
用以上方法實現(xiàn)的滾動條，可以設(shè)計成任意的大小和顏色，放置在網(wǎng)頁的任意位置，選擇任意的圖片作為箭頭和滑塊的背景，極大的滿足藝術(shù)化設(shè)計網(wǎng)頁的需求。
本文利用了HTML標(biāo)記< SPAN>< /SPAN>和< DIV>< /DIV>的風(fēng)格屬性，在網(wǎng)頁中實現(xiàn)了菜單、樹形結(jié)構(gòu)目錄和自定義的滾動條、列表框、下拉列表框。到目前為止，只有運行在Windows平臺下的瀏覽器Internet Explore支持這種風(fēng)格屬性，實際應(yīng)用中應(yīng)當(dāng)判斷客戶瀏覽器類型，以便提供不同的網(wǎng)頁。
