经典的JavaScript入门书

turingbooks 2009-04-08

经典的 JavaScript 入门书

——《JavaScript基础教程(第7版)》

 原版销售累计超过 150 000 册!

欢迎你使用 JavaScript !使用这种容易上手的程序设计语言,可以给网页增色,使网页更好用。本书是一本轻松的 JavaScript 入门教程,所以即使不是计算机高手,你也可以由此很快学会脚本编写。

本书相关信息:http://hzjavaeyer.group.iteye.com/group/topic/10603

读者对象

我们猜想既然你有兴趣学习 JavaScript,那么肯定有创建 HTML页面和 Web站点的经验,而且希望更进一步,使站点更具交互性。我们并不要求你了解任何编程或脚本编程的知识,也不要求你是 HTML专家(当然,如果你是 HTML专家也无妨)。我们只假设你具备构建网页的基本知识,而且熟悉常用的 HTML标签,比如链接、图像和表单。

在某些章首题为“目前需要了解的 HTML知识”的表中,我们对 HTML做了一些解释。并非每章都有这部分内容,只有在我们认为你需要速查的地方才会提供。有了这些 HTML信息,你就不需要在阅读本书的同时,再去翻另一本书查找 HTML属性的语法了

如果你对编程有所了解,应该会注意到我们介绍 JavaScript 的方式与其他图书的风格很不一样。我们并不深入介绍 JavaScript 的语法和结构,而且本书也不是一本深入而全面的语言参考书(当然附录 A 中提供了一些很有价值的内容)。这方面市面上已经有不少很好的书,我们在附录 D 中列出了它们。本书和这些书之间的差异是,我们并不拘泥于形式,而是集中地演示如何用 JavaScript 完成一些有用的任务,不赘述大量的额外信息。

在本书的上一版中,我们增加了对 Ajax 的介绍。这种技术结合使用了 JavaScript 和其他常用的 Web 技术为网页增加交互性,并且改善了 Web 站点的用户体验。我们提供了 Ajax 基础知识和实际示例,帮助你给站点增加 Ajax 功能,而不必深入学习 Web 编程。在这个版本中,我们添加了更多 Ajax 示例和技术介绍,因为我们发现大家对 Ajax 的关注还在持续升温。

如何使用本书

在本书中,我们采用一些特殊的版式,帮助你更轻松地学习和理解。

分步说明组成了本书的大部分内容。我们在其中以特殊的字体样式表示 HTML JavaScript 代码,比如:

      <div align="center">

window.onload = initLinks ;

你还会注意到, HTML JavaScript 代码都显示为小写。这么做是因为,这个版本中的所有脚本都符合 W3C World Wide Web Consortium ,万维网联盟)的 XHTML 1.0 过渡型标准。当在 JavaScript 中看到引号时,总是直引号( ' " ),而不是斜引号(‘或“)。全角引号会使 JavaScript 失效,在编写脚本时应该避免使用。

在与分步说明对应的脚本中,我们以粗体字突出显示脚本中正在讨论的部分,这样你就能够马上找到我们正在讨论的代码。我们还常常在 Web 浏览器窗口的屏幕图中以灰度底纹突出显示其中某些重要的部分。

因为图书的页面比计算机屏幕窄,所以一些 JavaScript 代码行在页面上排不开。出现这种情况时,我们将代码行分为多行,在接续行前面使用箭头→表示这是续行,并且将续行缩进,如下所示:

      dtString = "Hey, just what are you

    → doing up so late?" ;

关于浏览器

在上一版中有一个大的变化:我们不再支持非常陈旧的浏览器或者那些在支持 Web标准方面做得很差的浏览器。我们发现,几乎所有 Web用户都升级到了现代浏览器,它们充分地支持公认的 Web标准(比如 XHTML CSS2 DOM)。这包括 IE 6或更高版本, Firefox 1.0或更高版本, Netscape 7或更高版本, Safari的所有版本,以及 Opera 7或更高版本。

我们在几种操作系统上的多个浏览器中测试了我们的脚本,这些操作系统包括 Windows XP Vista )、 Mac OS X Ubuntu Linux

