狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
版主

JavaScrip高級應用:操作模態與非模態對話框

tercel
2010年8月13日 9:27 本文熱度 4473
我們知道,對話框一般分為兩種類型:模態類型(modal)與非模態類型(modeless)。所謂模態對話框,就是指除非采取有效的關閉手段,用戶的鼠標焦點或者輸入光標將一直停留在其上的對話框。非模態對話框則不會強制此種特性,用戶可以在當前對話框以及其他窗口間進行切換。本文介紹如何使用javascript語言來創建這兩種類型的對話框、控制其大小和位置、改變其外觀以及在對話框間的數據傳遞。 本文的所有例程中,從層次上涉及到2個html頁面。我們把第一個頁面叫做caller頁面,第二個頁面叫做callee頁面。也就是說,在caller頁面執行代碼創建生成callee頁面。 [b]一、創建模態和非模態對話框[/b] 首先,我們舉個例子來快速了解一下什么是模態與非模態。在caller.htm中,我們輸入以下代碼:

在瀏覽器中打開caller.htm,點擊“創建模態對話框”按鈕,將會出現一個對話框窗口,其中的內容是callee.htm。你會看到,除了關閉這個新窗口,無論怎樣我們也不能將其他的窗口設置為“當前活動”窗口,這個一直是活動狀態的窗口類型就是模態類型。關閉這個模態對話框,回到caller.htm頁面,點擊“創建非模態對話框”,出現一個包含callee.htm頁面的對話框窗口。這回有所不同,鼠標可以轉移到其他地方使另外的窗口成為“當前活動”狀態,這就是非模態的概念。 接下來,我們看看創建模態對話框與非模態對話框的相關語法: 創建模態對話框: vreturnvalue = window.showmodaldialog(surl [, vfreeargument] [, sornaments]); 創建非模態對話框: vreturnvalue = window.showmodelessdialog(surl [, vfreeargument] [, sornaments]); 從上面的語法我們得知:除了名字有所區別外,參數種類與含義都相同。以下是各參數的含義: · vreturnvalue:對于showmodaldialog(),它表示被打開的對話框窗口設置的returnvalue屬性值。對于showmodelessdialog(),它表示新窗口對象。 · vfreeargument:這個參數可用于傳遞某種類型的數據到打開的對話框,數據可以是一個數值、字符串、數組或者一個對象類型。在新窗口中引用這個數值時,可通過新創建window對象的dialogarguments 屬性。 · sornaments:用這個參數指定新窗口的外觀??蛇x擇的窗口屬性有很多種,當有多種控制需求時,將相關內容用一個字符串連接起來,其間用分號隔開。以下是可選擇的屬性種類: 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控制。 以下我們來詳細解釋如何應用這些屬性。 [b]二、控制對話框大小和位置[/b] 控制對話框的大小和位置涉及到5個方面:高度(dialogheight)、寬度(dialogwidth)、相對于桌面左上角的x坐標(dialogleft)、y坐標(dialogtop)以及是否讓對話框窗口居中(center)。由于不同版本的internet explorer瀏覽器處理的默認度量單位并非一致,所以我們在指定高度、寬度等大小時,最好是同時設置好單位。單位種類包括很多,比如cm、mm、in、pt、pc、px。請注意:最小的高度值是100px。 下面的代碼將打開一個高200px、寬800px的對話框: window.showmodaldialog('callee.htm','','dialogheight:200px;dialogwidth:800px'); 我們注意到,打開的新窗口會在桌面中處于居中的位置,這也正是居中屬性(center)的默認值。居中屬性(center)的可取值包括yes、no、1、0、on和off,含義一目了然。執行以下代碼,看看關閉居中屬性后新窗口的位置: window.showmodaldialog('callee.htm','','dialogheight:200px;dialogwidth:800px;center:no'); 我們看到,新窗口緊挨者桌面的左上角打開。當然,我們可以使用dialogleft和dialogtop 屬性來精確定義新窗口的打開位置。下面的代碼將在相對于桌面左上角的x位置300px和y位置500px處打開新窗口: window.showmodaldialog('callee.htm','','dialogheight:200px;dialogwidth:800px;dialogleft:300;[br]dialogtop:500') 注意,即使指定了居中屬性,但如果同時設置了dialogleft和dialogtop屬性值,那么窗口位置將遵從后者。試一試執行下面的代碼: window.showmodaldialog('callee.htm','','dialogheight:200px;dialogwidth:800px;dialogleft:300;[br]dialogtop:500;center:yes') [b]三、改變對話框外觀[/b] 對話框的外觀控制包括從窗口邊緣風格(edge)、是否存在滾動條(scroll)、是否包含上下文關聯提示圖標(help)、是否顯示狀態欄(status)以及是否可以改變窗口大?。╮esizable)等方面。默認情況下,新打開的窗口是大小不可改變的、邊緣風格為凸起、在新窗口右上角顯示一個上下文關聯提示圖標、存在滾動條,比如: edge的可取值為sunken(凹陷)和raised(凸起),status、help、resizeable和scroll的可取值都是yes、no、1、0、on和off,其含義一目了然。 下面的代碼將去除上下文關聯提示圖標、不顯示狀態欄、窗口邊緣風格為凹陷: showmodelessdialog("callee.htm","","status:0;help:0;edge:sunken"); [p]執行后,圖示如下:[/p] [p] [/p] [b]四、從caller頁面傳遞數據到callee頁面[/b] 上面我們介紹了創建模態和非模態窗口的語法以及如何控制新窗口的大小、位置和外觀,接下來我們研究一下實際應用中更實用的功能:如何從caller頁面傳遞數據到callee頁面。 從caller頁面傳遞給callee頁面的數據分為3類:傳遞值、傳遞數組引用以及傳遞對象,它們都是通過showmodaldialog()和showmodelessdialog()的第2個參數實現的。 [b](一)傳遞值類型數據[/b] 在caller.htm頁面中輸入以下代碼:

