あかつきのお宿

javascriptのアラート画面をかっこよく見せるためのプラグインっていろいろありますよね。

今回はそのうちの一つである、jQuery uLightBox Pluginってやつを使って、良い感じにアラート画面を見せれるようにしたいと思います。

何で第二弾なのかっていうと、以前、まあデザインを一新する前ってことですけど、このあかつきのお宿では別のプラグインを使ってアラート画面を作っていたからですね。そのときのプラグインを紹介した記事はこれです。

乗り換えた理由は特にないです。一新するんだからアラート画面も変えてみようかっていう、まあその程度の話っす。

まずはダウンロード

イワズモガナ。

上記のリンク先に行ってまずはファイルをダウンロードしてきましょう。さあ落とそう。やれ落とそう。一流の落語家が話を終わらせるときのようにスマートに落とそう。

落として来たら、その中のjquery.ulightbox.jsとjquery.ulightbox.cssを読み込める状態にしましょう。もちろん、jqueryが使える状態にしてねん。

あとはレンジでチンしておしまいだ！！

……ってわけにはいかないですね、はい。

javascriptの書き方

例として、うちで使ってるソースをそのまま書いてみましょう。あかつきのお宿の場合は、不開の間へのリンクを押すとうざい感じのアラート画面が出て来ます。

$(function(){
    uLightBox.init({
        override:false,
        background: 'black',
        centerOnResize: true,
      fade: true
    });

    $('.forbid_link').click(function(){
        uLightBox.alert({
            title: 'まあまずは押してみるよね',
            text: 'でも残念。不開の間への直リンはないんです。'
        });
        return false;
    });
}

こんな感じですね。背景は黒と白の二つを設定できるみたいですね。うちの場合は黒くしてます。

.forbid_linkってのは不開の間へのリンクが書いてあるaタグにつけてるクラスなので、上のコードを丸コピしたのに動かないって人はそこ注意ね。イワズモガナだと思うけど。

ボタンをカスタマイズする

上記の場合だと、OKボタンがあるだけですが、他のボタンを用意することももちろんできる。

例えば『Close』ボタンを画面の左下につけたい場合はこう。

uLightBox.alert({
    title: 'まあまずは押してみるよね',
    leftButtons: ['Close'],//Closeボタンの実装
    text: 'でも残念。不開の間への直リンはないんです。'
});
return false;

今OKってなってるところを別のボタンにしたい場合はこんな感じ。

uLightBox.alert({
    title: '不開の間に入ろうとした？',
    text: 'もし入ろうとしたのなら結構いい発想してると思います。要はそんな感じです。せっかくここまで来たんだし、ヒント要る？',
    rightButtons: ['No thank you', 'Please give me'],//右側のボタン
    leftButtons: ['Close'],//左側のボタン
    onClick: function(button) {
        if(button == 'No thank you') {
            $('#lbContent').append('
それは残念 ＞＜まあ気が向いたらまたやってみて下さいな☆
');          
        } else {
            $('#lbContent').append('
ヒント1：僕の誕生日は11月18日です。生まれた年は1982年です。ヒント2：31とか443とか9967みたいな数のことを何て言う？
');          
        }
    }
});

ようは、左側に置きたいボタンは『leftButtons』で、右側に置きたいボタンは『rightButtons』で指定できるってことですね。

jquery.ulightbox.jsでは、ボタンの名前が『Close』『OK』『Cancel』あたりの場合には自動で何かしらのアクションが起きるようになっているみたいですが、自分で任意の名前にする場合には押したところで何のアクションも起きないので、自分でイベントを追加しないといけないみたいです。

上の場合は『No thank you』と『Please give me』ですね。buttonっていう変数にその名前が入って来るので、それで判定する感じす。

ちなみに上の例も実際にあかつきのお宿で使ってるコードそのままです。もし暇な人は、↓このURLでも叩いてみてください。最初のときよりももっとうざい感じのアラートが出てきて、ボタンがいくつか増えてます。


http://norm-nois.com/novels/short/aaa


もし暇だったらで良いからね？　人生の貴重な数十秒を無駄にしたくないのであれば、無理にアクセスしない方が良いと思う。
（※すみません。サイトのデザイン変更に伴い、今は何もアラート画面が出ないです。2013/11/27追記）
　
ついでに、不開の間には今、ほんっとうに何のコンテンツもないから、上のアラートを見たとしても、その後入ろうとチャレンジするのは止めた方が良いと思う。暇で暇でしょうがない、ボックスティッシュの中身を一枚一枚取り出してそれをまた元に戻すことくらいしか暇つぶしになるようなものがないってときに「まあティッシュよりはこっちの方が……」って思えたら見てみるくらいの方が良いと思う。




基本的な使い方はこんな感じです。jQuery UIとかを組み合わせるともうちょっといろいろできるっぽいんですけど、僕は使ってないのでその説明は省略です。


あ、そうそう。

イワズモガナって、カタカナで書いてるから何かの外来語のようにも見えるけど『言わずもがな』のことだからね。言わずもがなってのは、言うまでもない、みたいな意味です。喜界島さん（生徒会会計の子。好きなものはお金）が何も言わずって意味ではないです。

まあこんなことは、イワズモガナだと思いますけど。