Movable Type 備忘録

半透明レイヤーでページブロックしてみる(blockUI)

Jul022007
Author: bzbell
Categories: Customize
Tags: Customize, JavaScript, jQuery

こんにちわ^^

やっと、Prototype -> jQuery への移行がほぼ完了しました。
すべてのページに jQuery を使ってるわけではないのですが、メインページやエントリページなど主なページは jQuery に移行したので、ぼちぼちやっていきますよ (;￣∇￣A

さて、今回は半透明レイヤーでページロックについてです。
半透明レイヤーで･･･ってのは、カンタンにいうと Lightbox などで背景に半透明な膜!? みたいなのが表示されますね。アレです。

わたしのサイトでは、Ajax 化したコメント・プレビュー、投稿時にうっすらと白い半透明レイヤーでフォームをロックして、Ajax 完了後アンロックさせてみました。
ページロック・サンプル

半透明レイヤーでページまたは、任意のブロック要素をロック／アンロックするには、BlockUI Pluginを使用します。
使い方もカンタンで、Ajax で併用したり、ボタンクリックなどでロックしたりすることができます。

ディレクトリ構成

http://●●●.com/
|
+-- index.html               <-- 各自のトップページ
|
+-- js/
|    +-- jquery/
|    |    +-- plugins/
|    |    |    +-- jquery.blockUI.js <-- BlockUI プラグイン
|    |    |
|    |

カスタマイズ

まずプラグインを入手します。
Download and Supportから jquery.blockUI.js を頂いて、上記ディレクトリ構成のようにアップロードします。

テンプレートを修正します。
HTML ヘッダ(<head>～</head>)内に以下を追加します。

<script src="<$MTBlogURL$>js/jquery/jquery.js" type="text/javascript"></script>
<script src="<$MTBlogURL$>js/jquery/plugins/jquery.blockUI.js" type="text/javascript"></script>

上記サンプルのスクリプトを以下に記します。
```
<script type="text/javascript">
$().ajaxStop($.unblockUI);
$(document).ready(function() {
$('#pageDemo2').click(function() {
$.extend($.blockUI.defaults.overlayCSS, {backgroundColor: '#fef4f4'});
$.blockUI('<h1 style="font-size:98%;"><img src="<$MTBlogURL$>jquery/plugins/busy.gif" /> Just a moment...</h1>');
$.ajax({ url: '<$MTBlogURL$>jquery/plugins/wait.php?time=' + new Date().getTime() });
});
});
</script>
```
基本的には blockUI プラグインはブロック($.blockUI)／アンブロック($.unblockUI)で制御します。

赤い字の部分がボタンクリックにより、Ajax を行うための処理になります。
青い字の部分で Ajax 完了後にアンブロックさせています。
緑の字の部分は半透明レイヤーの背景色を設定しています。
カーキ色の部分でブロックさせて、その後 Ajax による通信を開始しています。