在callee.htm頁面中輸入以下代碼: 在瀏覽器中打開caller.htm,點擊任意一個按鈕,我們將首先看到如下的提示信息框: 然后才出現新窗口。這種情況下,callee.htm頁面中的window對象的屬性dialogarguments將對應于caller.htm頁面中的"打開了一個新模態窗口"或者"打開了一個新非模態窗口"。如果直接打開callee.htm,將會出現錯誤提示。 [b](二)傳遞數組引用類型數據[/b] 第一種值類型數據的傳遞中,在callee.htm頁面中只能讀取caller.htm頁面的傳遞數據。當需要對caller.htm頁面的傳遞內容進行修改時,就需使用到數組引用類型的傳遞方式。 首先,在caller.htm頁面中輸入以下代碼:

然后在callee.htm頁面中輸入以下代碼: 最后,在瀏覽器中打開caller.htm,點擊任意一個按鈕,我們將首先看到如下的對話框: 接著關閉這個對話框以及新打開的窗口,再次點擊一個按鈕,又出現一個對話框: 從運行結果我們看到,在caller.htm頁面中通過對數組a的地址引用,就可以實現在callee.htm中修改數組a的內容。 注意在callee.htm中要首先建立對傳遞數據的附值:a = dialogarguments。 [b](三)傳遞對象類型數據[/b] 在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中輸入以下代碼: 傳遞對象數據

輸入你最喜歡的顏色: yellow

在callee.htm中輸入以下代碼: callee.html [p][/p] [p] [/p] 輸入你最喜歡的顏色:

在瀏覽器中打開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()函數更新顯示信息。 可以看到,通過對象方式傳遞數據,功能很豐富強大,而且使用起來也不復雜。 [b]六、結 語[/b] 以上對使用javascript語言操作模態和非模態對話框進行了詳細介紹,相信你又掌握了在html頁面中創建窗口的一個新技術。在實際應用中,模態對話框的功能比較實用,可用于必須讓訪問者閱讀相關內容的情況下。另外,利用對象方式在窗口間傳遞數據,功能非常強大但使用卻不復雜,是非常值得一用的技術。

該文章在 2010/8/13 9:27:24 編輯過

全部評論1

