用dojo實現頁面控件阻塞的幾種方法

經常碰到這樣一種需求，當點擊某個按鈕向服務器發送請求時，需要將整個頁面或頁面的某些控件阻塞住，直到請求返回，才允許用戶操作。

要實現這個功能，dojo中提供了多種方法。這兒就列舉幾種出來。（dojo 1.7.3）

 

1 阻塞整個頁面

dijit/Dialog

<div class="dijitHidden">
		<div id="dialog" data-dojo-type="dijit.Dialog" style="width: 400px;">
			Loading...
		</div>
</div>
on(dom.byId("show_dialog"), "click", function(e) {
                            var dialog = registry.byId("dialog");
							//dialog.titleBar.style.display='none';
							dialog.show();
						});

好處：當顯示Dialog的titlebar時，可隨時關掉這個dialog取消阻塞。當然也可以把titlebar隱藏起來。

dijit/DialogUnderlay

div.loading {
    background-image: url(/img/loading.gif);
    background-repeat: no-repeat;
    background-position: center;
}
	<div class="dijitHidden">
		<div id="underlay" data-dojo-type="dijit.DialogUnderlay" class="loading" >
		</div>
	</div>
on(dom.byId("show_underlay"), "click", function(e) {
                            var underlay = registry.byId("underlay");
					        underlay.show();
						});

好處：也不需要定義複雜的jsobject各種屬性，只要加一個cssstyle就可以改變樣子。

 

2. 阻塞頁面某些控件

dojox.widget.Standby

<div id="standby" data-dojo-type="dojox.widget.Standby"
		data-dojo-props="target:container, color:'lightgray', 
			text:'Loading...'">
	</div>
on(dom.byId("show_standby"), "click", function(e) {
                            var standby = registry.byId("standby");
							standby.show();
						});
on(dom.byId("stop"), "click", function(e) {
                            var standby = registry.byId("standby");
							standby.hide();
						});

好處：Standby屬性中，target寫誰的id，就阻塞誰，頁面其他地方都不影響。

dojox.form.BusyButton

<button data-dojo-type="dojox.form.BusyButton" 
			id="button_noTimeout" busyLabel="Starting..." >Start</button>
<button data-dojo-type="dijit.form.Button" id="buttonCancel">Cancel button</button>
on(dom.byId("buttonCancel"), "click", function(e) {
							registry.byId("button_noTimeout").cancel();
						});

好處：只針對Button的阻塞方法。可設置多種屬性比如timeout。