jQuery BlockUI

簡単!フォーム送信中の誤動作を防ぐjQuery BlockUI Pluginのサンプル

送信フォームで、送信の待ち時間中にユーザーが他のリンク個所を押してしまう事があります。

その動作を防ぐために、送信ボタンを押したら画面全体にローディング中の文言を出す、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 Pゴシック", "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);  //2秒でポップアップを非表示にする
    }); 
}); 
</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>

人気記事ランキング

投稿者:

kishiken

企業務めのWEBデザイナーです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です