{ 在以前的HTML里,元素的位置只能依次排列,我們很難地定位與控制網(wǎng)頁(yè)中的一些元素。CSS2Cascading Style Sheet Level 2,層疊樣式單第二版的布局Layout屬性出現(xiàn)并得到瀏覽器的廣泛支持之后,我們不僅可以靜態(tài)地實(shí)現(xiàn)以上目的,而且可以根據(jù)鼠標(biāo)、鍵盤(pán)、時(shí)間等預(yù)定義好的外界事件動(dòng)態(tài)地改變布局。時(shí)下非常流行的網(wǎng)頁(yè)中“活動(dòng)的層”便是它的一種形象的運(yùn)用,我們這里要講的是如何運(yùn)用這些屬性結(jié)合一些DHTML對(duì)象在網(wǎng)頁(yè)中實(shí)現(xiàn)類(lèi)似Windows窗口的下拉菜單(如圖所示)。請(qǐng)看以下代碼及詳細(xì)說(shuō)明。
<-- 以下部分應(yīng)該插在代碼的<head>之后 -->
<style><--
/ 這是一些CSS樣式。其中″btnTD″是按鈕在被按下之前“凸起”的樣式類(lèi):邊框被設(shè)置為寬度為1個(gè)像素的實(shí)線,其中左邊框和上邊框顏色為淺色(這里為白色),右下邊框?yàn)樯钌ㄉ罨疑绻尘盀榛疑模龋裕停淘兀ㄈ鐔卧瘢┦褂眠@個(gè)樣式的話,那非常像一個(gè)“凸出”的按鈕;“btnDTD”是按鈕被按下時(shí)“凹下”的樣式。 /
.btnTD border-left 1 solid #ffffff border-right 1 solid #808080
border-top 1 solid #ffffff border-bottom 1 solid #808080
.btnDTD border-left 1 solid #808080 border-right 1 solid #ffffff
border-top 1 solid #808080 border-bottom 1 solid #ffffff
td font-family 宋體 font-size 9pt
--></style>
<script language=″JavaScript″><--
//判斷哪個(gè)按鈕被按下的全局變量
var intBlnClk=0
//鼠標(biāo)經(jīng)過(guò)、離開(kāi)、點(diǎn)擊更改單元格CSS樣式的函數(shù)
function mOvrOutobjSrc
var argvargcblnActivestrColorstrBgColorstrClassstrClassDstrCursor
argv=mOvrOut.argumentsargc=argv.length
/默認(rèn)情況下不將當(dāng)前對(duì)象置為“”/
blnActive=argc>1﹖evalargv[1]false
/默認(rèn)鼠標(biāo)經(jīng)過(guò)當(dāng)前對(duì)象的樣式為“凸出的按鈕形”/
strClass=argc>2 && argv[2]=′′﹖argv[2]′btnTD′
/默認(rèn)鼠標(biāo)點(diǎn)擊的時(shí)候當(dāng)前對(duì)象為“凹下的按鈕形”/
strClassD=argc>3 && argv[3]=′′﹖argv[3]′btnDTD′
/將當(dāng)前對(duì)象時(shí)候的前景色為白色、背景色為藍(lán)色、鼠標(biāo)樣式為手形/
strColor=′#ffffff′strBgColor=′#000080′strCursor=′hand′
/IE4及其更高版本才支持這些JavaScript對(duì)CSS樣式的動(dòng)態(tài)改變/
ifdocument.all
//將當(dāng)前對(duì)象的鼠標(biāo)樣式置為參數(shù)傳遞值
objSrc.style.cursor=strCursor
//如果是鼠標(biāo)進(jìn)入當(dāng)前對(duì)象范圍
ifobjSrc.containsevent.fromElement
/設(shè)置為活動(dòng)樣式/
ifblnActive objSrc.bgColor=strBgColorobjSrc.style.color=strColor
/當(dāng)前對(duì)象不需要置為活動(dòng)樣式的時(shí)候,如果本來(lái)的樣式是“凸出的按鈕形”則置為“凹下的按鈕形”,反之亦然/
else objSrc.className=intBlnClk=0﹖strClassDstrClass
//鼠標(biāo)離開(kāi)當(dāng)前對(duì)象區(qū)域
else ifobjSrc.containsevent.toElement
//將這些樣式置為默認(rèn)值
objSrc.bgColor=′′objSrc.style.color=′′objSrc.className=′′
/ 顯示/隱藏層的通用函數(shù)。用objNS、objIE、strStu作為參數(shù),其中objNS和objIE分別是Netscape和IE的“層”對(duì)象,strStu為層的狀態(tài)。因?yàn)槠,?qǐng)查看本文尾部說(shuō)明。 /
function shoHidLayers
/ 調(diào)用上面的函數(shù),顯示/隱藏參數(shù)傳遞的層,這樣是為了簡(jiǎn)化代碼。這里不給出詳細(xì)函數(shù)。/
function showLayerintCurrent
//--></script></head>
<body onMouseDown=″ifwindow.event.srcElement.style.color==′′ showLayer1′hide′″>
<-- 以上body部分的作用是當(dāng)鼠標(biāo)沒(méi)有按下任何按鈕的時(shí)候隱藏所有應(yīng)該隱藏的“菜單”。以下是兩個(gè)用CSS布局定義的層,名為“menu”的層的初始狀態(tài)為:在屏幕上的位置為(1212),可視,層z-index屬性為100;“menu1”為不可視。 -->
<div id=″menu″ style=″positionabsolutevisibility visibleleft12pxtop12px z-index 100″><table border=″1″ cellspacing=″0″ cellpadding=″2″ bgcolor=″#c0c0c0″ bordercolor=″#c0c0c0″>
<tr><td onMouseOver=″mOvrOutthis″ onMouseOut=″mOvrOutthis″ onClick=″mOvrOutthisfalse′btnDTD′showLayer1″>天極網(wǎng)</td></tr>
</table></div>
<div id=″menu1″ style=″positionabsolutevisibility hiddenleft11pxtop34px z-index 1″><table border=″0″ cellpadding=″2″ cellspacing=″0″ bgcolor=″#c0c0c0″ class=″btnTD″>
<tr><td onMouseOver=″mOvrOutthistrue″ onMouseOut=″mOvrOutthis″ width=″100%″nowrap onClick=″window.location=′http//www.pcwclub.com/′showLayer1′hide′″>電腦報(bào)讀者俱樂(lè)部</td></tr>
</table></div>
因?yàn)槠,一些函?shù)不能詳細(xì)給出及說(shuō)明,如果需要完整代碼請(qǐng)?jiān)L問(wèn)以下鏈接:http//ctsight.topcool.net/documents/menu.html。