半透明のレイヤーでページや要素をブロックする「jQuery BlockUI Plugin」を試してみた

2008/10/21

カテゴリ：: jQuery plugin紹介

タグ：: jquery; javascript; plugin; プラグイン

半透明のレイヤーでページや要素をブロックする「jQuery BlockUI Plugin」

jQueryのプラグインとかを見ていた時に、
なにやら面白そうなプラグインを発見。

「jQuery BlockUI Plugin」

画面全体やもしくは要素に対して、
半透明のレイヤーを表示させてブロックするプラグインだ。

使う機会はでてくるかわからないけど、
とりあえず使って試したくなったので、
勉強のためにメモエントリーしておく。

サンプルデモ

サイトと同じのを書いておきます。
若干僕のコメントも入っています。

それぞれRUNを押すと動作します。

Login Form

jQuery('#demo1').click(function() {
    jQuery.blockUI({ message: $('#loginForm') });
    //↓最後の数字が消えるまでの時間（1000=１秒）
    setTimeout(jQuery.unblockUI, 2000);
});

iPhoto (ish)

jQuery('#demo2').click(function() {
    jQuery.blockUI({ css: {
        border: 'none',
        padding: '15px',
        backgroundColor: '#000',
        '-webkit-border-radius': '10px',
        '-moz-border-radius': '10px',
        opacity: '.5',
        color: '#fff'
    } });
    
    setTimeout(jQuery.unblockUI, 2000);
});

Blue Overlay

jQuery('#demo3').click(function() {
    jQuery.blockUI({ overlayCSS: { backgroundColor: '#00f' } });
    
    setTimeout(jQuery.unblockUI, 2000);
});

Tall Content

jQuery('#demo4').click(function() {
    jQuery.blockUI({ 
        message: jQuery('#tallContent'), 
        css: { top: '20%' } 
    });
    
    setTimeout(jQuery.unblockUI, 2000);
});

Image Box

jQuery('#demo5').click(function() {
    jQuery.blockUI({ 
		//↓HTML中にimgをdisplay:noneで入れておく必要がある
        message: jQuery('img#displayBox'), 
        css: { 
            //↓画像の横の大きさを指定
			top:  (jQuery(window).height() - 300) /2 + 'px',
            //↓画像の縦の大きさを指定
			left: (jQuery(window).width() - 225) /2 + 'px',
            //↓これも画像の横の大きさを指定
			width: '300px'
        } 
    });
    
    setTimeout(jQuery.unblockUI, 2000);
});

Non-centered message

jQuery('#demo6').click(function() {
    jQuery.blockUI({ 
        centerY: 0,
        css: { top: '10px', left: '', right: '10px' }
    });
    
    setTimeout(jQuery.unblockUI, 2000);
});

Blocking without a message(pass null as message)

jQuery('#demo7').click(function() {
    jQuery.blockUI({ message: null });
    
    setTimeout(jQuery.unblockUI, 2000);
});

onUnblock callback
(useful when using fadeOut option
as it is invoked when all
the blocking elements have been removed)

jQuery('#demo8').click(function() {
    jQuery.blockUI();
    
    setTimeout(function() {
        jQuery.unblockUI({
            onUnblock: function(){ alert('onUnblock'); }
        });
    }, 2000);
});

使用したHTML

<div id="loginForm" style="display:none">
<p><label>Username:</label><input type="text" name="demo1" /></p>
<p><label>Password:</label><input type="text" name="demo1" /></p>
</div>

<div id="tallContent" style="display:none">
<h2>Why</h2>
<h2>am</h2>
<h2>I</h2>
<h2>so</h2>
<h2>darn</h2>
<h2>tall?</h2>
</div>

↓imgを指定（srcは画像を指定）
<img id="displayBox" src=".jpg" width="300" height="225" style="display:none" />

基本

最初はぱっとみて基本の形がわからなかったが、
下記のスクリプトが基本のようだ。

jQuery('#demo9').click(function() {
    jQuery.blockUI({});
    setTimeout(jQuery.unblockUI, 2000);
});

これをクリックでじゃなくて、
ページの読み込み時とか、クリック時に毎回出るようにすると、
表示としては邪魔かもしれないけど、Ajax読み込んでいるみたいになって、
かっこよくなるのではないだろうか？

参考サイト：

jQuery BlockUI Plugin (v2)