2014年7月29日

Webページが切り替わるときに全体をブロックする方法

 ページが切り替わる時にボタンを連打したりされると困ることはけっこうあると思います。
よくある回避方法としては、押したボタンをdisable状態にしてしまうことでしょうか?
しかし、その場合でも、他のボタンやリンクをクリックすると新しいリクエストがサーバーに送信されてしまいます。

システムを使っている人は、サーバーからのレスポンスが遅いため、今ボタンを押したのかどうかを忘れてしまって再度押してしまっていたり、レスポンスが遅いからカチカチしてしまうのかもしれません。
 それならば、「今サーバーに送信中なのでちょっとまってねん。」な感じのメッセージを出しながら保険で、画面全体を触れないようにすれば良いのでは無いかと考えました。

 で、それを回避する方法としてちょっと調べました。
blockUIというJQueryのプラグインを紹介している方がいましたので、それを調べてみました。
ページ全体をブロックしながら、メッセージを表示するというものです(詳しい使い方は参考サイトを見てください)。


ポイントは、beforeunloadイベントに仕掛けることです(これが一番簡単。でも、イベントが起きないことがたまにありました原因は何でしょうか?)。
こうすることでページが切り替わる時に必ず画面全体がブロックされます。

$(window).bind("beforeunload",
    function(e) {
        $.blockUI({overlayCSS: { backgroundColor: '#555555' },
            message: "<h1> style="font-size: 20px;"<お待ちください…。</h1>",
            css: {
                border: 'none',
                padding: '15px',
                backgroundColor: '#000',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: '.5',
                color: '#fff'
                },
            fadeIn: 000,
            fadeOut: 000
        }); 
    }
);


これで、イライラを少しは解消できるのでは無いでしょうか?

参考サイト

http://www.malsup.com/jquery/block/(プレグイン作者のサイト)
http://h2ham.seesaa.net/article/108389263.html(プラグインを紹介している方のサイト)

0 件のコメント:

コメントを投稿