Source of blog/2010-07-07 - Epilogue/LogueWiki

#navi(../)
*jQueryUI BlockUI [#ifc4846a]
jQueryUIでajax通信時にローディング画像を中央に表示する。

http://pure-essence.net/2010/01/29/jqueryui-dialog-as-loading-screen-replace-blockui/を参考に作成。

スクリプト：
#sh(js){{
$(window).ready(function(){
	$('<div id="loadingScreen"></div>').appendTo('body');
	var loadingScreen = $("div#loadingScreen");
	loadingScreen.dialog({
		autoOpen: false,	// set this to false so we can manually open it
		dialogClass: "loadingScreenWindow",
		closeOnEscape: false,
		draggable: false,
		width: 100,
		height: 100,
		modal: true,
		show: 'fade',
		hide: 'fade',
		buttons: {},
		resizable: false,
		open: function() {
			// scrollbar fix for IE
			$('body').css('overflow','hidden');
		},
		close: function() {
			// reset overflow
			$('body').css('overflow','auto');
		}
	}); // end of dialog
	$(document).ajaxStart(function(){
		$('body').css('cursor','wait');
		loadingScreen.dialog('open');
	}).ajaxStop(function(){
		loadingScreen.dialog('close');
		$('body').css('cursor','auto');
	});
});
}}
スタイルシート
#sh(css){{
/* jQueryUI BlockUI */
div#loadingScreen {
	width:100px;
	height:100px;
	cursor:progress;
	background: url(loading.gif) no-repeat;
}

/* タイトルバーを隠す */
div.loadingScreenWindow .ui-dialog-titlebar {
	display: none;
}
}}

「ツールチップもajaxで読みとってるよ。」って人は、ツールチップのajax処理にglobal:falseを追加しないと愉快なことになります。
Founded by Logue
⇪Top