Movable Type 備忘録

 

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

こんにちわ^^

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

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

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

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

ディレクトリ構成

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

カスタマイズ

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

  2. テンプレートを修正します。
    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>
    
    
  3. 上記サンプルのスクリプトを以下に記します。

    <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 による通信を開始しています。

ざっとサンプルの説明をしましたが、blockUI プラグインの機能はもっとたくさんあって、またどれも分かりやすく説明されてますので、問題なく使えると思います。
jQuery BlockUI Plugin

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

コメント用フィード