AdminLTE 3を使用したトースト通知の実装方法

2024-02-10 06:21 AdminLTE トースト通知 jQuery
  1. 必要なファイルの読み込み: AdminLTE 3のトースト通知を使用するには、まず必要なファイルを読み込む必要があります。以下のCDNリンクを使用して、必要なCSSとJavaScriptファイルを読み込んでください。

CSS:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css">

JavaScript:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/adminlte.min.js"></script>
  1. トースト通知の表示: AdminLTE 3では、$(document).Toastsメソッドを使用してトースト通知を表示できます。以下は基本的な使用例です。

上記のコードでは、タイトルと本文を指定し、アイコンと背景色を設定しています。autohideパラメータをtrueに設定すると、トースト通知が自動的に非表示になるようになります。delayパラメータは、トースト通知が表示される時間（ミリ秒）を指定します。

  1. トースト通知の種類: AdminLTE 3では、さまざまなトースト通知の種類を使用することができます。以下は一部の例です。

成功通知:

$(document).Toasts('create', {
  title: '成功',
  body: '操作が成功しました',
  icon: 'fas fa-check',
  class: 'bg-success',
  autohide: true,
  delay: 5000
});

警告通知:

$(document).Toasts('create', {
  title: '警告',
  body: '操作に問題があります',
  icon: 'fas fa-exclamation-triangle',
  class: 'bg-warning',
  autohide: true,
  delay: 5000
});

エラー通知:

$(document).Toasts('create', {
  title: 'エラー',
  body: '操作が失敗しました',
  icon: 'fas fa-times',
  class: 'bg-danger',
  autohide: true,
  delay: 5000
});
  1. トースト通知のイベント: AdminLTE 3では、トースト通知が表示されたり非表示になったりしたときに発生するイベントをキャッチすることもできます。以下は、トースト通知が非表示になったときにイベントをキャッチする例です。
$(document).on('hidden.toasts', function () {
  // トースト通知が非表示になったときの処理
});