dojox/widget/DialogSimple

簡介

dojo 裡本來就提供了一個 dijit/Dialog ，為何又要提供一個 dojox/widget/DialogSimple 呢？實際上，dojo 中提供了很多不同的 Dialog （對話框），不同的 Dialog 各有不同的功能及用途，有的 Dialog 在外觀上有明顯的不同。digit/Dialog 和 dojox/widget/DialogSimple 在外觀上完全一樣，不同的是 dijit/Dialog 繼承了 dijit/layout/ContentPane，而 dijix/widget/DialogSimple 繼承了 dojox/layout/ContentPane，當引入外部網頁做為 Dialog 的內容時，一樣可以執行附加在外部網頁中的 Javascript 程式碼，在所以在功能上比 dijit/Dialog 要強。因為繼承了 dojox/layout/ContentPane，所以在 dojox/layout/ContentPane 能做的事情，在 dojox/widget/DialogSimple 都可以套用。

dijit/Dialog 或是 dojox/widget/DialogSimple 都一樣，最特殊的一點是，當使用宣告法時，不論把 Dialog 或 DialogSimple 放在網頁的何處，最終的 HTML 碼裡，Dialog 或 DialogSimple 的 HTML 碼都會被提升至 <body> 標記的下方，成為 <body> 的直接子節點。當使用程式法時，不論 Dialog 的掛載點在何處，也是一樣的結果。這是因為做為一個 modal 的元件，這兩個 Dialog 在顯示時，都會產生一個背景屏蔽，將其它螢幕上的元件遮住，阻止使用者採取其它行動，直到使用者對 Dialog 做出反應，才會在隱藏 Dialog 時，取消對螢幕的屏蔽。

範例

範例中先產生一個按鈕，按下按鈕後會顯示一個登入的 Dialog，在 Dialog 中，按下 OK 或是 Cancel 按鈕，亦或是按下右上角的 X 符號，都會隱藏 Dialog ，但不會做其它的動作。

CSS

<style>
.claro .dijitDialogUnderlay {
    background-color:lightgreen;
    opacity:0.5;
}
.dijitDialogPaneContentArea {
    min-width: 300px;
    min-height: 200px;
}
</style>

如果不喜歡預設屏蔽的顏色或是透明度，可以藉由更改 .claro .dijitDialogUnderlay 的 background-color 或 opacity 屬性，以逹到要求。
如果希望 Dialog 不論內容的多寡，都能至少維持一定的大小，最好是修改 .dijitDialogPaneContentArea 的 min-width 和 min-height 屬性的值。要注意的是這個值不含 .dijitDialogTitle 及 .dijitDialogPaneActionBar 的高度。

HTML

<body class="claro">
    
    
        
            
                
                  
                      Name:
                      
                  
                  
                      Password:
                      
                  
                
            
     
                    
            
            
        
    
</body>

Dialog 的內容又分成兩大塊區域，一塊是 class="dijitDialogPaneContentArea" 的區域，這塊區域放置 Dialog 的內容。另一塊是 class="dijitdialogPaneActionBar" 的區域，這個區域放置使用者採取行動時的按鈕，它的區域底色有所不同。

Script

Javascript 的程式碼，只是單純的顯示 Dialog 及隱藏 Dialog ，沒有做其它特別值得一提的事情。

熊伯的外接硬碟

2015年10月5日星期一