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