ajaxを使ってデータの更新や削除をした時に、わざわざ画面遷移したりアラートを出したりしたくない!
そんな方にお勧めなのがNotyfです。
導入方法
ダウンロード
GitHubにアクセスしてzipファイルをダウンロードしてください。
zipファイルを展開して、notyf.min.cssとnotyf.min.jsを適当なディレクトリにコピーしてください。
コード
まずプラグインとCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="notyf.min.css"> <script src="notyf.min.js" type="text/javascript"></script>
次に通知を表示するためのボタンを配置します。
alertボタンでalert通知が、successでsuccess通知が表示されます。
<input type="button" onclick="show_alert();" value="alert"> <input type="button" onclick="show_success();" value="success">
ボタンが押されたとき通知を表示するスクリプトを記述します。
//Notyfを読み込む var notyf = new Notyf(); // alertを通知する function show_alert(){ notyf.alert('alertですよ!'); } //successを通知する function show_success(){ notyf.confirm('successですよ!'); }
表示速度の変更
通知の表示時間もミリ秒単位で変更できます。
var notyf = new Notyf({ delay:10000 // 10秒間表示する });
通知のアイコンの変更
通知のアイコンも変更できます。
まず、アイコンを表示するためにFont Awesomeを読み込みます。
<!-- font awesomeのCDNを読み込む --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
次に、各通知のアイコンを設定します。
var notyf = new Notyf({ alertIcon: 'fa fa-map-o', //alertのアイコン confirmIcon: 'fa fa-comment' //successのアイコン })