JavaScriptのトースト(通知)用ライブラリ「iziToast.js」の利用方法
2026/09/02
システム構築の際、エラー表示をJavaScriptのアラートではなくトースト(通知)用ライブラリ「iziToast.js」で実装してほしいとの指示があった。使ったことの無いライブラリだったためサンプル及び利用方法をメモ。
サンプル
https://taitan916.info/sample/iziToast.js/
ボタンをクリックすると右上にトーストが表示される筈。
iziToast.js
公式サイト
https://marcelodolza.github.io/iziToast/
Github
https://github.com/marcelodolza/iziToast
CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css">
利用方法
ソースコード
$(function() {
$(`button`).on(`click`, function(){
iziToast.info({
message: 'テストメッセージ',
position: 'topRight',
});
});
});
基本的な使い方
iziToast.【info / success / warning / error】({
message: 'メッセージ内容',
position: 'topRight', //表示位置。topLeft / topRight / bottomLeft / bottomRight
timeout: 5000, //表示するミリ秒数。false指定すると自動的には非表示にならない
});
「info / success / warning / error」部分でトーストの色等が変わる。その他のオプション項目については公式サイトを参照すること。
その他
その他のトースト系ライブラリの記事は以下の通り。
関連記事
-
-
Composer無し&ファイル1枚でPHPのエラーメッセージ画面をリッチにするライブラリ「PHP Error」の利用方法
先日PHPのエラーメッセージを見やすくするwhoopsの利用方法をメモしたが導入 ...
-
-
PHPでエラーメッセージを見やすくするwhoopsの利用方法
PHPのエラーメッセージが見づらい。これはこういうもの、と諦めていたがCodei ...
-
-
JavaScriptにてテキストボックスにサジェスト機能を実装できる「autoComplete.js」の利用方法
以前にjQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する ...
-
-
パスワードの強度を判定できる「zxcvbn」ライブラリの使用方法
アカウントを作成するようなページで偶にパスワードの強度を判定してメーターで表示さ ...
-
-
PHPのバリエーションライブラリ「Valitron」の導入及び利用方法
フォーム等の入力内容チェックをPHP側で行う際、現状は素のPHPで書いているけど ...