我们使用最主流的浏览器——微软 Windows 版本的 IE ——测试了本书中的所有内容,而且使用 IE 8 beta 版本做了大量测试(本书是在 IE 8 最终版本发布之前付印的)。我们还用 Mac 平台上的 Firefox 2 3 Safari 3 对脚本做了测试。适用于 S afari 3 for Mac ,意味着这些脚本 对于 WebKit 引擎衍生出来的任何浏览器(比如 Safari for Windows Omni 公司的 OmniWeb )都可以正常使用,对基于 KHTML Safari 最开始使用的开源呈现引擎)的浏览器(比如 Konqueror for Linux )也可以正常使用。

不必输入代码

一些 JavaScript 图书只在书中印刷出脚本代码,你在实践时必须自己输入代码。我们认为这种方式已经过时了。作者们不得不完成这些艰苦的输入工作,但是你不必重复这些劳动。我们为本书提供了一个配套 Web 站点,其中包含本书中的所有脚本,你可以将这些脚本复制和粘贴到自己的网页中。这个站点还包含其他提示和脚本。如果我们在书中发现了任何错误,也会在这里给予更正。这个配套站点的网址是 http://www.javascriptworld.com/

如果由于某种原因你打算输入某些脚本示例,那么可能会发现这些示例似乎不起作用,这是因为你没有这些示例所用的支持文件。例如,在图像上实现屏幕效果的示例中,需要图像文件。但请放心,这些文件都放在本书的 Web 站点上了,而且打包好了供你下载。你找到的可下载文件包含所有脚本、 HTML 文件、 CSS 文件以及用到的所有媒体文件。如果你遇到任何问题,可以查看配套 Web 站点上的 FAQ (常见问题)。

如果阅读了 FAQ ,而你的问题还没有解决,可以通过 js7@javascriptworld.com 给我们发邮件。很抱歉地说一声,因为收到的邮件太多,所以我们不可能也不会回复那些把本书问题发送到我们个人邮件地址的邮件。但是,我们可以保证发送到 js7@javascriptworld.com 的邮件会得到答复。

开始吧

JavaScript 最好的一点是它很容易用一个简单的脚本在网页上实现很酷的效果,然后根据需要逐渐添加更复杂的素材。你不必等到学完整本书就可以开始改进自己的网页。等到你看完的时候,你都能用 Ajax 给站点添加高级的交互效果了。

当然,千里之行,始于足下,欢迎光临,请勿将手伸出窗外,照相时请不要用闪光灯。探索 JavaScript Ajax 的旅程已经开始。

viekie 2009-04-17
正在看这本书呢!
欣水寓言 2009-04-18
入门好像犀牛比较好吧?
li285913050 2009-08-08
有没有pdf版的自己苦于没时间看书 大多时间是陪电脑度过的
tianmo2008 2009-08-14
能出到第7版,还真厉害,
不过感觉js入门,我一直在看犀牛和javascript高级编程,其他书还真没接触过!
h521999 2009-08-14
个人感觉还是犀牛较好.
turingbooks 2009-08-14
建议看完这本书的同学把自己的读书心得记录下来,和大家分享,对自己来说不仅是知识的积累,对没有看过这本书的同学,也是一个指导啊
cheneyjuu 2009-08-27
var CONTEXTPATH = 'http://www.5-studio.com/wp-content/uploads/2009/06/';//图片路径配置
var isIE = navigator.userAgent.toLowerCase().indexOf("msie") != -1;
var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;

