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

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

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

パターンA

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

デモ

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

HTML(PHP)

ではHTML(php)です。

[php]
<?php
if (!empty($_POST['post'])) {
$printNotifyMessage = 'あなたのメッセージが送信されました！';
}
?>


（略）

<?php
if (!empty($printNotifyMessage)) {
echo '

'."\n";
unset($printNotifyMessage);
}
?>

[/php]

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

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

CSS

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

[css]
#notifyMessage {
position: absolute;
top: 0;
padding: 25px 0 25px 1em;
margin-top: -100px;
border-bottom: 4px solid #008000;
width: 100%;
background-color: rgba(159,242,2, 0.9);
color: #ffffff;
font-size: 13px;
font-weight: bold;
}
[/css]

JS

最後にJavaScript部分。

[js]

[/js]

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

デモ

パターンB

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

デモ

HTML(PHP)

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

[php]
<?php
if (!empty($_POST['post'])) {
$printNotifyMessage = 'あなたのツイートが送信されました！';
}
?>


（略）

<?php
if (!empty($printNotifyMessage)) {
echo '

'."\n";
$printNotifyMessage = "";
}
?>

サンプル1

[/php]

CSS

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

[css]
#notifyMessage{
display: none;
position: absolute;
top: 45px;
left:50%;
margin-left: -250px;
padding: 15px 0;
width: 500px;
text-align: center;
font-size: 13px;
color: #fff;
background-color: rgba(51,51,51, 0.9);
-webkit-border-radius: 5px; /* Safari Chrome */
-moz-border-radius: 5px; /* Firefox */
border-radius: 5px; /* Firefox */
}
[/css]

JS

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

[js]

[/js]

プラグイン化

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

パターンA用

[html]


[/html]

パターンB用

[html]


[/html]

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

デモ

プラグイン版デモはこちら。

デモ：パターンA

デモ：パターンB

ダウンロード

ダウンロードはコチラから。

DL：パターンA

DL：パターンB

-Javascript,jQuery
-javascript, jquery, js, Twitter, ツイッター