jQueryで通知するToastrの説明

らら
らら

はじめに

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

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

Toastrとは

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

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

ダウンロード＆設置

本家はこちら・・


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

Githubはこちら・・


https://github.com/CodeSeven/toastr

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ではこんな感じ


<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"/>

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

Toastr

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

Toastr

Toastr

設置方法

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


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

その他のオプション


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

Toastr


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

Toastr


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

Toastr


// アニメーションを使用せずに現在表示をすぐに削除する
toastr.remove()


// アニメーションを使用して現在表示を削除する
toastr.clear()


// グローバルオプションを上書きする場合
//第１引数：メッセージ、第２引数：タイトル、第３引数：オプション
toastr.success('登録が完了しました。', '登録完了', {timeOut: 5000})

HTML 文字のエスケープ

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


toastr.options.escapeHtml = true;

閉じるボタン

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


toastr.options.closeButton = true;

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


toastr.options.closeHtml = '';

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

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


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

表示シーケンス

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


toastr.options.newestOnTop = false;

コールバック


// 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'); }

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

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

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

イーシングス

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

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


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

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


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

アニメーション方式

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

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

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


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

重複の防止

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

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


toastr.options.preventDuplicates = true;

タイムアウト

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


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

自動非表示を防止

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

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


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

プログレスバー

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


toastr.options.progressBar = true;

rtl

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


toastr.options.rtl = true;

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>

さいごに

めもです。。

関連記事