JavaScript

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

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

[ads_center]

使い方

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

jQuery uLightBox plugin 01

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はアラート内のボタンをクリックした時のコールバックを指定することができます。

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

関連記事

  1. A simple DIY responsive image slideshow
  2. Complexify

    JavaScript

    パスワードの強さを視覚的にフィードバックしてくれる「Complexify」

    Complexifyはユーザーが入力したパスワードの強さを視覚的にフィ…

  3. JS Form Validator

    JavaScript

    HTMLフォームの検証を簡単に実装できる「JS Form Validator」

    JS Form ValidatorはHTMLフォームの検証を簡単に実装…

  4. Enllax.js

    JavaScript

    軽量で簡単なパララックスを実装できるjQueryプラグイン「Enllax.js」

    Enllax.jsは軽量で使い方も簡単なパララックスエフェクトを実装す…

  5. FakeLoader.js

    JavaScript

    フルスクリーンでカッコいいローディングアニメーション・FakeLoader.js

    FakeLoader.jsはフルスクリーンでカッコいいローディングアニ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP