Denne artikel er en spejling af maskinoversættelse, klik venligst her for at springe til den oprindelige artikel.

Udsigt: 20094|Svar: 2

[HTML/HTML5] En meget smuk beskedboks SweetAlert

[Kopier link]
Opslået på 24/12/2015 12.00.48 | | | |





Sweet Alert er en smuk remind-effekt, der erstatter den traditionelle Javascrip{filter}t Alert. SweetAlert centrerer og justerer automatisk midten af siden, så det ser fantastisk ud, uanset om du bruger en stationær computer, telefon eller tablet. Derudover findes der et bredt udvalg af brugerdefinerede konfigurationsmuligheder for fleksibel styring.

Sådan bruger du:

Introduktion:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
Så et simpelt eksempel:

swal({ titel: "Fejl!", tekst: "Her er min fejlmeddelelse!", skriv: "fejl", bekræftKnapTekst: "Cool" });
Vedhæftet filpakke: sweetalert-master.zip (650.13 KB, Antal downloads: 9, 售价: 2 粒MB)

Argument
Standardværdi

Descrip{filter}tion
Titelnull (påkrævet)Titlen på modalen. Det kan enten tilføjes objektet under nøgletitlen "title" eller gives som den første parameter for funktionen.
TekstnulEn beskrivelse{filter}tion for modalen. Den kan enten tilføjes objektet under nøglen "tekst" eller gives som den anden parameter i funktionen.
slagsnulTypen af modalen. SweetAlert leveres med 4 indbyggede typer, som viser en tilsvarende ikonanimation: "advarsel", "fejl", "Succes" og "info". Du kan også sætte det som "Input" for at få en prompt modal. Den kan enten placeres i objektet under nøglen "type" eller gives som den tredje parameter for funktionen.
allowEscapeKeytrueHvis sat tiltrue, kan brugeren afvise modalen ved at trykke på Escape-tasten.
customClassnulEn brugerdefineret CSS-klasse til modalen. Den kan tilføjes objektet under nøglen "customClass".
tilladeUdenforKlikfalseHvis sat tiltrue, kan brugeren afvise modalen ved at klikke udenfor den.
showCancelButtonfalseHvis sat tiltrue, vises en "Annuller"-knap, som brugeren kan klikke på for at afvise modalen.
showConfirmButtontrueHvis sat tilfalse, vil "OK/Bekræft"-knappen være skjult. Sørg for at sætte en timer eller sætte allowOutsideClick til true, når du bruger dette, for ikke at irritere brugeren.
bekræftKnapTekst"OK"Brug dette til at ændre teksten på "Bekræft"-knappen. Hvis showCancelButton er sat som sand, vil bekræft-knappen automatisk vise "Bekræft" i stedet for "OK".
bekræftKnapFarve"#AEDEF4"Brug dette til at ændre baggrundsfarven på "Bekræft"-knappen (skal være en HEX-værdi).
annullerButtonText"Aflys"Brug dette til at ændre teksten på "Annuller"-knappen.
lukkerPåBekræfttrueIndstil tilfalsehvis du vil have, at modalen forbliver åben, selvom brugeren trykker på "Bekræft"-knappen. Dette er især nyttigt, hvis funktionen, der er knyttet til "Bekræft"-knappen, er en anden SweetAlert.
closeOnCanceltrueSamme som closeOnConfirm, men for annuller-knappen.
imageUrlnulTilføj et tilpasset ikon til modalen. Den bør indeholde en streng med stien til billedet.
imageSize"80x80"Hvis imageUrl er sat, kan du specificere imageSize for at beskrive, hvor stort du vil have ikonet i px. Send en streng med to værdier adskilt af et "x". Den første værdi er bredden, den anden er højden.
TimernulAuto lukketimer for modalen. Indstillet på ms (millisekunder).
htmlfalseHvis den er sat til true, undslipper den ikke titel- og tekstparametre. (Sæt til falsk, hvis du er bekymret for XSS-angreb.)
AnimationtrueHvis sat tilfalse, vil modalens animation blive deaktiveret. Mulige (streng)værdier :pop(standard når animationen sættes til true),Glide-fra-toppen, Glide-fra-bunden
inputType"tekst"Skift typen af inputfeltet, når du brugertype: "input"(Dette kan være nyttigt, hvis du for eksempel vil have brugere til at indtaste deres adgangskode).
inputPlaceholdernulNår du bruger input-typen, kan du angive en pladsholder for at hjælpe brugeren.
inputValuenulAngiv en standard tekstværdi, som du vil have dit input til at vise, når du bruger dentype: "input"
showLoaderOnConfirmfalseIndstil tiltruefor at deaktivere knapperne og vise, at noget loader.





Tidligere:HTTPS De ting (1) HTTPS-princippet (genoptryk)
Næste:ASPX vs. MVC Page Captcha
 Udlejer| Opslået på 25/02/2017 18.36.23 |
Opslået på 08/12/2017 15.20.55 |
Layuis pop-ramme føles også god at bruge
Ansvarsfraskrivelse:
Al software, programmeringsmaterialer eller artikler udgivet af Code Farmer Network er kun til lærings- og forskningsformål; Ovenstående indhold må ikke bruges til kommercielle eller ulovlige formål, ellers skal brugerne bære alle konsekvenser. Oplysningerne på dette site kommer fra internettet, og ophavsretstvister har intet med dette site at gøre. Du skal slette ovenstående indhold fuldstændigt fra din computer inden for 24 timer efter download. Hvis du kan lide programmet, så understøt venligst ægte software, køb registrering og få bedre ægte tjenester. Hvis der er nogen overtrædelse, bedes du kontakte os via e-mail.

Mail To:help@itsvse.com