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