Dit artikel is een spiegelartikel van machinevertaling, klik hier om naar het oorspronkelijke artikel te gaan.

Bekijken: 20094|Antwoord: 2

[HTML/HTML5] Een zeer mooie meldingsbox SweetAlert

[Link kopiëren]
Geplaatst op 24-12-2015 12:00:48 | | | |





Sweet Alert is een prachtig herinneringseffect dat de traditionele Javascrip{filter}t Alert vervangt. SweetAlert centreert en richt zich automatisch uit op het midden van de pagina, dus het ziet er geweldig uit, of je nu een desktopcomputer, telefoon of tablet gebruikt. Daarnaast is er een breed scala aan aangepaste configuratieopties beschikbaar voor flexibele besturing.

Hoe te gebruiken:

Introductie:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
Dan een eenvoudig voorbeeld:

swal({ titel: "Error!", tekst: "Hier is mijn foutmelding!", typ: "error", bevestigButtonText: "Cool" });
Bijgevoegd bestandspakket: sweetalert-master.zip (650.13 KB, Aantal downloads: 9, 售价: 2 粒MB)

Argument
Standaardwaarde

Descrip{filter}tion
titelnull (vereist)De titel van de modale. Het kan ofwel aan het object worden toegevoegd onder de sleutel "titel" of als eerste parameter van de functie worden doorgegeven.
SmsnulEen descrip{filter}tion voor de modal. Het kan ofwel aan het object worden toegevoegd onder de sleutel "text" of als tweede parameter van de functie worden doorgegeven.
typenulHet type modaliteit. SweetAlert wordt geleverd met 4 ingebouwde types die een bijpassende icoonanimatie tonen: "Waarschuwing", "fout", "Succes" en "info". Je kunt het ook instellen als "Input"om een prompt modal te krijgen. Het kan ofwel in het object worden geplaatst onder de sleutel "type" of als de derde parameter van de functie worden doorgegeven.
allowEscapeKeytrueAls ingesteld optrue, kan de gebruiker de modal sluiten door op de Escape-toets te drukken.
customClassnulEen aangepaste CSS-klasse voor de modale. Het kan aan het object worden toegevoegd met de sleutel "customClass".
toelaatBuitenKlikfalseAls ingesteld optrue, kan de gebruiker de modal verwijderen door erbuiten te klikken.
showCancelButtonfalseAls ingesteld optrue, wordt een "Annuleren"-knop getoond, waarop de gebruiker kan klikken om de modal te sluiten.
showConfirmButtontrueAls ingesteld opfalse, de "OK/Bevestigen"-knop wordt verborgen. Zorg ervoor dat je een timer zet of allowOutsideClick op true zet wanneer je dit gebruikt, om de gebruiker niet te irriteren.
bevestigKnopTekst"OK"Gebruik dit om de tekst op de knop "Bevestigen" te wijzigen. Als showCancelButton als true is ingesteld, toont de bevestigknop automatisch "Bevestigen" in plaats van "OK".
bevestigKnopKleur"#AEDEF4"Gebruik dit om de achtergrondkleur van de "Bevestig"-knop te veranderen (moet een HEX-waarde zijn).
cancelButtonText"Annuleren"Gebruik dit om de tekst op de knop "Annuleren" te veranderen.
dichtAanBevestigentrueStel in opfalseals je wilt dat de modal open blijft, zelfs als de gebruiker op de "Bevestig"-knop drukt. Dit is vooral handig als de functie die aan de "Bevestig"-knop is gekoppeld een andere SweetAlert is.
closeOnCanceltrueHetzelfde als closeOnConfirm, maar dan voor de annuleren-knop.
imageUrlnulVoeg een aangepast icoon toe voor de modaliteit. Moet een string bevatten met het pad naar de afbeelding.
afbeeldingGrootte"80x80"Als imageUrl is ingesteld, kun je imageSize specificeren om te beschrijven hoe groot je het pictogram in px wilt hebben. Geef een string door met twee waarden die gescheiden zijn door een "x". De eerste waarde is de breedte, de tweede is de hoogte.
TimernulAutomatische sluittimer van de modal. Ingesteld in ms (milliseconden).
htmlfalseAls deze op waar staat, ontsnapt titel- en tekstparameters niet. (Zet op false als je je zorgen maakt over XSS-aanvallen.)
AnimatietrueAls ingesteld opfalse, de animatie van de modal wordt uitgeschakeld. Mogelijke (string)waarden :pop(standaard wanneer de animatie op true staat),Van boven schuiven, Van onderen glijden
inputType"tekst"Verander het type invoerveld bij gebruiktype: "input"(Dit kan nuttig zijn als je wilt dat gebruikers bijvoorbeeld hun wachtwoord invoeren).
inputPlaceholdernulBij het gebruik van het invoertype kun je een tijdelijke aanduiding opgeven om de gebruiker te helpen.
inputValuenulGeef een standaard tekstwaarde aan die je invoer wilt tonen bij gebruiktype: "input"
showLoaderOnConfirmfalseStel in optrueom de knoppen uit te schakelen en te laten zien dat er iets wordt geladen.





Vorig:HTTPS Die Dingen (1) HTTPS-principe (Herdruk)
Volgend:ASPX vs. MVC Page Captcha
 Huisbaas| Geplaatst op 25-02-2017 18:36:23 |
Geplaatst op 08-12-2017 15:20:55 |
Layui's popframe voelt ook goed aan om te gebruiken
Disclaimer:
Alle software, programmeermaterialen of artikelen die door Code Farmer Network worden gepubliceerd, zijn uitsluitend bedoeld voor leer- en onderzoeksdoeleinden; De bovenstaande inhoud mag niet worden gebruikt voor commerciële of illegale doeleinden, anders dragen gebruikers alle gevolgen. De informatie op deze site komt van het internet, en auteursrechtconflicten hebben niets met deze site te maken. Je moet bovenstaande inhoud volledig van je computer verwijderen binnen 24 uur na het downloaden. Als je het programma leuk vindt, steun dan de echte software, koop registratie en krijg betere echte diensten. Als er sprake is van een inbreuk, neem dan contact met ons op via e-mail.

Mail To:help@itsvse.com