一定時間だけ表示されるフラッシュメッセージ（トースト）をnotieでお手軽実装

Webサービスでは処理が成功したタイミング、失敗したタイミングでユーザにメッセージを表示したいことは結構あります

javascriptにも標準でalert()と言うメソッドがあるんですが、あまりにダサい

そしてそっけないのです

さらにokボタンを押さないと消えません

そんな時に一瞬だけ表示されて、自動的に消えるメッセージがあれば便利です

Androidアプリ開発者にはおなじみのトーストって言うやつです

デモ

百聞は一見に如かず

どんな見た目、動作なのかはこちらのデモで確認してください

そんな時に簡単に実装できるJavascriptライブラリがあります。notieです

数あるアラートサービスの中からnotieを選んだ理由は以下の通りです

githubページからZipファイルをダウンロード

緑のボタン「Clone or download」をクリックしてダウンロードを選択

解凍してdistフォルダ内にある「notie.min.css」と「notie.min.js」を自分のウェブサイトにアップロード

<head>
    <link rel="stylesheet" type="text/css" href="<ファイルをアップロードしたディレクトリ>/notie.min.css">
</head>

<body>
    <script src="<ファイルをアップロードしたディレクトリ>/notie.min.js"></script>
</body>

notie.alert({ type: 1, text: '成功！'});

typeとして指定する数値を変えることで、アラートの背景色を変更できる

１→緑(success)
２→黄(warning)
３→赤(error)
４→青(info)
５→灰(neutral)

notie.alert({ type: 1, text: '成功！'});

クリックしない限り閉じないようにする。デフォルトはオフ(false)

notie.alert({text: '成功！',stay: true});

表示時間（単位は秒）。デフォルトは３、最小は１

notie.alert({ text: '成功！',time: 5});

トーストメッセージを表示する位置。上(top)か下(bottom)かの２択。デフォルトは上（top）

notie.alert({ text: '成功！', position: 'bottom'});

まだ、コメントがありません