您的位置：首页 > 编程语言 > Java开发

接:JavaScrip高级应用：操作模态与非模态对话框

2006-09-22 11:41 274 查看

三、改变对话框外观
对话框的外观控制包括从窗口边缘风格（edge）、是否存在滚动条（scroll）、是否包含上下文关联提示图标（help）、是否显示状态栏（status）以及是否可以改变窗口大小（resizable）等方面。默认情况下，新打开的窗口是大小不可改变的、边缘风格为凸起、在新窗口右上角显示一个上下文关联提示图标、存在滚动条，比如：

edge的可取值为sunken（凹陷）和raised（凸起），status、help、resizeable和scroll的可取值都是yes、no、1、0、on和off，其含义一目了然。
下面的代码将去除上下文关联提示图标、不显示状态栏、窗口边缘风格为凹陷：
showModelessDialog("callee.htm","","status:0;help:0;edge:sunken");
执行后，图示如下：

四、从caller页面传递数据到callee页面
上面我们介绍了创建模态和非模态窗口的语法以及如何控制新窗口的大小、位置和外观，接下来我们研究一下实际应用中更实用的功能：如何从caller页面传递数据到callee页面。
从caller页面传递给callee页面的数据分为3类：传递值、传递数组引用以及传递对象,它们都是通过showModalDialog()和showModelessDialog()的第2个参数实现的。
（一）传递值类型数据
在caller.htm页面中输入以下代码：
<INPUT TYPE="button" VALUE="创建模态对话框" onclick="fnOpenModal()">
<br><br>
<INPUT TYPE="button" VALUE="创建非模态对话框" onclick="fnOpenModeless()">
<script language="javascript">

</script>
在callee.htm页面中输入以下代码：
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
在浏览器中打开caller.htm，点击任意一个按钮，我们将首先看到如下的提示信息框：

然后才出现新窗口。这种情况下，callee.htm页面中的window对象的属性dialogArguments将对应于caller.htm页面中的"打开了一个新模态窗口"或者"打开了一个新非模态窗口"。如果直接打开callee.htm，将会出现错误提示。
（二）传递数组引用类型数据
第一种值类型数据的传递中，在callee.htm页面中只能读取caller.htm页面的传递数据。当需要对caller.htm页面的传递内容进行修改时，就需使用到数组引用类型的传递方式。
首先，在caller.htm页面中输入以下代码：
<INPUT TYPE="button" VALUE="创建模态对话框" onclick="fnOpenModal()">
<br><br>
<INPUT TYPE="button" VALUE="创建非模态对话框" onclick="fnOpenModeless()">
<script language="javascript">

</script>
然后在callee.htm页面中输入以下代码：
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
最后，在浏览器中打开caller.htm，点击任意一个按钮，我们将首先看到如下的对话框：

接着关闭这个对话框以及新打开的窗口，再次点击一个按钮，又出现一个对话框：

从运行结果我们看到，在caller.htm页面中通过对数组a的地址引用，就可以实现在callee.htm中修改数组a的内容。
注意在callee.htm中要首先建立对传递数据的附值：a = dialogArguments。
三）传递对象类型数据
在caller.htm和callee.htm中传递数据的最有效方式是通过对象方式进行，这不仅能实现从caller.htm到callee.htm的传递，还能从callee.htm传递到caller.htm。而且，我们还可以在caller.htm中定义对象的方法，再在callee.htm中使用它们。实际上，我们可以将caller.htm的window对象传递给callee.htm，这样就可以在callee.htm中访问caller.htm的变量及函数。
来看看一个实际的例子。在caller.htm中输入以下代码：
<HTML>
<HEAD>
<TITLE>传递对象数据</TITLE>
<SCRIPT>
var sColor="";
function callDialog() {
showModelessDialog("callee.html",window,"status:false;dialogWidth:300px;dialogHeight:150px");
}
function update()
{
oColor.innerText = sColor;
}
</SCRIPT>
</HEAD>
<BODY>
<P>输入你最喜欢的颜色: <SPAN ID="oColor" STYLE="color:red;font-size:24">Yellow</SPAN></P>
<INPUT TYPE="button" VALUE="Display Modeless Dialog" onclick="callDialog()">
</BODY>
</HTML>
在callee.htm中输入以下代码：
<HTML>
<HEAD>
<TITLE>callee.html</TITLE>
<SCRIPT>
function getInfoAndUpdate() {
var callerWindowObj = dialogArguments;
callerWindowObj.sColor = oEnterColor.value;
callerWindowObj.update();
}
function cancel() {
var callerWindowObj = dialogArguments;
callerWindowObj.sColor = "Yellow";
callerWindowObj.update();
}
</SCRIPT>
</HEAD>
<BODY>
输入你最喜欢的颜色:<INPUT ID=oEnterColor><BR><BR>
<INPUT VALUE="Apply" TYPE=button onclick="getInfoAndUpdate();">
<INPUT VALUE="Ok" TYPE=button onclick="getInfoAndUpdate();window.close();">
<INPUT VALUE="Cancel" TYPE=button onclick="cancel();window.close();">
</BODY>
</HTML>
在浏览器中打开caller.htm，点击“显示非模态对话框”按钮，出现新对话框：

在对话框中输入其他颜色名称，点击“Apply”按钮后，执行callee.htm中的getInfoAndUpdate函数：
function getInfoAndUpdate() {
var callerWindowObj = dialogArguments;
callerWindowObj.sColor = oEnterColor.value;
callerWindowObj.update();
}
因为在caller.htm中传递给callee.htm的是对象类型数据window，所以经过第一条语句的附值，callerWindowObj就指向了caller.htm页面，然后就可以在callee.htm中按照callerWindowObj.xxx的形式引用caller.htm中的变量及函数：callerWindowObj.sColor = oEnterColor.value负责将callee.htm中输入的颜色名称传递给caller.htm中的变量sColor，然后再执行caller.htm中的 update()函数更新显示信息。
可以看到，通过对象方式传递数据，功能很丰富强大，而且使用起来也不复杂。
六、结语
以上对使用JavaScript语言操作模态和非模态对话框进行了详细介绍，相信你又掌握了在html页面中创建窗口的一个新技术。在实际应用中，模态对话框的功能比较实用，可用于必须让访问者阅读相关内容的情况下。另外，利用对象方式在窗口间传递数据，功能非常强大但使用却不复杂，是非常值得一用的技术

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航