Inhaltsverzeichnis
Einführung
toastr.js ist ein sehr übersichtliches Popup-Nachrichten-Plugin. Der Hauptgrund dafür ist, dass seine Skript- und Stildateien klein sind.
Und Sie können die Stildatei entsprechend Ihren eigenen Bedürfnissen ändern, was in vielen verschiedenen Szenarien angewendet werden kann.
https://codeseven.github.io/toastr/
https://github.com/CodeSeven/toastr
1. Vorbereitung
Vor dem Aufruf des Toastr-Plugins müssen drei Dateien eingeführt werden:
jquery.js、toastr.js、toastr.css。
Beispielsweise ist der Import über ein CDN möglich:
<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. Einfach zu bedienen
Nach der Einführung können Sie einfach direkt über toastr.xxx anrufen und das entsprechende Popup-Fenster entsprechend dem Eingabeaufforderungstyp auswählen. Zum Beispiel:
Hinweis: Der zweite Parameter ist der Titel, und der Stil kann geändert werden, was im Folgenden vorgestellt wird.
toastr.info("请阅读当前提示信息！")
toastr.info("请阅读当前提示信息！","信息")
toastr.success("恭喜，操作成功了！")
toastr.success("恭喜，操作成功了！", "成功")
toastr.warning("注意，这是一条警告信息！")
toastr.warning("注意，这是一条警告信息！", "警告")
toastr.error("操作失败了！");
toastr.error("操作失败了！", "失败");
// toastr.clear();// 移除所有,有动画效果
// toastr.remove();// 移除所有，没有动画效果
Das Popup-Fenster sieht folgendermaßen aus:
Hinweis: Wenn die Maus den Fokus fixiert, wird die Farbe hervorgehoben, wie im Erfolgsfeld mit Aufzählungszeichen unten mit Titel gezeigt.
3. Erweiterte Verwendung
Sie können den Stil des Aufzählungsfelds anpassen, indem Sie die Stildatei toastr.css ändern.
Beispiel 1: Ändern Sie die Farbe des Popup-Fensters und den Stil des Titels
Wie in der Abbildung unten gezeigt, können Sie den Hintergrundfarbwert des entsprechenden Hintergrundfarben-Aufzählungsfelds ändern und den Schriftgrößenstil hinzufügen.
Wirkung:
Beispiel 2: Passen Sie Popup-Aktionen durch Ändern von Konfigurationselementen an
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("注意，这是一条警告信息！", "警告")
Popup-Stil:
Beispiel 3: Passen Sie die Anzeigeposition des Popup-Felds an
Passen Sie den Stil eines Popup-Fensters, das in der Mitte der Seite angezeigt wird, wie folgt an: (Die angezeigte Position kann flexibel angepasst werden)
"positionClass": "toast-center-center",// 弹出窗的位置配置
4. Detaillierte Erläuterung der Optionskonfigurationselemente
Im Folgenden finden Sie Beispiele für häufig verwendete Konfigurationselemente:
| 1 | 2 | 3 |
|---|---|---|
| closeButton | Ob die Schließen-Schaltfläche angezeigt werden soll | [Standardwert falsch] wahr: Anzeige; falsch: nicht angezeigt |
| Fortschrittsanzeige | ob der Fortschrittsbalken angezeigt werden soll | [Standardwert falsch] wahr: Anzeige; falsch: nicht angezeigt |
| positionClass | Die Anzeigeposition des Popup-Felds | [Standard-Toast-oben-rechts, oben rechts] toast-top-left: oben links toast-top-right: oben rechts toast-top-center: oben in der Mitte toast-top-full-width: oben in der Mitte (volle Breite) toast- unten rechts: unten rechts Toast-bottom-links: unten links Toast-unten-Mitte: unten Mitte Toast-bottom-full-width: unten Mitte (volle Breite) |
| showDuration | Animationsdauer anzeigen | 【Standard 300 ms】 Einheit: Millisekunde |
| ausblendenDauer | Dauer der Verschwinden-Animation | [Standard 1000 ms] Einheit: Millisekunde |
| Auszeit | Popup-Anzeigezeit | 【Standard 5000 ms】Einheit: Millisekunde |
| ExtendedTimeOut | Nachdem Sie den Mausfokus verloren haben, zeigen Sie die Uhrzeit erneut an | [Standard 1000 ms] Einheit: Millisekunde |
| onShown | Die Aktion, die ausgelöst wird, wenn das Popup angezeigt wird | toastr.options.onShown = function() { console.log('hello'); } |
| onHidden | Die Aktion, die ausgelöst wird, wenn das Popup automatisch verschwindet | toastr.options.onHidden = function() { console.log('goodbye'); } |
| onclick | Die Aktion, die ausgelöst wird, wenn auf das Popup geklickt wird | toastr.options.onclick = function() { console.log('clicked'); } |
| onCloseClick | Die Aktion, die ausgelöst wird, wenn das Popup manuell geschlossen wird | toastr.options.onCloseClick = function() { console.log('Schließen-Schaltfläche angeklickt'); } |
| killToDismiss | Klicken Sie darauf, ob das Popup-Fenster sofort verschwindet | [Standard true] true: sofort verschwinden; false: nicht verschwinden |
Darüber hinaus ist der maxOpened-Test ungültig und wird vorerst nicht aufgeführt.