jQueryにて何らかの処理中にブラウザをロックする「Block UI」プラグインの利用方法
2024/08/29
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にて複数のajax処理のレスポンスをまとめて表示する方法
同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...
-
-
NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法
NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...
-
-
jQuery UIでカレンダーピッカー(Datepicker)の利用方法
フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...
-
-
JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法
外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描 ...
-
-
jQueryで画像が存在すれば表示、なければノーイメージ画像を表示
やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...