jQuery不要でも簡単にお知らせ通知を作れるプラグイン！「Notyf」

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ですよ！');
}

[btn class=”rich_pink”]デモ確認[/btn]

表示速度の変更

通知の表示時間もミリ秒単位で変更できます。

var notyf = new Notyf({
    delay:10000  // 10秒間表示する
});

[btn class=”rich_pink”]デモ確認[/btn]

通知のアイコンの変更

通知のアイコンも変更できます。

まず、アイコンを表示するために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のアイコン
})

[btn class=”rich_pink”]デモ確認[/btn]