送信フォームで、送信の待ち時間中にユーザーが他のリンク個所を押してしまう事があります。
その動作を防ぐために、送信ボタンを押したら画面全体にローディング中の文言を出す、jQueryプラグインを紹介します。
そのプラグインの名前は、jQuery BlockUI Pluginです。
参考サイトでは、いくつかの動作パターンが載っていますが、実装も簡単です。
今回は良くあるローディング中画像と文言の出るサンプルを制作しました。
動作サンプル
HTMLサンプル
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery BlockUI サンプル</title>
<style>
body {
margin: 20px;
font-family: Verdana, Arial, "メイリオ", Meiryo, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
h1 {
font-size: 140%;
}
input {
font-size: 100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.blockUI.js"></script>
<script>
$(document).ready(function() {
$('#foo').click(function() {
$.blockUI({ css: {
border: 'none', //ボーダー有無
padding: '15px', //パディング
backgroundColor: '#fff', //背景色
color: '#333', //フォントカラー
'-webkit-border-radius': '10px', //角丸
'-moz-border-radius': '10px', //角丸
opacity: .8 //透明度
},
message: $('#tallContent')} //メッセージ表示内容
);
$('.blockOverlay').attr('title','Click to unblock').click($.unblockUI); //クリックで非表示
//setTimeout($.unblockUI, 2000); //２秒でポップアップを非表示にする
});
});
</script>
</head>
<body>
<div id="tallContent" style="display:none">
<h1>しばらくお待ち下さい</h1>
<p><img src="gif-load.gif" width="40"></p>
</div>
<div class="container">
<h1>jQuery BlockUI サンプル</h1>
<input type="button" id="foo" value="送信" />
</div>
</body>
</html>
