blog/2010-07-07

---

Total: 2202 / Today: 1 / Yesterday: 0

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: {

スタイルシート

/* jQueryUI BlockUI */
div#loadingScreen {
	width:100px;
	height:100px;
	cursor:progress;
	background: url(loading.gif) no-repeat;

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

---

Last Modified: 2010-07-07 17:28:00