jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法
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部分のみブロック等の指定も可能。
関連記事
-
-
八地方区分→都道府県→路線→駅名の連携したセレクトメニュー の実装方法
八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...
-
-
JavaScript / jQueryで〇番目、最初、最後の要素を指定する方法
jQueryでリストタグ(<li>)の〇番目、最初、最後の要素を指定 ...
-
-
FormDataを使ったAjax通信がiPhoneのみエラー
FormDataオブジェクトを使用したAjax通信するシステムがあり、PCやAn ...
-
-
FullCalendarでラベルごとに表示・非表示を切り替える方法
Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意 ...
-
-
jQueryプラグインのDateTimePickerで年月日と時間のピッカーを実装する方法
jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...