勉強したことのメモ

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

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

   2024/08/29  jQuery

jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたかった。調べたところjQuery BlockUIというプラグインが導入が簡単みたい。以下にサンプルと利用方法をメモ。

 

サンプル

https://taitan916.info/sample/jquery_block_ui/

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

 

Block UI

公式サイト

https://jquery.malsup.com/block/

CDN

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

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.js"></script>

 

利用方法

ソースコード

<style>
.msg{
    margin: 20px;
}
</style>

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

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.js"></script>
<script>
$(function(){
    $(`#btn`).on(`click`, function(){
        const option = {
            message: `<div class="msg">只今処理中のため、<br>ページを閉じずにお待ちください</div>`,
        }
        $.blockUI(option);

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

注意点

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

 - jQuery

  関連記事

ラジオボタンのカスタムデータ属性を取得し、特定の値の場合はチェックさせない方法

ASPを使用したサイトで特定のradioボタンは選択不可にしたいというケースがあ ...

jQueryでHTMLの特定要素をループ時に逆順で処理する方法

jQueryでリスト(li)タグ等の特定要素をeach()でループ処理する場合、 ...

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...

「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...

jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。簡単に使えるし ...