今までjQueryは使っていましたが、jQueryプラグインは作ったことはありませんでした。（正確にはありましたが、受注したWebサイトに組み込んだだけでした。）

なので、今回オリジナルのものを作って、初めての配布をしようと思いました。

「LimitBox」です。ダウンロードは以下から。

jquery.limitbox.jsダウンロード

動作のデモは以下です。表示して少し待つと右下にメッセージが表示され、更に待つと1分以内に表示が切り替わります。

LimitBoxデモ

それほど難しいことをするものではないですが、ちょっと期間限定のメッセージを表示したいなどという時に使えるかと思います。

使用方法

以下の様なJavaScriptコードをHTMLのどこかに追加します。

<script type="text/javascript">
$(function() {
    $('body').limitbox({
        before:     '設定時間前のテキスト',
        after:      '設定時間後のテキスト',
        mode:       'bottom-right',
        x:          50,
        y:          50,
        year:       2015,
        month:      8,
        date:       22,
        hour:       14,
        minute:     30,
        fadeintime: 1.2
    });
});
</script>

全てこのスクリプト内で設定するので、上記以外にHTMLコードを追加する必要はありません。

オプション

オプションは以下になります。

• id – ウインドウのID
• before – 指定時間前に表示するテキスト
• after – 指定時間後に表示するテキスト
• mode – ウインドウ位置の基準。「top-left」「top-right」「bottom-left」「bottom-right」のいずれか。
• x – modeで設定したleftまたはrightからのピクセル数
• y – modeで設定したtopまたはbottomからのピクセル数
• year – 表示切替する年
• month – 表示切替する月
• date – 表示切替する日
• hour – 表示切替する時
• minute – 表示切替する分
• fadeintime – 最初の表示の遅延時間（秒）

さいごに

このjQueryプラグインは、つい最近の制作において作ったものを少し機能縮小してプラグイン化しています。

実際には、
１）開始時間と終了時間を設定
２）開始時間前は「あと〜時間」というメッセージ
３）開始時間になったら専用のメッセージ
４）終了時間になったら「終了しました」というメッセージ
というように、３段階でメッセージが変わるものです。

最初はこれをそのままプラグイン化しようかと思ったのですが、オプションが増えすぎるので断念しました。

もしそちらのバージョンをご希望の方はContactページよりご連絡ください。