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. no-image

    JavaScript

    スタイリッシュなスライダーを実装できるjQueryプラグイン「bsc-slider」

    bsc-sliderは、シンプルでスタイリッシュなスライダーを実装する…

  2. Random Quote Machine

    JavaScript

    ランダムにテキスト(クオート)を表示させる「Random Quote Machine」

    Random Quote Machineは、設定したデータのなかからラ…

  3. Dropit

    JavaScript

    シンプルでフレキシブルなドロップダウンメニュー「Dropit」

    Dropitはシンプルでフレキシブルなドロップダウンメニューを実装でき…

  4. Line Maker

    JavaScript

    アニメーションするラインを実装できる「Line Maker」

    Line Makerは、いろんなアニメーションをするラインを実装するこ…

  5. imgViewer2

    JavaScript

    画像のズームとパン機能を備えたjQueryプラグイン「imgViewer2」

    imgViewer2は画像のズームとパン機能を備えたjQueryプラグ…

  6. jQuery Page

    JavaScript

    モバイルに最適なスライドやフリップを実装できる「jQuery Page」

    jQuery Pageは、スマホなどモバイルに最適なスライドやフリップ…

コメント

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

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

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP