読者です 読者をやめる 読者になる 読者になる

コピペコードで快適生活

明日使えるソースを自分のために

Backlog風のベルト型通知UI

Javascript

Backlogの課題更新時に表示されるベルト型の通知UI。
あれいいなって思って実装してみた。
Ajaxで更新処理したあとの通知用に使っていこう。

/*
 * Backlog風のベルト型通知UI
 */
function beltNotice(text, type) {
  var bg_color = "#468847";
  if (type == "alert") {
    bg_color = "#b94a48";
  }

  var css = {
    "background-color": bg_color,
    "color": "#FFF",
    "display": "none",
    "font-size": "1.2em",
    "font-weight": "bold",
    "padding": "10px",
    "position": "fixed",
    "text-align": "center",
    "top": "200px",
    "width": window.parent.screen.width + "px",
  }

  var $belt = $("<div></div>", {
    css: css
  });
  $belt.text(text);

  $("body").append($belt);
  $belt.fadeIn("slow");
  setTimeout( function() {
    $belt.fadeOut("slow");
  }, 3000 );
}