Movable Type 備忘録
半透明レイヤーでページブロックしてみる(blockUI)
- Prev Page: jQueryでフェードするメッセージ表示してみる
- Next Page: 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 による通信を開始しています。
ざっとサンプルの説明をしましたが、blockUI プラグインの機能はもっとたくさんあって、またどれも分かりやすく説明されてますので、問題なく使えると思います。
jQuery BlockUI Plugin
Trackback Pings(0)
No trackbacks found.
Comments(0)
No comments found.




Post a Comment