JavaScrip高級(jí)應(yīng)用：操作模態(tài)與非模態(tài)對(duì)話框

我想跑 2009-02-25

展開(kāi)全文

我們知道，對(duì)話框一般分為兩種類(lèi)型：模態(tài)類(lèi)型（modal）與非模態(tài)類(lèi)型（modeless）。所謂模態(tài)對(duì)話框，就是指除非采取有效的關(guān)閉手段，用戶(hù)的鼠標(biāo)焦點(diǎn)或者輸入光標(biāo)將一直停留在其上的對(duì)話框。非模態(tài)對(duì)話框則不會(huì)強(qiáng)制此種特性，用戶(hù)可以在當(dāng)前對(duì)話框以及其他窗口間進(jìn)行切換。本文介紹如何使用JavaScript語(yǔ)言來(lái)創(chuàng)建這兩種類(lèi)型的對(duì)話框、控制其大小和位置、改變其外觀以及在對(duì)話框間的數(shù)據(jù)傳遞。

本文的所有例程中，從層次上涉及到2個(gè)HTML頁(yè)面。我們把第一個(gè)頁(yè)面叫做caller頁(yè)面，第二個(gè)頁(yè)面叫做callee頁(yè)面。也就是說(shuō)，在caller頁(yè)面執(zhí)行代碼創(chuàng)建生成callee頁(yè)面。

一、創(chuàng)建模態(tài)和非模態(tài)對(duì)話框

首先，我們舉個(gè)例子來(lái)快速了解一下什么是模態(tài)與非模態(tài)。在caller.htm中，我們輸入以下代碼：

function fnOpenModal(){

window.showModalDialog("callee.htm")

}

function fnOpenModeless(){

window.showModelessDialog("callee.htm")

}

</script>

在瀏覽器中打開(kāi)caller.htm，點(diǎn)擊“創(chuàng)建模態(tài)對(duì)話框”按鈕，將會(huì)出現(xiàn)一個(gè)對(duì)話框窗口，其中的內(nèi)容是callee.htm。你會(huì)看到，除了關(guān)閉這個(gè)新窗口，無(wú)論怎樣我們也不能將其他的窗口設(shè)置為“當(dāng)前活動(dòng)”窗口，這個(gè)一直是活動(dòng)狀態(tài)的窗口類(lèi)型就是模態(tài)類(lèi)型。關(guān)閉這個(gè)模態(tài)對(duì)話框，回到caller.htm頁(yè)面，點(diǎn)擊“創(chuàng)建非模態(tài)對(duì)話框”，出現(xiàn)一個(gè)包含callee.htm頁(yè)面的對(duì)話框窗口。這回有所不同，鼠標(biāo)可以轉(zhuǎn)移到其他地方使另外的窗口成為“當(dāng)前活動(dòng)”狀態(tài)，這就是非模態(tài)的概念。

接下來(lái)，我們看看創(chuàng)建模態(tài)對(duì)話框與非模態(tài)對(duì)話框的相關(guān)語(yǔ)法：

創(chuàng)建模態(tài)對(duì)話框：

vReturnValue = window.showModalDialog(sURL [, vFreeArgument] [, sOrnaments]);

創(chuàng)建非模態(tài)對(duì)話框：

vReturnValue = window.showModelessDialog(sURL [, vFreeArgument] [, sOrnaments]);

從上面的語(yǔ)法我們得知：除了名字有所區(qū)別外，參數(shù)種類(lèi)與含義都相同。以下是各參數(shù)的含義：

· VReturnValue：對(duì)于showModalDialog()，它表示被打開(kāi)的對(duì)話框窗口設(shè)置的returnValue屬性值。對(duì)于showModelessDialog()，它表示新窗口對(duì)象。

· VFreeArgument：這個(gè)參數(shù)可用于傳遞某種類(lèi)型的數(shù)據(jù)到打開(kāi)的對(duì)話框，數(shù)據(jù)可以是一個(gè)數(shù)值、字符串、數(shù)組或者一個(gè)對(duì)象類(lèi)型。在新窗口中引用這個(gè)數(shù)值時(shí)，可通過(guò)新創(chuàng)建window對(duì)象的dialogArguments 屬性。

· SOrnaments：用這個(gè)參數(shù)指定新窗口的外觀。可選擇的窗口屬性有很多種，當(dāng)有多種控制需求時(shí)，將相關(guān)內(nèi)容用一個(gè)字符串連接起來(lái)，其間用分號(hào)隔開(kāi)。以下是可選擇的屬性種類(lèi)：

o dialogHeight: sHeight

o dialogLeft: sXpos

o dialogTop: sYpos

o dialogWidth: sWidth

o center: ( yes | no | 1 | 0 | on | off )

o dialogHide: ( yes | no | 1 | 0 | on | off )

o edge: ( sunken | raised )

o help: ( yes | no | 1 | 0 | on | off )

o resizable: ( yes | no | 1 | 0 | on | off )

o scroll: ( yes | no | 1 | 0 | on | off )

o status: ( yes | no | 1 | 0 | on | off )

