読者です 読者をやめる 読者になる 読者になる

Web系開発メモ

Java, SpringBoot, JavaScript, CSS, HTML などの記事を書いています。

jQuery Plugin:BlockUI(画面のブロック)

JavaScript

Ajax 通信のときに、画面の操作をブロックしたいことがあったりします。jQuery Plugin の BlockUI を使うと、簡単に画面の操作をブロックすることができます。

画面イメージ

ブロック中の画面は、次のような感じです。 blocking-display

以下に利用手順を書いていきます。

手順1. HTML の編集

BlockUI を使いたい HTML に、jQuery と BlockUI を追加します。

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://malsup.github.io/jquery.blockUI.js"></script>

手順2. JavaScript の追加

次の JavaScript を追加して、HTML が読み込まれたら実行されるようにします。

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

これで、jQueryAjax 通信をするときに、画面がブロックされるようになります。

デモ画面

下の Click ボタンを押すと、BlockUI で画面をブロックします。

See the Pen demo-blockui by mamoru2110 (@mamoru2110) on CodePen.

メッセージ等は、変更できるようです。

参考文献

jQuery BlockUI Plugin