勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法

  jQuery JavaScript

jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたい。だいぶ前にjQueryの「Block UI」というプラグインをメモしたが(個人的に)デザイン部分が合わなかった。他にないか調べたところ「waitMe」プラグインがシンプルかつ見た目的に好み。以下にサンプルと利用方法をメモ。

 

サンプル

https://taitan916.info/sample/jquery_waitMe/

ボタンをクリックするとブラウザ上で他の動作が行えなくなり、2秒後に解除される点が確認できる筈。

 

waitMe

公式サイト

http://vadimsva.github.io/waitMe/

GitHub

https://github.com/vadimsva/waitMe

CDN

CDNで使う場合は以下を記述する。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/waitme@1.19.0/waitMe.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/waitme@1.19.0/waitMe.min.css" rel="stylesheet">

 

利用方法

ソースコード

<button id="btn">button</button>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/waitme@1.19.0/waitMe.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/waitme@1.19.0/waitMe.min.css" rel="stylesheet">
<script>
$(function(){
    $(`#btn`).on(`click`, function(){
        const option = {
            text: `<div class="msg">只今処理中のため、<br>ページを閉じずにお待ちください<div>`,
            bg: `rgba(230,230,230,0.6)`,
        }
        $(`body`).waitMe(option);

        //2秒後に解除
        setTimeout(() => {
            $(`body`).waitMe(`hide`);
        }, 2000);
    });
});
</script>

注意点

上記ソースコードはサンプルのため2秒後に解除しているが、本来であれば何らかの処理終了後に「$(`body`).waitMe(`hide`);」で解除すること。

尚、今回はbody内全てをブロックしているが、例えばform部分のみブロック等の指定も可能。

 - jQuery JavaScript

  関連記事

「jQuery.browser is undefined」エラーの対応方法

jQueryのプラグインを使っていて1.9以降だと「jQuery.browser ...

CAPTCHAに代わる無料のツール「Cloudflare Turnstile」の導入方法

CAPTCHAと言えばGoogleのreCAPTCHAを思い浮かべるが、稀にCl ...

jQueryでshow/hideよりaddClass/removeClassの方が速い

diaplay:none/blockする際に最近はshow()/hide()を ...

要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...

jQuery Alert Dialogsで表示後に処理したい

最近携わったサイトの中でJavaScript内に「jAlert」とかいう記述があ ...