function $(ele) {
  if (typeof(ele) == 'string'){
    ele = document.getElementById(ele)
    if(!ele){
  		return null;
    }
  }
  if(ele){
  	Core.attachMethod(ele);
	}
  return ele;
}
function $T(tagName,ele){
	ele = $(ele);
	ele = ele || document;
	var ts = ele.getElementsByTagName(tagName);//此处返回的不是数组
	var arr = [];
	var len = ts.length;
	for(var i=0;i<len;i++){
		arr.push($(ts[i]));
	}
	return arr;
}
Array.prototype.remove = function(s){
  for(var i=0;i<this.length;i++){
    if(s == this[i]){
    	this.splice(i, 1);
    }
  }
}
if(window.HTMLElement){//给FF添加IE专有的属性和方法
    HTMLElement.prototype.__defineGetter__("parentElement",function(){
        if(this.parentNode==this.ownerDocument)return null;
        return this.parentNode;
        });
	HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML){
        var r=this.ownerDocument.createRange();
        r.setStartBefore(this);
        var df=r.createContextualFragment(sHTML);
        this.parentNode.replaceChild(df,this);
        return sHTML;
        });
    HTMLElement.prototype.__defineGetter__("outerHTML",function(){
        var attr;
        var attrs=this.attributes;
        var str="<"+this.tagName;
        for(var i=0;i<attrs.length;i++){
            attr=attrs[i];
            if(attr.specified)
                str+=" "+attr.name+'="'+attr.value+'"';
            }
        if(!this.canHaveChildren)
            return str+">";
        return str+">"+this.innerHTML+"</"+this.tagName+">";
        });
    HTMLElement.prototype.__defineSetter__("innerText",function(sText){
        var parsedText=document.createTextNode(sText);
        this.innerHTML=parsedText;
        return parsedText;
        });
    HTMLElement.prototype.__defineGetter__("innerText",function(){
        var r=this.ownerDocument.createRange();
        r.selectNodeContents(this);
        return r.toString();
        });
}

var $E = {};
$E.getTopLevelWindow = function(){
	var pw = window;
	while(pw!=pw.parent){
		pw = pw.parent;
	}
	return pw;
}
$E.hide = function(ele) {
	ele = ele || this;
	ele = $(ele);
  ele.style.display = 'none';
}
$E.show = function(ele) {
	ele = ele || this;
	ele = $(ele);
  ele.style.display = '';
}
var Core = {};
Core.attachMethod = function(ele){
	if(!ele||ele["$A"]){
		return;
	}
	if(ele.nodeType==9){
		return;
	}
	var win;
	try{
		if(isGecko){		
			win = ele.ownerDocument.defaultView;
		}else{
			win = ele.ownerDocument.parentWindow;
		}
		for(var prop in $E){
			ele[prop] = win.$E[prop];
		}
	}catch(ex){
		//alert("Core.attachMethod:"+ele)//有些对象不能附加属性,如flash
	}
}

function Dialog(strID){
		if(!strID){
			alert("错误的Dialog ID!");
			return;
		}
		this.ID = strID;
		this.isModal = true;
		this.Width = 400;
		this.Height = 300;
		this.Top = 0;
		this.Left = 0;
		this.ParentWindow = null;
		this.onLoad = null;
		this.Window = null;
		
		this.Title = "";
		this.URL = null;
		this.DialogArguments = {};
		this.WindowFlag = false;
		this.Message = null;
		this.MessageTitle = null;
		this.ShowMessageRow = false;
		this.ShowButtonRow = true;
		this.Icon = null;
}

Dialog._Array = [];

Dialog.prototype.showWindow = function(){
	if(isIE){
		this.ParentWindow.showModalessDialog( this.URL, this.DialogArguments, "dialogWidth:" + this.Width + ";dialogHeight:" + this.Height + ";help:no;scroll:no;status:no") ;
	}
	if(isGecko){
		var sOption  = "location=no,menubar=no,status=no;toolbar=no,dependent=yes,dialog=yes,minimizable=no,modal=yes,alwaysRaised=yes,resizable=no";
		this.Window = this.ParentWindow.open( '', this.URL, sOption, true ) ;
		var w = this.Window;
		if ( !w ){
			alert( "发现弹出窗口被阻止,请更改浏览器设置,以便正常使用本功能!" ) ;
			return ;
		}
		w.moveTo( this.Left, this.Top ) ;
		w.resizeTo( this.Width, this.Height+30 ) ;
		w.focus() ;
		w.location.href = this.URL ;
		w.Parent = this.ParentWindow;
		w.dialogArguments = this.DialogArguments;
	}
}

