第19章 JavaScript综合应用-模拟窗口

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