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