Eyecatch jQuery

Javascript,jQuery

Twitter風にページ上部にメッセージを通知するスクリプトを2種、jQueryで組んでみた

2013/06/05

ツイッター風の通知バーを作りたくなり、jQueryで組んでみましたので、公開。
コード自体はほんの少しなんですが、なかなかうまく行かず結構時間が掛かってしまった…。

うまく行かなかった理由もよく分からんまま解決できたってのがなんとも言えないところです(^_^;)

パターンA

まずはサンプルをどうそ。
昔のツイッター風の通知です。

デモ

サンプルA

サンプルURLのファイル拡張子が php となっていますが、表示させたいメッセージをセッションで受け取るなどできるように、php としています。

HTML(PHP)

ではHTML(php)です。

phpの使用どころですが、先頭の方で、phpのメッセージ変数にメッセージをセットして、メッセージ表示部でメッセージがセットされているかあるかどうかの判定をしているだけです。

画面自体は、送信ボタンがあるだけです。

CSS

次にCSS。
表示するメッセージの装飾と位置調整をしています。

JS

最後にJavaScript部分。

マイナス座標のメッセージブロックを、移動させ、1.5秒待ち、スライドアップさせています。
さほど難しいことはしていませんが、それっぽいですね。

デモ

サンプルA

パターンB

では、調子に乗って、現状のTwitterのような通知バーを出してみます。

デモ

サンプルB

HTML(PHP)

では、同じようにHTML(php)です。
パターンAと基本的に同じです。

CSS

CSSです。
デフォルトで非表示させる、display: none; があるだけで、後は位置調整と装飾用です。

JS

最後にJavaScript。
パターンAと同じぐらいのコード量です。
こちらは、メッセージボックスをフェードイン、フェードアウトさせています。

デモ

サンプルB

プラグイン化

個人的に使いたくなったので、プラグイン化もしてみました。
使い方は以下の感じで、HTMLのヘッダ部でオプションを指定します。

パターンA用

パターンB用

HTML及び、CSSはそのままでOKです。
詳しくは、ダウンロード出来るようにしておきますので、そちらを御覧ください。

デモ

プラグイン版デモはこちら。
デモ:パターンA
デモ:パターンB

ダウンロード

ダウンロードはコチラから。
DL:パターンA
DL:パターンB

-Javascript,jQuery
-, , , ,