Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

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

こんにちわ^^

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

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

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

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

まずプラグインを入手します。
Download and Supportから jquery.blockUI.js を頂いて、上記ディレクトリ構成のようにアップロードします。
テンプレートを修正します。
HTML ヘッダ(<head>～</head>)内に以下を追加します。
1. <script src="<$MTBlogURL$>js/jquery/jquery.js" type="text/javascript"></script>
2. <script src="<$MTBlogURL$>js/jquery/plugins/jquery.blockUI.js" type="text/javascript"></script>
上記サンプルのスクリプトを以下に記します。
1. <script type="text/javascript">
2. $().ajaxStop($.unblockUI);
4. $(document).ready(function() {
5. $('#pageDemo2').click(function() {
6. $.extend($.blockUI.defaults.overlayCSS, {backgroundColor: '#fef4f4'});
7. $.blockUI('<h1 style="font-size:98%;"><img src="<$MTBlogURL$>jquery/plugins/busy.gif" /> Just a moment...</h1>');
8. $.ajax({ url: '<$MTBlogURL$>jquery/plugins/wait.php?time=' + new Date().getTime() });
9. });
10. });
11. </script>
基本的には blockUI プラグインはブロック($.blockUI)／アンブロック($.unblockUI)で制御します。

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