第19章 JavaScript綜合應(yīng)用-模擬窗口

JS從入門到精通第19章JavaScript綜合應(yīng)用—模擬窗口第19章JavaScript綜合應(yīng)用—模擬窗口前面的章節(jié)講述了如何使用JavaScript腳本操作“ActiveX”控件，實(shí)現(xiàn)很多難以單純用腳本實(shí)現(xiàn)的應(yīng)用。例如在Web頁(yè)面中進(jìn)行多媒體播放、訪問(wèn)XML數(shù)據(jù)、操作本地文件和訪問(wèn)數(shù)據(jù)庫(kù)等應(yīng)用，必須通過(guò)相應(yīng)“ActiveX”控件和腳本的操作來(lái)完成。本章開始將對(duì)JavaScript進(jìn)行進(jìn)一步的講解，綜合前面所講述的知識(shí)，來(lái)實(shí)現(xiàn)一些比較復(fù)雜的JavaScript效果。讀者在閱讀本章對(duì)舉出的示例代碼的解析時(shí)，一方面要學(xué)習(xí)JavaScript各種應(yīng)用的例子，另一方面更重要的是，注意學(xué)習(xí)JavaScript編程中的各種基本思想。19.1可拖動(dòng)的模擬窗口模擬窗口是網(wǎng)絡(luò)上比較常見的一種頁(yè)面效果，其特點(diǎn)是：將一部分內(nèi)容放在一個(gè)模擬的窗口中顯示，此窗口視需要可以模擬“關(guān)閉”、“拖動(dòng)”、“縮放”、“最大化”和“最小化”等窗口行為，甚至不同模擬窗口之間還可以層疊，并且切換其顯示的縱向順序。19.1.1模擬窗口特效的功能目標(biāo)設(shè)計(jì)在制作任何一種JavaScript特效之前，設(shè)計(jì)者都應(yīng)該問(wèn)自己幾個(gè)問(wèn)題：特效的目的是什么？特效的使用者是什么類型的用戶？特效需要實(shí)現(xiàn)的功能有哪些？這些問(wèn)題其實(shí)就體現(xiàn)出了所需要制作的特效的功能目標(biāo)。例如，本章所準(zhǔn)備實(shí)現(xiàn)的模擬窗口效果應(yīng)該具有如下的特點(diǎn)和功能：（1）主流瀏覽器的兼容性。（2）標(biāo)準(zhǔn)的模擬窗體結(jié)構(gòu)和功能。（3）窗體內(nèi)容的廣泛兼容性。（4）特效內(nèi)容的結(jié)構(gòu)化。（5）特效代碼的易用性。19.1.2模擬窗口特效的HTML內(nèi)容代碼19-1.htm是模擬窗口特效的主體HTML文件。19.1.3模擬窗口特效所用的樣式表內(nèi)容特效的表現(xiàn)離不開樣式。為了便于下文中理解，下面代碼19-1.css是本章示例中所用到的樣式表文件。（其存放目錄是根目錄下的“\inc\css\”）。19.2模擬窗口的自動(dòng)構(gòu)造下面將依次介紹“19-1.js”文件中的內(nèi)容。（其存放目錄是根目錄下的“\inc\js\”）。此外部腳本文件完成的功能有：初始化頁(yè)面內(nèi)容，讀取各個(gè)模擬窗口對(duì)應(yīng)的“DIV”的內(nèi)容，并建立模擬窗口對(duì)象；向模擬窗口對(duì)象的“DIV”元素中添加自定義的屬性、方法和事件。19.2.1初始化腳本環(huán)境和通用的函數(shù)（1）首先使用“document.write”向文檔中寫入“<style>”元素。使用樣式表的“@import”規(guī)則載入外部的樣式表。（2）然后通過(guò)對(duì)“navigator”對(duì)象的“appName”屬性的解析，判斷當(dāng)前用戶所使用的瀏覽器類型。并將代表瀏覽器類型的信息保存在全局變量“BROWSERNAME”中。（3）根據(jù)不同的瀏覽器，調(diào)用不同的方法來(lái)綁定“window”對(duì)象的“onload”事件。（4）頁(yè)面載入完成事件激發(fā)時(shí)，調(diào)用函數(shù)“_xWin_init”對(duì)頁(yè)面進(jìn)行初始化。此函數(shù)中，調(diào)用“document.getElementsByTagName”方法獲取所有“DIV”標(biāo)簽對(duì)應(yīng)的元素對(duì)象，循環(huán)訪問(wèn)各個(gè)元素，并判斷其樣式類名稱（“className”），如果其樣式類中包含“xWin”，則將其初始化為一個(gè)模擬的窗口。19.2.2模擬窗口特效中用到的通用函數(shù)函數(shù)“getRealLeft”與“getRealTop”用于獲取參數(shù)“o”指定的對(duì)象距頁(yè)面左上角的橫坐標(biāo)和縱坐標(biāo)。由于HTML的DOM模型中，元素的“offsetLeft”和“offsetTop”返回坐標(biāo)值，是其相對(duì)于此元素具有定位特性的祖先元素（例如“style.position=”relative””的元素或者“TD”標(biāo)簽代表的元素等）的坐標(biāo)。因此，此兩個(gè)函數(shù)循環(huán)訪問(wèn)元素的所有“offsetParent”對(duì)象，并將其坐標(biāo)值疊加。19.2.3初始化模擬窗口對(duì)象下面是“_xWin_event_doInit”函數(shù)，其參數(shù)“element”為需要初始化的“DIV”對(duì)象。function_xWin_event_doInit(element){//初始化變量element.ownerDocument.index=isNaN(element.ownerDocument.index)?10000:parseInt(element.ownerDocument.index)+1;19.3模擬窗口的自定義方法和事件對(duì)象化編程的好處是顯而易見的，可以使代碼的邏輯更加的清晰，也使得代碼結(jié)構(gòu)化。例如，對(duì)于本章需要實(shí)現(xiàn)的模擬窗口來(lái)說(shuō)，窗口的最大化效果可以使用過(guò)程設(shè)計(jì)：functionMaximizeWindow(winObj){//……}19.3.1窗口的拖動(dòng)與縮放效果模擬窗口特效的一個(gè)很重要的特點(diǎn)就是可以拖動(dòng)。這樣用戶可以根據(jù)自己的喜好，自由的安排各個(gè)欄目?jī)?nèi)容的位置。拖動(dòng)效果在Web頁(yè)面中有著廣泛的應(yīng)用，因?yàn)檫@是一種符合Windows等GUI（圖形用戶界面）操作系統(tǒng)用戶使用習(xí)慣的操作方式。分析拖動(dòng)到過(guò)程，可以發(fā)現(xiàn)基本的用戶操作分為三步：（1）在需要拖動(dòng)的元素上單擊鼠標(biāo)左鍵，并保持按下的狀態(tài)。（2）移動(dòng)鼠標(biāo)至需要的位置。（3）松開鼠標(biāo)左鍵。19.3.2禁止選取—“onselectstart”事件除了用于處理拖動(dòng)效果的鼠標(biāo)事件外，模擬窗口對(duì)象還綁定了“onselectstart”事件：function_xWin_event_doSelect(evt){

vare=evt?evt:window.event;

var

eSrc=e.srcElement?e.srcElement:e.target;

if(eSrc==this.oTitle||this.oTitle.contains(eSrc)){

e.cancelBubble=true;

e.returnValue=false;

return(false);}}19.3.3模擬窗口的自定義方法下面是模擬窗口的自定義方法，用于實(shí)現(xiàn)關(guān)閉、最大化、最小化等操作。在本章的模擬窗口的示例代碼中，定時(shí)刷新最小化窗口的位置就使用了“__xSeriaTimer