ボタンが押されたら画面をロックする
2011.01.08
エンタープライズアプリだとよくあるご要望で、とにかくなんか処理を起動したら、終わるまで画面をいじれないようにしたい。
index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>screenlock test</title>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#Btn").click(function(evt)
{
lockScreen();
//「?time=xxxx」はIEのキャッシュ対策
var url = './main.php?' + new Date().getTime();
$.getJSON(url, function(evt)
{
// サーバーからレスポンスがあった
unlockScreen();
alert(evt[0]);
});
});
function lockScreen()
{
$("body").append('<div id="LockScreen" style="position:absolute;left:0;top:0;width:100%;height:100%;color:black;background:white;opacity:0.8;filter:alpha(opacity=80);"><p align="center">現在重い処理をしてます。<br />しばらくお待ちくださいでやんす。<br /><img src="loading.gif" /></p></div>');
}
function unlockScreen()
{
$("#LockScreen").remove();
}
});
</script>
</head>
<body>
<input type="button" name="btn" id="Btn" value="処理開始" />
</body>
</html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>screenlock test</title>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#Btn").click(function(evt)
{
lockScreen();
//「?time=xxxx」はIEのキャッシュ対策
var url = './main.php?' + new Date().getTime();
$.getJSON(url, function(evt)
{
// サーバーからレスポンスがあった
unlockScreen();
alert(evt[0]);
});
});
function lockScreen()
{
$("body").append('<div id="LockScreen" style="position:absolute;left:0;top:0;width:100%;height:100%;color:black;background:white;opacity:0.8;filter:alpha(opacity=80);"><p align="center">現在重い処理をしてます。<br />しばらくお待ちくださいでやんす。<br /><img src="loading.gif" /></p></div>');
}
function unlockScreen()
{
$("#LockScreen").remove();
}
});
</script>
</head>
<body>
<input type="button" name="btn" id="Btn" value="処理開始" />
</body>
</html>
main.php
<?php
// なんか重い処理
sleep(10);
// レスポンスする
$ret = array(
'処理完了'
);
echo json_encode($ret);
// なんか重い処理
sleep(10);
// レスポンスする
$ret = array(
'処理完了'
);
echo json_encode($ret);