除了以上屬性外，我們還可以加入更加豐富的CSS控制。以下我們來(lái)詳細(xì)解釋如何應(yīng)用這些屬性。

二、控制對(duì)話框大小和位置

控制對(duì)話框的大小和位置涉及到5個(gè)方面：高度（dialogHeight）、寬度（dialogWidth）、相對(duì)于桌面左上角的x坐標(biāo)（dialogLeft）、y坐標(biāo)（dialogTop）以及是否讓對(duì)話框窗口居中（center）。由于不同版本的Internet Explorer瀏覽器處理的默認(rèn)度量單位并非一致，所以我們?cè)谥付ǜ叨取挾鹊却笮r(shí)，最好是同時(shí)設(shè)置好單位。單位種類(lèi)包括很多，比如cm、mm、in、pt、pc、px。請(qǐng)注意：最小的高度值是100px。

下面的代碼將打開(kāi)一個(gè)高200px、寬800px的對(duì)話框：

window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px');

我們注意到，打開(kāi)的新窗口會(huì)在桌面中處于居中的位置，這也正是居中屬性（center）的默認(rèn)值。居中屬性（center）的可取值包括yes、no、1、0、on和off，含義一目了然。執(zhí)行以下代碼，看看關(guān)閉居中屬性后新窗口的位置：

window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;center:no');

我們看到，新窗口緊挨者桌面的左上角打開(kāi)。當(dāng)然，我們可以使用dialogLeft和dialogTop 屬性來(lái)精確定義新窗口的打開(kāi)位置。下面的代碼將在相對(duì)于桌面左上角的x位置300px和y位置500px處打開(kāi)新窗口：

window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;dialogLeft:300;
dialogTop:500')

注意，即使指定了居中屬性，但如果同時(shí)設(shè)置了dialogLeft和dialogTop屬性值，那么窗口位置將遵從后者。試一試執(zhí)行下面的代碼：

window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;dialogLeft:300;
dialogTop:500;center:yes')

三、改變對(duì)話框外觀

對(duì)話框的外觀控制包括從窗口邊緣風(fēng)格（edge）、是否存在滾動(dòng)條（scroll）、是否包含上下文關(guān)聯(lián)提示圖標(biāo)（help）、是否顯示狀態(tài)欄（status）以及是否可以改變窗口大?。╮esizable）等方面。默認(rèn)情況下，新打開(kāi)的窗口是大小不可改變的、邊緣風(fēng)格為凸起、在新窗口右上角顯示一個(gè)上下文關(guān)聯(lián)提示圖標(biāo)、存在滾動(dòng)條，比如：

edge的可取值為sunken（凹陷）和raised（凸起），status、help、resizeable和scroll的可取值都是yes、no、1、0、on和off，其含義一目了然。

下面的代碼將去除上下文關(guān)聯(lián)提示圖標(biāo)、不顯示狀態(tài)欄、窗口邊緣風(fēng)格為凹陷：

showModelessDialog("callee.htm","","status:0;help:0;edge:sunken");

執(zhí)行后，圖示如下：

四、從caller頁(yè)面?zhèn)鬟f數(shù)據(jù)到callee頁(yè)面

上面我們介紹了創(chuàng)建模態(tài)和非模態(tài)窗口的語(yǔ)法以及如何控制新窗口的大小、位置和外觀，接下來(lái)我們研究一下實(shí)際應(yīng)用中更實(shí)用的功能：如何從caller頁(yè)面?zhèn)鬟f數(shù)據(jù)到callee頁(yè)面。

從caller頁(yè)面?zhèn)鬟f給callee頁(yè)面的數(shù)據(jù)分為3類(lèi)：傳遞值、傳遞數(shù)組引用以及傳遞對(duì)象,它們都是通過(guò)showModalDialog()和showModelessDialog()的第2個(gè)參數(shù)實(shí)現(xiàn)的。

（一）傳遞值類(lèi)型數(shù)據(jù)

在caller.htm頁(yè)面中輸入以下代碼：

<!--

function fnOpenModal(){

window.showModalDialog("callee.htm","打開(kāi)了一個(gè)新模態(tài)窗口")

}

function fnOpenModeless(){

window.showModelessDialog("callee.htm","打開(kāi)了一個(gè)新非模態(tài)窗口")

}

// -->

</script>

在callee.htm頁(yè)面中輸入以下代碼：

<!--

alert(dialogArguments);

// -->

</SCRIPT>

在瀏覽器中打開(kāi)caller.htm，點(diǎn)擊任意一個(gè)按鈕，我們將首先看到如下的提示信息框：

然后才出現(xiàn)新窗口。這種情況下，callee.htm頁(yè)面中的window對(duì)象的屬性dialogArguments將對(duì)應(yīng)于caller.htm頁(yè)面中的"打開(kāi)了一個(gè)新模態(tài)窗口"或者"打開(kāi)了一個(gè)新非模態(tài)窗口"。如果直接打開(kāi)callee.htm，將會(huì)出現(xiàn)錯(cuò)誤提示。

（二）傳遞數(shù)組引用類(lèi)型數(shù)據(jù)

