jQueryで通知するToastrの説明

らら
らら

はじめに

今回はjQueryプラグインToastrの使い方を。。。

自分の覚書を含めて・・・・

Toastrとは

jQueryで入力エラーなどの通知をポップアップで表示ができます。

info、success、error、warningですでに機能ごとに関数が用意されていて、アイコン、背景色がすでに準備されているので便利です。

ダウンロード＆設置

本家はこちら・・

https://codeseven.github.io/toastr/
HTML

Githubはこちら・・

https://github.com/CodeSeven/toastr
HTML

CDNはこちら。

//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js
//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css
HTML

htmlではこんな感じ

<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"/>
HTML

サーバーに入れる場合は、ダウンロードして

Toastr

解凍してbuildの中にあります。

Toastr

Toastr

設置方法

ここから本家から日本語で

// タイトルのないトーストを表示する
toastr.info('テスト表示')
JavaScript

その他のオプション

// タイトルなしの警告を表示する
toastr.warning('タイトルなしの警告')
JavaScript

Toastr

// タイトルありで成功の表示する
//第１引数：メッセージ、第２引数：タイトル
toastr.success('登録が完了しました。', '登録完了')
JavaScript

Toastr

// タイトルありのエラーを表示する
//第１引数：メッセージ、第２引数：タイトル
toastr.error('入力されたデータに誤りがあります', '入力エラー')
JavaScript

Toastr

// アニメーションを使用せずに現在表示をすぐに削除する
toastr.remove()
JavaScript
// アニメーションを使用して現在表示を削除する
toastr.clear()
JavaScript
// グローバルオプションを上書きする場合
//第１引数：メッセージ、第２引数：タイトル、第３引数：オプション
toastr.success('登録が完了しました。', '登録完了', {timeOut: 5000})
JavaScript

HTML 文字のエスケープ

タイトルとメッセージのHTML文字をエスケープしたい場合

toastr.options.escapeHtml = true;
JavaScript

閉じるボタン

必要に応じて閉じるボタンを有効にする

toastr.options.closeButton = true;
JavaScript

必要に応じて、閉じるボタンの HTML をオーバーライドします。

toastr.options.closeHtml = '';
JavaScript

CSS / LESSをオーバーライドすることもできます#toast-container .toast-close-button

必要に応じて、閉じるボタンがクリックされたときに非表示アニメーションをオーバーライドします (構成を非表示にフォールバックします)。

toastr.options.closeMethod = 'fadeOut';
toastr.options.closeDuration = 300;
toastr.options.closeEasing = 'swing';
JavaScript

表示シーケンス

最新のtoastrを下部に表示する (上部が既定)

toastr.options.newestOnTop = false;
JavaScript

コールバック

// Define a callback for when the toast is shown/hidden/clicked
toastr.options.onShown = function() { console.log('hello'); }
toastr.options.onHidden = function() { console.log('goodbye'); }
toastr.options.onclick = function() { console.log('clicked'); }
toastr.options.onCloseClick = function() { console.log('close button clicked'); }
JavaScript

アニメーションオプション

Toastr はデフォルトのアニメーションを提供するため、これらの設定を提供する必要はありません。

ただし、必要に応じてアニメーションをオーバーライドするオプションがあります。

イーシングス

オプションでアニメーション イージングをオーバーライドして、トーストを表示または非表示にします。

デフォルトはswingです。 swing と linear は jQuery に組み込まれています。

toastr.options.showEasing = 'swing';
toastr.options.hideEasing = 'linear';
toastr.options.closeEasing = 'linear';
JavaScript

jQuery イージングプラグインの使用 (http://www.gsgd.co.uk/sandbox/jquery/easing/)

toastr.options.showEasing = 'easeOutBounce';
toastr.options.hideEasing = 'easeInBack';
toastr.options.closeEasing = 'easeInBack';
JavaScript

アニメーション方式

選択した jQuery の show/hide メソッドを使用します。

これらのデフォルトは、fadeIn/fadeOut です。

メソッドfadeIn/fadeOut、slideDown/slideUp、およびshow/hideはjQueryに組み込まれています。

toastr.options.showMethod = 'slideDown';
toastr.options.hideMethod = 'slideUp';
toastr.options.closeMethod = 'slideUp';
JavaScript

重複の防止

同一のtoastrをスタックするのではなく、preventDuplicates プロパティを true に設定します。

重複は、メッセージの内容に基づいて前のトーストと照合されます。

toastr.options.preventDuplicates = true;
JavaScript

タイムアウト

タイムアウトを適切に設定して、toastr がユーザーと対話する方法を制御します

toastr.options.timeOut = 30; // ユーザーの操作なしでトーストが表示される時間
toastr.options.extendedTimeOut = 60; // ユーザーがトーストの上にカーソルを置いた後、トーストが表示される時間
JavaScript

自動非表示を防止

タイムアウトに基づいて toastr が閉じないようにするには、timeOut および extendedTimeOut オプションを 0 に設定します。

toastr は、選択されるまで保持されます。

toastr.options.timeOut = 0;
toastr.options.extendedTimeOut = 0;
JavaScript

プログレスバー

トーストの有効期限が切れるまでの時間を視覚的に示します。

toastr.options.progressBar = true;
JavaScript

rtl

toastr を反転して、右から左へ記述する言語で適切に表示されるようにします。

toastr.options.rtl = true;
JavaScript

HTMLサンプル

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>toastrのサンプル</title>
	<script src="https://code.jquery.com/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
	<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"/>
</head>
<body>
	<script type="text/javascript">
		$(function () {
			toastr.success('登録が完了しました。', '登録完了')
		});
	</script>
</body>
</html>
HTML

さいごに

めもです。。

関連記事