目次
導入
pastr.js は非常に簡潔なポップアップ メッセージ プラグインですが、主な理由はそのスクリプトとスタイル ファイルが小さいことです。
また、独自のニーズに応じてスタイル ファイルを変更でき、さまざまなシナリオに適用できます。
https://codeseven.github.io/toastr/
https://github.com/CodeSeven/toastr
1. 準備
トースト プラグインを呼び出す前に、次の 3 つのファイルを導入する必要があります。
jquery.js、toastr.js、toastr.css。
たとえば、CDN 経由でインポートすることができます。
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css">
2. 使いやすい
導入後は、toastr.xxx を介して直接呼び出し、プロンプトの種類に応じて対応するポップアップ ボックスを選択するだけです。例えば：
注: 2 番目のパラメータはタイトルであり、スタイルは変更できます。これについては以下で説明します。
toastr.info("请阅读当前提示信息！")
toastr.info("请阅读当前提示信息！","信息")
toastr.success("恭喜，操作成功了！")
toastr.success("恭喜，操作成功了！", "成功")
toastr.warning("注意，这是一条警告信息！")
toastr.warning("注意，这是一条警告信息！", "警告")
toastr.error("操作失败了！");
toastr.error("操作失败了！", "失败");
// toastr.clear();// 移除所有,有动画效果
// toastr.remove();// 移除所有，没有动画效果
ポップアップ ウィンドウは次のようになります。
注: マウスがフォーカスをロックすると、下のタイトルの付いた成功の箇条書きボックスに示すように、色が強調されます。
3. 高度な使い方
スタイル ファイル toastr.css を変更することで、箇条書きボックスのスタイルをカスタマイズできます。
例 1: ポップアップ ウィンドウの色とタイトルのスタイルを変更する
次の図に示すように、対応する背景色の箇条書きボックスの背景色の値を変更し、フォント サイズ スタイルを追加できます。
効果：
例 2: 構成項目を変更してポップアップ アクションをカスタマイズする
var messageOpts = {
"closeButton": true,// 是否显示关闭按钮
"progressBar":true,// 是否显示进度条
"positionClass": "toast-bottom-left",// 弹出窗的位置
"showDuration": "1000",// 显示的动画时间
"hideDuration": "1000",// 消失的动画时间
"timeOut": "6000",// 弹窗展现时间
"showEasing": "swing",//显示时的动画缓冲方式
"hideEasing": "linear",//消失时的动画缓冲方式
"showMethod": "fadeIn",//显示时的动画方式
"hideMethod": "fadeOut", //消失时的动画方式
"allowHtml":true,// 允许弹窗内容包含 HTML 语言
};
toastr.options = messageOpts;
toastr.warning("注意，这是一条警告信息！", "警告")
ポップアップスタイル:
例3: ポップアップボックスの表示位置をカスタマイズする
ページ中央に表示されるポップアップウィンドウのスタイルを以下のようにカスタマイズします（表示位置は柔軟に調整できます）
"positionClass": "toast-center-center",// 弹出窗的位置配置
4. オプション設定項目の詳細説明
一般的に使用される構成項目の例を次に示します。
| 1 | 2 | 3 |
|---|---|---|
| 閉じるボタン | 閉じるボタンを表示するかどうか | [デフォルト false] true: 表示; false: 表示しない |
| プログレスバー | プログレスバーを表示するかどうか | [デフォルト false] true: 表示; false: 表示しない |
| 位置クラス | ポップアップボックスの表示位置 | [デフォルトのトースト-右上-右上] トースト-トップ-左: 左上 トースト-右上: 右上 トースト-トップ-センター: 上中央 トースト-トップ-全幅: 上中央 (全幅) トースト- button-right: 右下 toast-bottom-left: 左下 toast-bottom-center: 中央下 toast-bottom-full-width: 中央下 (全幅) |
| 表示期間 | アニメーションの継続時間を表示する | 【デフォルト 300ms】単位：ミリ秒 |
| 非表示期間 | 消えるアニメーションの長さ | [デフォルト 1000ms] 単位：ミリ秒 |
| タイムアウト | ポップアップ表示時間 | 【デフォルト 5000ms】単位：ミリ秒 |
| 拡張タイムアウト | マウスフォーカスを失った後、時刻を再表示します | [デフォルト 1000ms] 単位：ミリ秒 |
| 表示中 | ポップアップが表示されたときにトリガーされるアクション | pastr.options.onShown = function() { console.log('hello'); } |
| 非表示 | ポップアップが自動的に消えるときにトリガーされるアクション | pastr.options.onHidden = function() { console.log('goodbye'); } |
| クリック時 | ポップアップがクリックされたときにトリガーされるアクション | pastr.options.onclick = function() { console.log('clicked'); } |
| 閉じるクリック時 | ポップアップを手動で閉じたときにトリガーされるアクション | pastr.options.onCloseClick = function() { console.log('閉じるボタンがクリックされました'); } |
| 殺すために解雇する | ポップアップボックスがすぐに消えるかどうかをクリックします | [デフォルト値 true] true: すぐに消える; false: 消えない |
さらに、maxOpened テストは無効であるため、現時点ではリストされません。