第一種值類(lèi)型數(shù)據(jù)的傳遞中，在callee.htm頁(yè)面中只能讀取caller.htm頁(yè)面的傳遞數(shù)據(jù)。當(dāng)需要對(duì)caller.htm頁(yè)面的傳遞內(nèi)容進(jìn)行修改時(shí)，就需使用到數(shù)組引用類(lèi)型的傳遞方式。

首先，在caller.htm頁(yè)面中輸入以下代碼：

<!--

var a = new Array;

a[0]="first";

a[1]="second";

a[2]="third";

function fnOpenModal(){

window.showModalDialog("callee.htm",a)

}

function fnOpenModeless(){

window.showModelessDialog("callee.htm",a)

h=100% >

}

// -->

</script>

然后在callee.htm頁(yè)面中輸入以下代碼：

<!--

a = dialogArguments;

alert(a);

a[0] = "fourth";

// -->

</SCRIPT>

最后，在瀏覽器中打開(kāi)caller.htm，點(diǎn)擊任意一個(gè)按鈕，我們將首先看到如下的對(duì)話框：

接著關(guān)閉這個(gè)對(duì)話框以及新打開(kāi)的窗口，再次點(diǎn)擊一個(gè)按鈕，又出現(xiàn)一個(gè)對(duì)話框：

從運(yùn)行結(jié)果我們看到，在caller.htm頁(yè)面中通過(guò)對(duì)數(shù)組a的地址引用，就可以實(shí)現(xiàn)在callee.htm中修改數(shù)組a的內(nèi)容。

注意在callee.htm中要首先建立對(duì)傳遞數(shù)據(jù)的附值：a = dialogArguments。

（三）傳遞對(duì)象類(lèi)型數(shù)據(jù)

在caller.htm和callee.htm中傳遞數(shù)據(jù)的最有效方式是通過(guò)對(duì)象方式進(jìn)行，這不僅能實(shí)現(xiàn)從caller.htm到callee.htm的傳遞，還能從callee.htm傳遞到caller.htm。而且，我們還可以在caller.htm中定義對(duì)象的方法，再在callee.htm中使用它們。實(shí)際上，我們可以將caller.htm的window對(duì)象傳遞給callee.htm，這樣就可以在callee.htm中訪問(wèn)caller.htm的變量及函數(shù)。

來(lái)看看一個(gè)實(shí)際的例子。在caller.htm中輸入以下代碼：

<HTML>

<HEAD>

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>

</BODY>

</HTML>

在callee.htm中輸入以下代碼：

<HTML>

<HEAD>

<TITLE>callee.html</TITLE>

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>

</BODY>

</HTML>

在瀏覽器中打開(kāi)caller.htm，點(diǎn)擊“顯示非模態(tài)對(duì)話框”按鈕，出現(xiàn)新對(duì)話框：

在對(duì)話框中輸入其他顏色名稱(chēng)，點(diǎn)擊“Apply”按鈕后，執(zhí)行callee.htm中的getInfoAndUpdate函數(shù)：

function getInfoAndUpdate() {

var callerWindowObj = dialogArguments;

callerWindowObj.sColor = oEnterColor.value;

callerWindowObj.update();

}

因?yàn)樵赾aller.htm中傳遞給callee.htm的是對(duì)象類(lèi)型數(shù)據(jù)window，所以經(jīng)過(guò)第一條語(yǔ)句的附值，callerWindowObj就指向了caller.htm頁(yè)面，然后就可以在callee.htm中按照callerWindowObj.xxx的形式引用caller.htm中的變量及函數(shù)：callerWindowObj.sColor = oEnterColor.value負(fù)責(zé)將callee.htm中輸入的顏色名稱(chēng)傳遞給caller.htm中的變量sColor，然后再執(zhí)行caller.htm中的 update()函數(shù)更新顯示信息。

可以看到，通過(guò)對(duì)象方式傳遞數(shù)據(jù)，功能很豐富強(qiáng)大，而且使用起來(lái)也不復(fù)雜。

六、結(jié) 語(yǔ)

以上對(duì)使用JavaScript語(yǔ)言操作模態(tài)和非模態(tài)對(duì)話框進(jìn)行了詳細(xì)介紹，相信你又掌握了在html頁(yè)面中創(chuàng)建窗口的一個(gè)新技術(shù)。在實(shí)際應(yīng)用中，模態(tài)對(duì)話框的功能比較實(shí)用，可用于必須讓訪問(wèn)者閱讀相關(guān)內(nèi)容的情況下。另外，利用對(duì)象方式在窗口間傳遞數(shù)據(jù)，功能非常強(qiáng)大但使用卻不復(fù)雜，是非常值得一用的技術(shù)。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶(hù)發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：我想跑 > 《javascript》

舉報(bào)/認(rèn)領(lǐng)

0條評(píng)論

發(fā)表

請(qǐng)遵守用戶(hù) 評(píng)論公約

類(lèi)似文章 更多

乡下人产国偷v产偷v自拍,国产午夜片在线观看,婷婷成人亚洲综合国产麻豆,久久综合给合久久狠狠狠9

JavaScrip高級(jí)應(yīng)用：操作模態(tài)與非模態(tài)對(duì)話框