ライトボックスみたいなお洒落なアラートを出してカスタマイズもできるjQuery uLightBox plugin

ライトボックスみたいなお洒落なアラートを表示させることができるjQuery uLightBox pluginを使ってみました。オプションでカスタマイズも色々できるので面白いですね。背景を替えたりフェードで表示させたり、クリック時の挙動などもコールバック関数を使ってカスタマイズすることができます。以下、簡単な使い方です。

[ads_center]

使い方

こちらのサイトからプラグインをダウンロードできます。

jQuery uLightBox plugin

jQuery、jQuery UIとダウンロードしたファイルを読み込みます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.ulightbox.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.ulightbox.css" />

HTMLでボタンを表示させます。

<input id="sample" type="button" value="sample" />

表示させるアラートを設定していきます。

<script type="text/javascript">
    $(document).ready(function() {
        uLightBox.init({
            override:true,
            background: 'white',
            centerOnResize: true,
            fade: true
        });
        $('#sample').click(function() {
            alert('sampleです');
        });
    });
</script>

オプションのbackgroundを変更すると背景色を変更できます。white、black、noneが選べます。centerOnResizeはtrueを指定することでディスプレイサイズを変更してもアラートが常に中央に配置されます。

サンプルで使っているオプションはこんな感じです。

<script type="text/javascript">
$(document).ready(function() {
    uLightBox.init({
        override:true,
        background: 'white',
        centerOnResize: true,
        fade: true
    });
    $('#sample1').click(function() {
        alert('sample1');
    });
    $('#sample2').click(function() {
        uLightBox.alert({
            width: '500px',
            title: 'sample2',
            rightButtons: ['R1', 'R2', 'R3'],
            leftButtons: ['L1', 'L2', 'Close'],
            opened: function() {
                $('<span />').html("右のボタンはR1, R2, R3です。<br />左のボタンはClose, L1, L2です。<br />").appendTo('#lbContent');
            },
            onClick: function(button) {
                if (button != 'Close') {
                    $('#uLightBox #lbContent').append('<br />クリックした値は '+ button + 'です');
                }
                console.log(button);
            }
        });
    });
});
</script>

rightButtons、leftButtonsは指定した数だけアラート内のボタンを表示させることができます。openedはアラートが開いた時の、onClickはアラート内のボタンをクリックした時のコールバックを指定することができます。

こんな感じで、何かアラートを表示させたいといった時には便利なプラグインですね。