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

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

2013年上半期jQueryプラグインまとめ当ブログで今まで紹介したjQueryプラグイン25選のまとめ 2011/09 – 2012/03前のページ

iPhoneアプリ「Resize Photo」を使って撮った画像を好きなサイズにリサイズする次のページ

関連記事

  1. Switchery

    JavaScript

    チェックボックスをiOS7のようなスタイルにしてくれるjQueryプラグイン「Switchery」

    SwitcheryというjQueryプラグインを使えば、チェックボック…

  2. waslidemenu
  3. JavaScript

    ニュースやお知らせなどに使えるティッカー「jQuery WebTicker」

    ニュースやお知らせなんかに使えるティッカー「jQuery WebTic…

  4. CSS Jquery Pie Countdown Timer

    JavaScript

    グラデーションが美しい円形カウントダウン「CSS Jquery Pie Countdown Time…

    円形によるカウントダウンのタイマーを実装する「CSS Jquery P…

  5. JavaScript

    jQueryプラグイン・2014年上半期56選まとめ

    気づいたら2014年も上半期が終わってしまいましたね。そんなわけで、2…

コメント

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

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

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP