Dieser Artikel ist ein Spiegelartikel der maschinellen Übersetzung, bitte klicken Sie hier, um zum Originalartikel zu springen.

Ansehen: 20094|Antwort: 2

[HTML/HTML5] Ein sehr schönes Benachrichtigungsfeld SweetAlert

[Link kopieren]
Veröffentlicht am 24.12.2015 12:00:48 | | | |





Sweet Alert ist ein wunderschöner Erinnerungseffekt, der den traditionellen Javascrip{filter}t Alert ersetzt. SweetAlert zentriert und richtet sich automatisch zur Mitte der Seite aus, sodass es sowohl auf einem Desktop-Computer, einem Handy als auch auf einem Tablet gut aussieht. Zusätzlich stehen eine breite Palette individueller Konfigurationsoptionen für flexible Steuerung zur Verfügung.

Wie man verwendet:

Einführung:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
Dann ein einfaches Beispiel:

swal({ title: "Error!", Text: "Hier ist meine Fehlermeldung!", tippen: "error", bestätigenButtonText: "Cool" });
Angehängtes Dateipaket: sweetalert-master.zip (650.13 KB, Anzahl der Downloads: 9, 售价: 2 粒MB)

Argument
Standardwert

Descrip{filter}tion
Titelnull (erforderlich)Der Titel des Modals. Sie kann entweder unter dem Schlüssel "Titel" zum Objekt hinzugefügt oder als erster Parameter der Funktion übermittelt werden.
TextnullEin Descrip{filter}tion für das Modal. Sie kann entweder unter der Taste "text" zum Objekt hinzugefügt oder als zweiter Parameter der Funktion weitergegeben werden.
ArtnullDer Typ des Modals. SweetAlert wird mit 4 eingebauten Typen geliefert, die eine entsprechende Symbolanimation anzeigen: "Warnung", "Fehler", "Erfolg" und "Info". Du kannst es auch als "Eingabe"Um einen prompten Modal zu erhalten. Er kann entweder im Objekt unter dem Schlüssel "Typ" eingefügt werden oder als dritter Parameter der Funktion weitergegeben werden.
allowEscapeKeytrueWenn gesetzt auftrue, der Benutzer kann das Modal durch Drücken der Escape-Taste schließen.
CustomClassnullEine benutzerdefinierte CSS-Klasse für das Modal. Sie kann dem Objekt unter dem Schlüssel "customClass" hinzugefügt werden.
allowOutsideClickfalseWenn gesetzt auftrue, der Benutzer kann das Modal schließen, indem er außen draußen klickt.
showCancelButtonfalseWenn gesetzt auftrue, wird eine Schaltfläche "Abbrechen" angezeigt, auf die der Nutzer klicken kann, um das Modal zu schließen.
showConfirmButtontrueWenn gesetzt auffalse, der "OK/Bestätigen"-Button wird versteckt. Stelle sicher, dass du einen Timer stellst oder allowOutsideClick auf true stellst, um den Nutzer nicht zu stören.
bestätigenButtonText"OK"Verwenden Sie dies, um den Text auf der Schaltfläche "Bestätigen" zu ändern. Wenn showCancelButton als true gesetzt ist, zeigt der Bestätigungsbutton automatisch "Bestätigen" statt "OK" an.
bestätigenButtonColor"#AEDEF4"Verwenden Sie dies, um die Hintergrundfarbe der "Bestätigen"-Taste zu ändern (muss ein HEX-Wert sein).
cancelButtonText"Stornieren"Verwenden Sie dies, um den Text auf der Schaltfläche "Abbrechen" zu ändern.
schließenOnBestätigentrueStellen Sie auffalsewenn du möchtest, dass das Modal auch dann offen bleibt, wenn der Nutzer die "Bestätigen"-Taste drückt. Dies ist besonders nützlich, wenn die Funktion, die mit dem "Bestätigen"-Button verbunden ist, ein weiterer SweetAlert ist.
closeOnCanceltrueDasselbe wie closeOnConfirm, aber für den Abbruch-Button.
imageUrlnullFüge ein individuelles Symbol für das Modal hinzu. Sollte eine Zeichenkette mit dem Pfad zum Bild enthalten.
imageGröße"80x80"Wenn imageUrl gesetzt ist, kannst du imageSize angeben, um zu beschreiben, wie groß das Icon in px sein soll. Geben Sie eine Zeichenkette mit zwei Werten ein, die durch ein "x" getrennt sind. Der erste Wert ist die Breite, der zweite die Höhe.
TimernullAutomatischer Sperrtimer des Modals. Eingestellt in ms (Millisekunden).
htmlfalseWenn auf true gesetzt, entkommt Titel- und Textparameter nicht. (Auf falsch gestellt, falls du Angst vor XSS-Angriffen hast.)
AnimationtrueWenn gesetzt auffalsewird die Animation des Modals deaktiviert. Mögliche (String-)Werte:pop(Standard, wenn die Animation auf true gesetzt ist),Rutschen von oben, Gleiten von unten
inputType"Text"Ändern Sie den Typ des Eingabefeldes, wenn Sie verwendentype: "input"(Das kann nützlich sein, wenn Sie möchten, dass Nutzer zum Beispiel ihr Passwort eingeben).
inputPlaceholdernullBeim Einsatz des Eingabetyps können Sie einen Platzhalter angeben, um dem Benutzer zu helfen.
inputValuenullGib einen Standard-Textwert an, den deine Eingabe anzeigen soll, wenn du ihn benutzttype: "input"
showLoaderOnConfirmfalseStellen Sie auftrueum die Tasten zu deaktivieren und anzuzeigen, dass etwas lädt.





Vorhergehend:HTTPS Diese Dinge (1) HTTPS-Prinzip (Nachdruck)
Nächster:ASPX vs. MVC Page Captcha
 Vermieter| Veröffentlicht am 25.02.2017 18:36:23 |
Veröffentlicht am 08.12.2017 15:20:55 |
Layuis Pop-Rahmen fühlt sich ebenfalls gut an
Verzichtserklärung:
Alle von Code Farmer Network veröffentlichten Software, Programmiermaterialien oder Artikel dienen ausschließlich Lern- und Forschungszwecken; Die oben genannten Inhalte dürfen nicht für kommerzielle oder illegale Zwecke verwendet werden, andernfalls tragen die Nutzer alle Konsequenzen. Die Informationen auf dieser Seite stammen aus dem Internet, und Urheberrechtsstreitigkeiten haben nichts mit dieser Seite zu tun. Sie müssen die oben genannten Inhalte innerhalb von 24 Stunden nach dem Download vollständig von Ihrem Computer löschen. Wenn Ihnen das Programm gefällt, unterstützen Sie bitte echte Software, kaufen Sie die Registrierung und erhalten Sie bessere echte Dienstleistungen. Falls es eine Verletzung gibt, kontaktieren Sie uns bitte per E-Mail.

Mail To:help@itsvse.com