一瞬だけ表示されるメッセージ(トースト)をnotieでお手軽実装

Webサービスでは処理が成功したタイミング、失敗したタイミングでユーザにメッセージを表示したいことは結構あります
javascriptにも標準でalert()と言うメソッドがあるんですが、あまりにダサい
そしてそっけないのです
さらにokボタンを押さないと消えません
そんな時に一瞬だけ表示されて、自動的に消えるメッセージがあれば便利です
Androidアプリ開発者にはおなじみのトーストって言うやつです
デモ
百聞は一見に如かず
どんな見た目、動作なのかはこちらのデモで確認してください
notie
そんな時に簡単に実装できるJavascriptライブラリがあります。notieです
数あるアラートサービスの中からnotieを選んだ理由は以下の通りです
- カラフルな表示で見た目が良い
- レスポンシブ対応済み
- 実装が簡単
実装の仕方
1.ファイルのアップロード
githubページからZipファイルをダウンロード
緑のボタン「Clone or download」をクリックしてダウンロードを選択
解凍してdistフォルダ内にある「notie.min.css」と「notie.min.js」を自分のウェブサイトにアップロード
2.アップロードしたファイルを読みこむ
CSSファイルの読み込み
<head>
<link rel="stylesheet" type="text/css" href="<ファイルをアップロードしたディレクトリ>/notie.min.css">
</head>
JSファイルの読み込み
<body>
<script src="<ファイルをアップロードしたディレクトリ>/notie.min.js"></script>
</body>
3.呼び出し
notie.alert({ type: 1, text: '成功!'});
オプション
type
typeとして指定する数値を変えることで、アラートの背景色を変更できる
1→緑(success)
2→黄(warning)
3→赤(error)
4→青(info)
5→灰(neutral)
notie.alert({ type: 1, text: '成功!'});
stay
クリックしない限り閉じないようにする。デフォルトはオフ(false)
notie.alert({text: '成功!',stay: true});
time
表示時間(単位は秒)。デフォルトは3、最小は1
notie.alert({ text: '成功!',time: 5});
position
トーストメッセージを表示する位置。上(top)か下(bottom)かの2択。デフォルトは上(top)
notie.alert({ text: '成功!', position: 'bottom'});
ディスカッション
コメント一覧
まだ、コメントがありません