熊伯的外接硬碟: dojox/widget/*

2015年10月12日星期一

dojox/widget/Standby

簡介

在 dojo 中使用宣告法建立 dijit 時，在 dojo 的剖析器剖析 HTML 時，介面元件會先以流覽器的預設樣式顯示，然後再以 dijit 的外觀呈現。在這個過程中，畫面上會有「閃動」的情況發生，造成使用者的經驗不佳。最好的方式是顯示一個下載中的訊息或動畫，將畫面遮住，等到 dijit 準備好了，才顯示在畫面上。dojo 的套件也提供了一個動畫元件 dojox/widget/Standby 來做這件事。每建立一個 Standy 元件，可以在畫面上顯示一個下載中的動畫，可以透過設定來改變動畫顯示的位置。如果要同時在畫面上顯示數個下載中的動畫，則每一個動畫需建立一個 Standby 元件，並分別指定動畫顯示的位置。

範例

範例中建立了二個方形區域及三個按鈕，二個方形區域是用來展現 dojox/widget/Standby 的功能。另外建立了三個按鈕，一個用來顯示下載中的動畫，一個用來取消動畫，第三個按鈕用來在二個方形區域中切換動畫顯示的位置。

CSS

<style>
html {
    width:100%;
    height:100%;
} 
body {
    margin: 0 auto;
    width:1000px;
    height: 100%;
    padding: 20px;
}
</style>

沒有特別的樣式需要定義。

HTML

<body class="claro">
 
    
    <br>
    <br>
    
</body>

Script

第 16~18 行建立一個 Standby 的元件。
target 指定動畫要遮蔽的區域，必須給一個 id 值，或是一個 dom node。
image 指定動畫的來源，可以用來改變預設的動畫。但要注意的是，如果動畫的尺寸大於要遮蔽的區域，就會看不到動畫了。預設的動畫只有 32 x 32 的大小。
color 指定動畫遮蔽膜的顏色。
duration 指定動畫在顯示及隱藏時所運作的時間，以 ms（千分之一秒）為單位。

第 26 行的寫法看起來有點奇怪，這是因為 standby.target 的值，在經過 dojo 的處理後，變成了一個 dom node，所以要讀取原來的 string 值時，必須寫成 standby.get("target").id，單純的寫 standby.get("target") 時，只會讀到一個 dom node。

第 23~28 行是切換動畫顯示位置的函式。

2015年10月5日星期一

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月12日 星期一

dojox/widget/Standby

2015年10月5日 星期一

dojox/widget/DialogSimple

2015年10月12日星期一

2015年10月5日星期一