Twitter風にページ上部にメッセージを通知するスクリプトを2種、jQueryで組んでみた
2018/11/26
ツイッター風の通知バーを作りたくなり、jQueryで組んでみましたので、公開。
コード自体はほんの少しなんですが、なかなかうまく行かず結構時間が掛かってしまった…。
うまく行かなかった理由もよく分からんまま解決できたってのがなんとも言えないところです(^_^;)
パターンA
まずはサンプルをどうそ。
昔のツイッター風の通知です。
デモ
https://lightning-bolt.xyz/js/jquery.tgTwNotifyMessage/
サンプルURLのファイル拡張子が php となっていますが、表示させたいメッセージをセッションで受け取るなどできるように、php としています。
HTML(PHP)
ではHTML(php)です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?php if (!empty($_POST['post'])) { $printNotifyMessage = 'あなたのメッセージが送信されました！'; } ?> <!DOCTYPE html> <head> （略） </head> <body> <?php if (!empty($printNotifyMessage)) { echo '<div id="notifyMessage">' . $printNotifyMessage . '</div>'."\n"; unset($printNotifyMessage); } ?> <br /><br /> <br /><br /> <form method="post" name="send" action="index.php"> <input type="submit" name="post" value="サンプル１送信" id="postButton" class="size1" /> </form> </body> </html> |
phpの使用どころですが、先頭の方で、phpのメッセージ変数にメッセージをセットして、メッセージ表示部でメッセージがセットされているかあるかどうかの判定をしているだけです。
画面自体は、送信ボタンがあるだけです。
CSS
次にCSS。
表示するメッセージの装飾と位置調整をしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#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; } |
JS
最後にJavaScript部分。
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(function(){ $(document).ready(function() { $('#notifyMessage').stop().animate({'marginTop':'0'},750).delay(1500).slideUp(300); }); }); </script> |
マイナス座標のメッセージブロックを、移動させ、1.5秒待ち、スライドアップさせています。
さほど難しいことはしていませんが、それっぽいですね。
デモ
https://lightning-bolt.xyz/js/jquery.tgTwNotifyMessage/index.php
パターンB
では調子に乗って、現状のTwitterのような通知バーを出してみます。
デモ
https://lightning-bolt.xyz/js/jquery.tgTwNotifyMessage/index2.php
HTML(PHP)
では、同じようにHTML（php）です。
パターンAと基本的に同じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?php if (!empty($_POST['post'])) { $printNotifyMessage = 'あなたのツイートが送信されました！'; } ?> <!DOCTYPE html> <head> （略） <body> <?php if (!empty($printNotifyMessage)) { echo '<div id="notifyMessage">' . $printNotifyMessage . '</div>'."\n"; $printNotifyMessage = ""; } ?> <br /><br /> <br /><br /> <form method="post" name="send" action="index2.php"> <input type="submit" name="post" value="サンプル２送信" id="postButton" class="size1" /> </form> <br /><br /> <a href="./index.php">サンプル1</a> </body> </html> |
CSS
CSSです。
デフォルトで非表示させる、display: none; があるだけで、後は位置調整と装飾用です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#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 */ } |
JS
最後にJavaScript。
パターンAと同じぐらいのコード量です。
こちらは、メッセージボックスをフェードイン、フェードアウトさせています。
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(function () { $(document).ready(function() { $("#notifyMessage").stop().fadeIn(1200).delay(1500).fadeOut("slow"); }); }); </script> |
プラグイン化
個人的に使いたくなったので、プラグイン化もしてみました。
使い方は以下の感じで、HTMLのヘッダ部でオプションを指定します。
パターンA用
|
1 2 3 4 5 6 7 8 9 10 |
<script src="./js/jquery.tgTwNotifyMessage1.js"></script> <script type="text/javascript"> jQuery(function(){ $(this).tgTwNotifyMessage1({ selector : "#notifyMessage", // セレクタ delayTime : 1500, // メッセージ表示時間 slideUpTime : 300 // スライドアップ時間 }); }); </script> |
パターンB用
|
1 2 3 4 5 6 7 8 9 10 11 |
<script src="./js/jquery.tgTwNotifyMessage2.js"></script> <script type="text/javascript"> jQuery(function(){ $(this).tgTwNotifyMessage2({ selector : "#notifyMessage", // セレクタ delayTime : 1500, // メッセージ表示時間 fadeInTime : 1200, // フェードイン時間 fadeOutTime : 600 // フェードアウト時間 }); }); </script> |
HTML及び、CSSはそのままでOKです。
詳しくは、ダウンロード出来るようにしておきますので、そちらを御覧ください。
デモ
プラグイン版デモはこちら。
ダウンロード
ダウンロードはコチラから。