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. chalk-animation

    JavaScript

    カラフルなアニメーションを実装できる「chalk-animation」

    chalk-animationはカラフルなアニメーションによるテキスト…

  2. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

  3. Tendina

    JavaScript

    簡単で素早くドロップダウンメニューを実装できるjQueryプラグイン「Tendina」

    TendinaというjQueryプラグインを使えば、とても簡単で素早く…

  4. no-image

    JavaScript

    背景にSVGによるライン(線)をランダムで生成する「ckLine.js」

    ckLine.jsは背景にSVGによるライン(線)をランダムで生成する…

  5. JavaScript

    jQuery Backstretchを使えば超簡単にブラウザサイズに合った背景画像を表示できる

    背景画像をブラウザのサイズに合わせて表示できるプラグイン「jQuery…

  6. Slideout.js

    JavaScript

    軽量でタッチスライド対応のサイドメニュー・Slideout.js

    Slideout.jsは軽量でスマフォでのタッチスライドに対応したサイ…

コメント

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

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

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP