Symfoware

Symfowareについての考察blog

jQueryで処理完了時、画面上部にメッセージ(notification)を表示する

登録ボタンを押した後、画面上部に「完了しました」という通知を表示したいケースがあります。

調べてみると、便利なjQueryプラグインがいくつか見つかります。

noty
notify
MiniJS Notification

簡単な通知が行いたいだけなのに、プラグイン入れるのもなーと思い、
自分で作ってみました。


コード



position:absolute
top:0
left:0
width:100%
を指定して、常に一番上に表示されるdivを作成。
bodyに挿入してメッセージを表示します。


  1. $(function() {
  2.     
  3.     $("#notice").on('click', function() {
  4.         // 一旦divを削除
  5.         $('#__info-message').remove();
  6.         // 通知領域を作成
  7.         var divInfo$ = $('<div></div>')
  8.             .attr('id', '__info-message')
  9.             .css({
  10.                 'position' : 'absolute',
  11.                 'left' : 0,
  12.                 'width' : '100%',
  13.                 'z-index' : 100,
  14.                 'top' : 0,
  15.                 'text-align' : 'center',
  16.                 'opacity' : 0.8,
  17.                 'background-color' : '#eee',
  18.                 'font-size' : 'large'
  19.             });
  20.         // 作成したメッセージ領域を表示
  21.         divInfo$.html('<div style="padding:20px 15px;">完了しました!</div>');
  22.         $('body').prepend(divInfo$);
  23.         
  24.         // 1秒そのままにした後、slideUpして閉じる
  25.         divInfo$.delay(1000).slideUp('slow');
  26.         
  27.     });
  28. });






デモ



いい感じに動いてくれました。
デモ


[広告 ] VPS
関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2014/11/01(土) 14:20:45|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<cssで画像の一部を切り抜き、jQueryで拡大・縮小できるようにする | ホーム | Chrome拡張のパッケージングとイントラネットワーク内でのインストール>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1518-09df0455
この記事にトラックバックする(FC2ブログユーザー)