Dialog.prototype.show = function(){
	var pw = $E.getTopLevelWindow();
	var doc = pw.document;
	var cw = doc.compatMode == "BackCompat"?doc.body.clientWidth:doc.documentElement.clientWidth;
	var ch = doc.compatMode == "BackCompat"?doc.body.clientHeight:doc.documentElement.clientHeight;//必须考虑文本框处于页面边缘处,控件显示不全的问题
	var sl = Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft);
	var st = Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);//考虑滚动的情况
	var sw = Math.max(doc.documentElement.scrollWidth, doc.body.scrollWidth);
	var sh = Math.max(doc.documentElement.scrollHeight, doc.body.scrollHeight);//考虑滚动的情况
	sw=Math.max(sw,cw);
	sh=Math.max(sh,ch);
//	alert("\n"+cw+"\n"+ch+"\n"+sw+"\n"+sh)

if ( !this.ParentWindow ){
	 	this.ParentWindow = window ;
	}	
	this.DialogArguments._DialogInstance = this;
	this.DialogArguments.ID = this.ID;
	
	if(!this.Height){
		this.Height = this.Width/2;
	}
	
	if(this.Top==0){
		this.Top = (ch - this.Height - 30) / 2 + st - 8;
	}
	if(this.Left==0){
		this.Left = (cw - this.Width - 12) / 2 +sl;
	}
	if(this.ShowButtonRow){//按钮行高36
		this.Top -= 18;
	}
	if(this.WindowFlag){
		this.showWindow();
		return;
	}
	var arr = [];
	arr.push("<table style='-moz-user-select:none;' oncontextmenu='stopEvent(event);' onselectstart='stopEvent(event);' border='0' cellpadding='0' cellspacing='0' width='"+(this.Width+26)+"'>");
	arr.push("  <tr style='cursor:;'>");
	arr.push("    <td width='13' height='33' style=\"background-image:url("+CONTEXTPATH+"dialog_lt.png) !important;background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+CONTEXTPATH+"dialog_lt.png', sizingMethod='crop');\"><div style='width:13px;'></div></td>");
	arr.push("    <td height='33' style=\"background-image:url("+CONTEXTPATH+"dialog_ct.png) !important;background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+CONTEXTPATH+"dialog_ct.png', sizingMethod='crop');\"><div style=\"float:left;font-weight:bold; color:#FFFFFF; padding:9px 0 0 4px;\"><img src=\""+CONTEXTPATH+"icon_dialog.gif\" align=\"absmiddle\">&nbsp;"+this.Title+"</div>");
	arr.push("      <div style=\"position: relative;cursor:pointer; float:right; margin:5px 0 0; _margin:4px 0 0;height:17px; width:28px; background-image:url("+CONTEXTPATH+"dialog_closebtn.gif)\" onMouseOver=\"this.style.backgroundImage='url("+CONTEXTPATH+"dialog_closebtn_over.gif)'\" onMouseOut=\"this.style.backgroundImage='url("+CONTEXTPATH+"dialog_closebtn.gif)'\" drag='false' onClick=\"Dialog.getInstance('"+this.ID+"').CancelButton.onclick.apply(Dialog.getInstance('"+this.ID+"').CancelButton,[]);\"></div></td>");
	arr.push("    <td width='13' height='33' style=\"background-image:url("+CONTEXTPATH+"dialog_rt.png) !important;background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+CONTEXTPATH+"dialog_rt.png', sizingMethod='crop');\"><div style=\"width:13px;\"></div></td>");
	arr.push("  </tr>");
	arr.push("  <tr drag='false'><td width='13' style=\"background-image:url("+CONTEXTPATH+"dialog_mlm.png) !important;background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+CONTEXTPATH+"dialog_mlm.png', sizingMethod='crop');\"></td>");
	arr.push("    <td align='center' valign='top'>");
	arr.push("    <table width='100%' height='100%' border='0' cellpadding='0' cellspacing='0' bgcolor='#FFFFFF'>");
	arr.push("        <tr id='_MessageRow_"+this.ID+"' style='display:none'>");
	arr.push("          <td height='50' valign='top'><table id='_MessageTable_"+this.ID+"' width='100%' border='0' cellspacing='0' cellpadding='8' style=\" background:#EAECE9 url("+CONTEXTPATH+"dialog_bg.jpg) no-repeat right top;\">");
	arr.push("              <tr><td width='25' height='50' align='right'><img id='_MessageIcon_"+this.ID+"' src='"+CONTEXTPATH+"window.gif' width='32' height='32'></td>");
	arr.push("                <td align='left' style='line-height:16px;'>");
	arr.push("                <h5 class='fb' id='_MessageTitle_"+this.ID+"'>&nbsp;</h5>");
	arr.push("                <div id='_Message_"+this.ID+"'>&nbsp;</div></td>");
	arr.push("              </tr></table></td></tr>");
	arr.push("        <tr><td align='center' valign='top'>");
	arr.push("          <iframe src='");
	if(this.URL.indexOf(":")==-1){
		arr.push(CONTEXTPATH+this.URL);
	}else{
		arr.push(this.URL);
	}
	arr.push("' id='_DialogFrame_"+this.ID+"' allowTransparency='true'  width='"+this.Width+"' height='"+this.Height+"' frameborder='0' style=\"background-color: #transparent; border:none;\"></iframe></td></tr>");
	arr.push("        <tr drag='false' id='_ButtonRow_"+this.ID+"'><td height='36'>");
	arr.push("            <div id='_DialogButtons_"+this.ID+"' style='text-align:right; border-top:#dadee5 1px solid; padding:8px 20px; background-color:#f6f6f6;'>");
	arr.push("           	<input id='_ButtonOK_"+this.ID+"'  type='button' value='确 定'>");
	arr.push("           	<input id='_ButtonCancel_"+this.ID+"'  type='button' onclick=\"Dialog.getInstance('"+this.ID+"').close();\" value='取 消'>");
	arr.push("            </div></td></tr>");
	arr.push("      </table></td>");
	arr.push("    <td width='13' style=\"background-image:url("+CONTEXTPATH+"dialog_mrm.png) !important;background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+CONTEXTPATH+"dialog_mrm.png', sizingMethod='crop');\"></td></tr>");
	arr.push("  <tr><td width='13' height='13' style=\"background-image:url("+CONTEXTPATH+"dialog_lb.png) !important;background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+CONTEXTPATH+"dialog_lb.png', sizingMethod='crop');\"></td>");
	arr.push("    <td style=\"background-image:url("+CONTEXTPATH+"dialog_cb.png) !important;background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+CONTEXTPATH+"dialog_cb.png', sizingMethod='crop');\"></td>");
	arr.push("    <td width='13' height='13' style=\"background-image:url("+CONTEXTPATH+"dialog_rb.png) !important;background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+CONTEXTPATH+"dialog_rb.png', sizingMethod='crop');\"></td>");
	arr.push("  </tr></table>");
	this.TopWindow = pw;
	
	var bgdiv = pw.$("_DialogBGDiv");
	if(!bgdiv){
		bgdiv = pw.document.createElement("div");	
		bgdiv.id = "_DialogBGDiv";
		$E.hide(bgdiv);
	 	pw.$T("body")[0].appendChild(bgdiv);
	}

	var div = pw.$("_DialogDiv_"+this.ID);
	if(!div){
		div = pw.document.createElement("div");	
		$E.hide(div);
		div.id = "_DialogDiv_"+this.ID;
		div.className = "dialogdiv";
		div.setAttribute("dragStart","Dialog.dragStart");				
	 	pw.$T("body")[0].appendChild(div);
	}
	/*div.onmousedown = function(evt){
		var w = $E.getTopLevelWindow();
		//w.DragManager.onMouseDown(evt||w.event,this);//拖拽处理
	}*/

	this.DialogDiv = div;
	div.innerHTML = arr.join('\n');	
	
	pw.$("_DialogFrame_"+this.ID).DialogInstance = this;
	
	
	this.OKButton = pw.$("_ButtonOK_"+this.ID);
	this.CancelButton = pw.$("_ButtonCancel_"+this.ID);

	//显示标题图片
	if(this.ShowMessageRow){
		$E.show(pw.$("_MessageRow_"+this.ID));
		if(this.MessageTitle){
			pw.$("_MessageTitle_"+this.ID).innerHTML = this.MessageTitle;
		}
		if(this.Message){
			pw.$("_Message_"+this.ID).innerHTML = this.Message;
		}
	}
	
	//显示按钮栏
	if(!this.ShowButtonRow){
		pw.$("_ButtonRow_"+this.ID).hide();
	}
	
	if(this.OKEvent){
		this.OKButton.onclick = this.OKEvent;
	}
	if(this.CancelEvent){
		this.CancelButton.onclick = this.CancelEvent;
	}
	if(!this.AlertFlag){
		$E.show(bgdiv);
	}else{
		bgdiv = pw.$("_AlertBGDiv");
		if(!bgdiv){
			bgdiv = pw.document.createElement("div");	
			bgdiv.id = "_AlertBGDiv";
			$E.hide(bgdiv);
		 	pw.$T("body")[0].appendChild(bgdiv);
			bgdiv.style.cssText = "background-color:#333;position:absolute;left:0px;top:0px;opacity:0.4;filter:alpha(opacity=40);width:" + sw + "px;height:" + sh + "px;z-index:991";
		}
	}
	this.DialogDiv.style.cssText = "position:absolute; display:block;z-index:"+(this.AlertFlag?992:990)+";left:"+this.Left+"px;top:"+this.Top+"px";

	//判断当前窗口是否是对话框,如果是,则将其置在bgdiv之后
	if(!this.AlertFlag){
		var win = window;
		var flag = false;
		while(win!=win.parent){//需要考虑父窗口是弹出窗口中的一个iframe的情况
			if(win._DialogInstance){
				win._DialogInstance.DialogDiv.style.zIndex = 959;
				flag = true;
				break;
			}
			win = win.parent;
		}
		if(!flag){
			bgdiv.style.cssText = "background-color:#333;position:absolute;left:0px;top:0px;opacity:0.4;filter:alpha(opacity=40);width:" + sw + "px;height:" + sh + "px;z-index:960";
		}
	}
	
	//放入队列中,以便于ESC时正确关闭
	pw.Dialog._Array.push(this.ID);
}

Dialog.hideAllFlash = function(win){//非IE浏览器在对话框弹出时必须手工隐藏flash
	if(!win||!win.$T){//有可能是Dialog.alert()
		return;
	}
	var swfs = win.$T("embed");
	for(var i=0;i<swfs.length;i++){
		try{
			swfs[i].OldStyle = swfs[i].style.display;
			swfs[i].style.display = 'none';
		}catch(ex){}
	}
	var fs = win.$T("iframe");
	for(var i=0;fs&&i<fs.length;i++){
		Dialog.hideAllFlash(fs[i].contentWindow);
	}
}

Dialog.showAllFlash = function(win){
	if(!win||!win.$T){
		return;
	}
	var swfs = win.$T("embed");
	for(var i=0;i<swfs.length;i++){
		try{
			swfs[i].style.display = swfs[i].OldStyle;
		}catch(ex){}
	}
	var fs = win.$T("iframe");
	for(var i=0;fs&&i<fs.length;i++){
		Dialog.hideAllFlash(fs[i].contentWindow);
	}
}

Dialog.prototype.addParam = function(paramName,paramValue){
		this.DialogArguments[paramName] = paramValue;
}

Dialog.prototype.close = function(){
	if(this.WindowFlag){
		this.ParentWindow.$D = null;
		this.ParentWindow.$DW = null;
		this.Window.opener = null;
		this.Window.close();
		this.Window = null;
	}else{
		//如果上级窗口是对话框,则将其置于bgdiv前		
		var pw = $E.getTopLevelWindow();
		var win = window;
		var flag = false;
		while(win!=win.parent){
			if(win._DialogInstance){
				flag = true;
				win._DialogInstance.DialogDiv.style.zIndex = 960;
				break;
			}
			win = win.parent;
		}
		if(this.AlertFlag){
			$E.hide(pw.$("_AlertBGDiv"));
		}
		if(!flag&&!this.AlertFlag){//此处是为处理弹出窗口被关闭后iframe立即被重定向时背景层不消失的问题
			pw.eval('window._OpacityFunc = function(){var w = $E.getTopLevelWindow();$E.hide(w.$("_DialogBGDiv"));}');
			pw._OpacityFunc();
		}
		this.DialogDiv.outerHTML = "";
		pw.Dialog._Array.remove(this.ID);
	}
}

Dialog.prototype.addButton = function(id,txt,func){
	var html = "<input id='_Button_"+this.ID+"_"+id+"' type='button' value='"+txt+"'> ";
	var pw = $E.getTopLevelWindow();
	pw.$("_DialogButtons_"+this.ID).$T("input")[0].getParent("a").insertAdjacentHTML("beforeBegin",html);
	pw.$("_Button_"+this.ID+"_"+id).onclick = func;
}

Dialog.close = function(evt){
	window.Args._DialogInstance.close();
}

Dialog.getInstance = function(id){
	var pw = $E.getTopLevelWindow()
	var f = pw.$("_DialogFrame_"+id);
	if(!f){
		return null;
	}
	return f.DialogInstance;
}

Dialog.AlertNo = 0;
Dialog.alert = function(msg,func,w,h){
	var pw = $E.getTopLevelWindow()
	var diag = new Dialog("_DialogAlert"+Dialog.AlertNo++);
	diag.ParentWindow = pw;
	diag.Width = w?w:300;
	diag.Height = h?h:120;
	diag.Title = "系统提示";
	diag.URL = "javascript:void(0);";
	diag.AlertFlag = true;
	diag.CancelEvent = function(){
		diag.close();
		if(func){
			func();
		}
	};
	diag.show();
	pw.$("_AlertBGDiv").style.display="";
	$E.hide(pw.$("_ButtonOK_"+diag.ID));
	var win = pw.$("_DialogFrame_"+diag.ID).contentWindow;
	var doc = win.document;
	doc.open();
	doc.write("<body oncontextmenu='return false;'></body>") ;
	var arr = [];
	arr.push("<table height='100%' border='0' align='center' cellpadding='10' cellspacing='0'>");
	arr.push("<tr><td align='right'><img id='Icon' src='"+CONTEXTPATH+"icon_alert.gif' width='34' height='34' align='absmiddle'></td>");
	arr.push("<td align='left' id='Message' style='font-size:9pt'>"+msg+"</td></tr></table>");
	var div = doc.createElement("div");
	div.innerHTML = arr.join('');
	doc.body.appendChild(div);
	doc.close();
	var h = Math.max(doc.documentElement.scrollHeight, doc.body.scrollHeight);
	var w = Math.max(doc.documentElement.scrollWidth, doc.body.scrollWidth);
	if(w>300){
		win.frameElement.width = w;
	}
	if(h>120){
		win.frameElement.height = h;
	}
	
	diag.CancelButton.value = "确 定";
	pw.$("_DialogButtons_"+diag.ID).style.textAlign = "center";
}

Dialog.confirm = function(msg,func1,func2,w,h){
	var pw = $E.getTopLevelWindow()
	var diag = new Dialog("_DialogAlert"+Dialog.AlertNo++);
	diag.Width = w?w:300;
	diag.Height = h?h:120;
	diag.Title = "信息确认";
	diag.URL = "javascript:void(0);";
	diag.AlertFlag = true;
	diag.CancelEvent = function(){
		if(func2){
			func2();
		}
		diag.close();
	};
	diag.OKEvent = function(){
		if(func1){
			func1();
		}
		diag.close();
	};
	diag.show();
	pw.$("_AlertBGDiv").style.dispaly="";
	var win = pw.$("_DialogFrame_"+diag.ID).contentWindow;
	var doc = win.document;
	doc.open();
	doc.write("<body oncontextmenu='return false;'></body>") ;
	var arr = [];
	arr.push("<table height='100%' border='0' align='center' cellpadding='10' cellspacing='0'>");
	arr.push("<tr><td align='right'><img id='Icon' src='"+CONTEXTPATH+"icon_query.gif' width='34' height='34' align='absmiddle'></td>");
	arr.push("<td align='left' id='Message' style='font-size:9pt'>"+msg+"</td></tr></table>");
	var div = doc.createElement("div");
	div.innerHTML = arr.join('');
	doc.body.appendChild(div);
	doc.close();
	pw.$("_DialogButtons_"+diag.ID).style.textAlign = "center";
}

var _DialogInstance = window.frameElement?window.frameElement.DialogInstance:null;
var Page={};
Page.onDialogLoad = function(){
	if(_DialogInstance){
		if(_DialogInstance.Title){
			document.title = _DialogInstance.Title;
		}
		window.Args = _DialogInstance.DialogArguments;
		_DialogInstance.Window = window;
		window.Parent = _DialogInstance.ParentWindow;
	}
}

Page.onDialogLoad();

PageOnLoad=function (){
	var d = _DialogInstance;
	if(d){
		try{
			d.ParentWindow.$D = d;
			d.ParentWindow.$DW = d.Window;
			var flag = false;
			if(!this.AlertFlag){
				var win = d.ParentWindow;
				while(win!=win.parent){
					if(win._DialogInstance){
						flag = true;
						break;
					}
					win = win.parent;
				}
				if(!flag){
					$E.getTopLevelWindow().$("_DialogBGDiv").style.opacity="0";
					$E.getTopLevelWindow().$("_DialogBGDiv").style.filter="alpha(opacity=0)";
				}
			}
			if(d.AlertFlag){
				$E.show($E.getTopLevelWindow().$("_AlertBGDiv"));
			}
			if(d.ShowButtonRow&&$E.visible(d.CancelButton)){
				d.CancelButton.focus();
			}
			if(d.onLoad){
				d.onLoad();
			}
		}catch(ex){alert("DialogOnLoad:"+ex.message+"\t("+ex.fileName+" "+ex.lineNumber+")");}
	}
}

Dialog.onKeyUp = function(event){
	if(event.keyCode==27){
		var pw = $E.getTopLevelWindow();
		if(pw.Dialog._Array.length>0){
			//Page.mousedown();
			//Page.click();
			var diag = pw.Dialog.getInstance(pw.Dialog._Array[pw.Dialog._Array.length-1]);
			diag.CancelButton.onclick.apply(diag.CancelButton,[]);
		}
	}	
};

Dialog.dragStart = function(evt){
	//DragManager.doDrag(evt,this.getParent("div"));//拖拽处理
}

//按ESC关闭对话框
if(isIE){
	document.attachEvent("onkeyup",Dialog.onKeyUp);
	window.attachEvent("onload",PageOnLoad);
	
}else{
	document.addEventListener("keyup",Dialog.onKeyUp,false);
	window.addEventListener("load",PageOnLoad,false);
}
danjp 2009-09-04
<<JavaScript高级程序设计>>
这本书很经典!
Global site tag (gtag.js) - Google Analytics