JavaScrip高級(jí)應(yīng)用:操作模態(tài)與非模態(tài)對(duì)話框
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
我們知道,對(duì)話框一般分為兩種類型:模態(tài)類型(modal)與非模態(tài)類型(modeless)。所謂模態(tài)對(duì)話框,就是指除非采取有效的關(guān)閉手段,用戶的鼠標(biāo)焦點(diǎn)或者輸入光標(biāo)將一直停留在其上的對(duì)話框。非模態(tài)對(duì)話框則不會(huì)強(qiáng)制此種特性,用戶可以在當(dāng)前對(duì)話框以及其他窗口間進(jìn)行切換。本文介紹如何使用javascript語(yǔ)言來(lái)創(chuàng)建這兩種類型的對(duì)話框、控制其大小和位置、改變其外觀以及在對(duì)話框間的數(shù)據(jù)傳遞。
本文的所有例程中,從層次上涉及到2個(gè)html頁(yè)面。我們把第一個(gè)頁(yè)面叫做caller頁(yè)面,第二個(gè)頁(yè)面叫做callee頁(yè)面。也就是說(shuō),在caller頁(yè)面執(zhí)行代碼創(chuàng)建生成callee頁(yè)面。
[b]一、創(chuàng)建模態(tài)和非模態(tài)對(duì)話框[/b]
首先,我們舉個(gè)例子來(lái)快速了解一下什么是模態(tài)與非模態(tài)。在caller.htm中,我們輸入以下代碼:
在瀏覽器中打開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)的窗口類型就是模態(tà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ù)種類與含義都相同。以下是各參數(shù)的含義: · vreturnvalue:對(duì)于showmodaldialog(),它表示被打開的對(duì)話框窗口設(shè)置的returnvalue屬性值。對(duì)于showmodelessdialog(),它表示新窗口對(duì)象。 · vfreeargument:這個(gè)參數(shù)可用于傳遞某種類型的數(shù)據(jù)到打開的對(duì)話框,數(shù)據(jù)可以是一個(gè)數(shù)值、字符串、數(shù)組或者一個(gè)對(duì)象類型。在新窗口中引用這個(gè)數(shù)值時(shí),可通過(guò)新創(chuàng)建window對(duì)象的dialogarguments 屬性。 · sornaments:用這個(gè)參數(shù)指定新窗口的外觀??蛇x擇的窗口屬性有很多種,當(dāng)有多種控制需求時(shí),將相關(guān)內(nèi)容用一個(gè)字符串連接起來(lái),其間用分號(hào)隔開。以下是可選擇的屬性種類: 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)用這些屬性。 [b]二、控制對(duì)話框大小和位置[/b] 控制對(duì)話框的大小和位置涉及到5個(gè)方面:高度(dialogheight)、寬度(dialogwidth)、相對(duì)于桌面左上角的x坐標(biāo)(dialogleft)、y坐標(biāo)(dialogtop)以及是否讓對(duì)話框窗口居中(center)。由于不同版本的internet explorer瀏覽器處理的默認(rèn)度量單位并非一致,所以我們?cè)谥付ǜ叨?、寬度等大小時(shí),最好是同時(shí)設(shè)置好單位。單位種類包括很多,比如cm、mm、in、pt、pc、px。請(qǐng)注意:最小的高度值是100px。 下面的代碼將打開一個(gè)高200px、寬800px的對(duì)話框: window.showmodaldialog('callee.htm','','dialogheight:200px;dialogwidth:800px'); 我們注意到,打開的新窗口會(huì)在桌面中處于居中的位置,這也正是居中屬性(center)的默認(rèn)值。居中屬性(center)的可取值包括yes、no、1、0、on和off,含義一目了然。執(zhí)行以下代碼,看看關(guān)閉居中屬性后新窗口的位置: window.showmodaldialog('callee.htm','','dialogheight:200px;dialogwidth:800px;center:no'); 我們看到,新窗口緊挨者桌面的左上角打開。當(dāng)然,我們可以使用dialogleft和dialogtop 屬性來(lái)精確定義新窗口的打開位置。下面的代碼將在相對(duì)于桌面左上角的x位置300px和y位置500px處打開新窗口: window.showmodaldialog('callee.htm','','dialogheight:200px;dialogwidth:800px;dialogleft:300;[br]dialogtop:500') 注意,即使指定了居中屬性,但如果同時(shí)設(shè)置了dialogleft和dialogtop屬性值,那么窗口位置將遵從后者。試一試執(zhí)行下面的代碼: window.showmodaldialog('callee.htm','','dialogheight:200px;dialogwidth:800px;dialogleft:300;[br]dialogtop:500;center:yes') [b]三、改變對(duì)話框外觀[/b] 對(duì)話框的外觀控制包括從窗口邊緣風(fēng)格(edge)、是否存在滾動(dòng)條(scroll)、是否包含上下文關(guān)聯(lián)提示圖標(biāo)(help)、是否顯示狀態(tài)欄(status)以及是否可以改變窗口大?。╮esizable)等方面。默認(rèn)情況下,新打開的窗口是大小不可改變的、邊緣風(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"); [p]執(zhí)行后,圖示如下:[/p] [p] [/p] [b]四、從caller頁(yè)面?zhèn)鬟f數(shù)據(jù)到callee頁(yè)面[/b] 上面我們介紹了創(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類:傳遞值、傳遞數(shù)組引用以及傳遞對(duì)象,它們都是通過(guò)showmodaldialog()和showmodelessdialog()的第2個(gè)參數(shù)實(shí)現(xiàn)的。 [b](一)傳遞值類型數(shù)據(jù)[/b] 在caller.htm頁(yè)面中輸入以下代碼: 在callee.htm頁(yè)面中輸入以下代碼: 在瀏覽器中打開caller.htm,點(diǎn)擊任意一個(gè)按鈕,我們將首先看到如下的提示信息框: 然后才出現(xiàn)新窗口。這種情況下,callee.htm頁(yè)面中的window對(duì)象的屬性dialogarguments將對(duì)應(yīng)于caller.htm頁(yè)面中的"打開了一個(gè)新模態(tài)窗口"或者"打開了一個(gè)新非模態(tài)窗口"。如果直接打開callee.htm,將會(huì)出現(xiàn)錯(cuò)誤提示。 [b](二)傳遞數(shù)組引用類型數(shù)據(jù)[/b] 第一種值類型數(shù)據(jù)的傳遞中,在callee.htm頁(yè)面中只能讀取caller.htm頁(yè)面的傳遞數(shù)據(jù)。當(dāng)需要對(duì)caller.htm頁(yè)面的傳遞內(nèi)容進(jìn)行修改時(shí),就需使用到數(shù)組引用類型的傳遞方式。 首先,在caller.htm頁(yè)面中輸入以下代碼: 然后在callee.htm頁(yè)面中輸入以下代碼: 最后,在瀏覽器中打開caller.htm,點(diǎn)擊任意一個(gè)按鈕,我們將首先看到如下的對(duì)話框: 接著關(guān)閉這個(gè)對(duì)話框以及新打開的窗口,再次點(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。 [b](三)傳遞對(duì)象類型數(shù)據(jù)[/b] 在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中輸入以下代碼: 輸入你最喜歡的顏色: yellow 在callee.htm中輸入以下代碼:在瀏覽器中打開caller.htm,點(diǎn)擊“顯示非模態(tài)對(duì)話框”按鈕,出現(xiàn)新對(duì)話框: 在對(duì)話框中輸入其他顏色名稱,點(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ì)象類型數(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中輸入的顏色名稱傳遞給caller.htm中的變量scolor,然后再執(zhí)行caller.htm中的 update()函數(shù)更新顯示信息。 可以看到,通過(guò)對(duì)象方式傳遞數(shù)據(jù),功能很豐富強(qiáng)大,而且使用起來(lái)也不復(fù)雜。 [b]六、結(jié) 語(yǔ)[/b] 以上對(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ù)。 該文章在 2010/8/13 9:27:24 編輯過(guò)
|
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |