jQueryUI BlockUI

jQueryUIでajax通信時にローディング画像を中央に表示する。

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

スクリプト:

$(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');
	});
});

スタイルシート

/* 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を追加しないと愉快なことになります。