tercel
2010年8月13日 9:28
[p]parentpage.aspx:主頁面[/p] [p]dialogpage.aspx:模態窗口,在部分要添加[/p] [p] [/p] [p]一、模態窗口打開[br]parentpage.aspx:[br]window.showmodaldialog("dialogpage.aspx",window,"dialogheight: 200px; dialogwidth: 150px; dialogtop: 458px; [/p] [p]dialogleft: 166px; edge: raised; center: yes; help: yes; resizable: yes; status: yes;");[/p] [p] [/p] [p]二、模態窗口關閉[br]dialogpage.aspx:[br]window.close();[/p] [p] [/p] [p]三、模態窗口傳遞參數[br]parentpage.aspx:[br]window.showmodaldialog("dialogpage.aspx?para1=para1&psara2=para2");[/p] [p]dialogpage.aspx:[br]string str1=request.querystring["para1"].tostring();[br]string str2=request.querystring["para2"].tostring();[/p] [p] [/p] [p]四、模態窗口獲取返回值[br]parentpage.aspx:[br]var str=window.showmodaldialog("dialogpage.aspx");[br]str[0]、str[1]、str[2][/p] [p]dialogpage.aspx:[br]arrcheck[0]=value1;[br]arrcheck[1]=value2;[br]arrcheck[2]=value3;[br]window.returnvalue = arrcheck;[/p] [p] [/p] [p]五、模態窗口緩存問題(只有第一次打開模態窗口才執行page_load事件)[/p] [p]parentpage.aspx:[br]window.showmodaldialog("dialogpage.aspx?__rand="+math.random());[/p] [p]其中__rand為自定義參數。[/p] [p]網上還有其他幾種解決方案(都是清空緩存的,沒有嘗試過)![/p] [p] [/p] [p] [/p] [p]-------------------------------------------------------------------------------------[br]msdn關于摸態窗口的基本介紹:[br]showmodaldialog() (ie 4+ 支持)[br]showmodelessdialog() (ie 5+ 支持)[br]showmodaldialog()方法用來創建一個顯示html內容的模態對話框。[br]showmodelessdialog()方法用來創建一個顯示html內容的非模態對話框。[br][br]使用方法:[br]vreturnvalue = showmodaldialog(surl [, varguments] [,sfeatures])[br]vreturnvalue = showmodelessdialog(surl [, varguments] [,sfeatures])[br][br]參數說明:[br]surl--[br]必選參數,類型:字符串。用來指定對話框要顯示的文檔的url。[br]varguments--[br]可選參數,類型:變體。用來向對話框傳遞參數。傳遞的參數類型不限,包括數組等。對話框通過dialogarguments來取得傳遞進來的參數。[br]sfeatures--[br]可選參數,類型:字符串。用來描述對話框的外觀等信息,可以使用以下的一個或幾個,用分號“;”隔開。[br]1.dialogheight :對話框高度,不小于100px,ie4中dialogheight 和 dialogwidth 默認的單位是em,而ie5中是px,為方便其見,在定義modal方式的對話框時,用px做單位。[br]2.dialogwidth: 對話框寬度。[br]3.dialogleft: 離屏幕左的距離。[br]4.dialogtop: 離屏幕上的距離。[br]5.center: {yes | no | 1 | 0 }:窗口是否居中,默認yes,但仍可以指定高度和寬度。[br]6.help: {yes | no | 1 | 0 }:是否顯示幫助按鈕,默認yes。[br]7.resizable: {yes | no | 1 | 0 } [ie5+]:是否可被改變大小。默認no。[br]8.status: {yes | no | 1 | 0 } [ie5+]:是否顯示狀態欄。默認為yes[ modeless]或no[modal]。[br]9.scroll:{ yes | no | 1 | 0 | on | off }:指明對話框是否顯示滾動條。默認為yes。[br]下面幾個屬性是用在hta中的,在一般的網頁中一般不使用。[br]10.dialoghide:{ yes | no | 1 | 0 | on | off }:在打印或者打印預覽時對話框是否隱藏。默認為no。[br]11.edge:{ sunken | raised }:指明對話框的邊框樣式。默認為raised。[br]12.unadorned:{ yes | no | 1 | 0 | on | off }:默認為no。[/p]

該評論在 2010/8/13 9:28:04 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved