Denne artikkelen er en speilartikkel om maskinoversettelse, vennligst klikk her for å hoppe til originalartikkelen.

Utsikt: 20094|Svare: 2

[HTML/HTML5] En veldig vakker meldingsboks for varsler SweetAlert

[Kopier lenke]
Publisert på 24.12.2015 12:00:48 | | | |





Sweet Alert er en vakker påminnelseseffekt som erstatter den tradisjonelle Javascrip{filter}t Alert. SweetAlert sentrerer og justerer automatisk midten av siden, så det ser flott ut enten du bruker en stasjonær datamaskin, telefon eller nettbrett. I tillegg finnes det et bredt spekter av tilpassede konfigurasjonsmuligheter for fleksibel kontroll.

Slik bruker du:

Introduksjon:

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

swal({ tittel: "Error!", tekst: "Her er min feilmelding!", skriv: "error", confirmButtonText: "Cool" });
Vedlagt filpakke: sweetalert-master.zip (650.13 KB, Antall nedlastinger: 9, 售价: 2 粒MB)

Argument
Standardverdi

Descrip{filter}tion
Tittelnull (påkrevd)Tittelen på modalen. Den kan enten legges til objektet under nøkkeltittelen «tittel» eller sendes som den første parameteren i funksjonen.
TekstnullEn descrip{filter}tion for modalen. Den kan enten legges til objektet under nøkkelen "tekst" eller sendes som den andre parameteren i funksjonen.
typenullTypen modal. SweetAlert leveres med 4 innebygde typer som viser en tilsvarende ikon-animasjon: "Advarsel", "feil", "Suksess" og "info". Du kan også sette det som "Innspill" for å få en prompt modal. Den kan enten plasseres i objektet under nøkkelen "type" eller oppgis som den tredje parameteren i funksjonen.
allowEscapeKeytrueHvis satt tiltrue, kan brukeren avvise modalen ved å trykke på Escape-tasten.
customClassnullEn egendefinert CSS-klasse for modalen. Den kan legges til objektet under nøkkelen "customClass".
allowOutsideClickfalseHvis satt tiltrue, kan brukeren avvise modalen ved å klikke utenfor den.
showCancelButtonfalseHvis satt tiltrue, vises en "Avbryt"-knapp, som brukeren kan klikke på for å lukke modalen.
showConfirmButtontrueHvis satt tilfalse, vil "OK/Bekreft"-knappen være skjult. Sørg for å sette en timer eller sette allowOutsideClick til true når du bruker dette, for ikke å irritere brukeren.
bekreftKnappTekst"OK"Bruk dette for å endre teksten på "Bekreft"-knappen. Hvis showCancelButton er satt som sann, vil bekreft-knappen automatisk vise "Bekreft" i stedet for "OK".
bekreftKnappFarge"#AEDEF4"Bruk dette for å endre bakgrunnsfargen på "Bekreft"-knappen (må være en HEX-verdi).
kansellerButtonText"Avlys"Bruk dette for å endre teksten på "Avbryt"-knappen.
closeOnBekrefttrueSett tilfalsehvis du vil at modalen skal forbli åpen selv om brukeren trykker på "Bekreft"-knappen. Dette er spesielt nyttig hvis funksjonen knyttet til "Bekreft"-knappen er en annen SweetAlert.
closeOnCanceltrueSamme som closeOnConfirm, men for avbryt-knappen.
imageUrlnullLegg til et tilpasset ikon for modalen. Den skal inneholde en streng med stien til bildet.
imageStørrelse"80x80"Hvis imageUrl er satt, kan du spesifisere imageSize for å beskrive hvor stort ikonet skal være i px. Send inn en streng med to verdier adskilt av en "x". Den første verdien er bredden, den andre er høyden.
TimernullAutomatisk lukketimer for modalen. Satt inn i ms (millisekunder).
htmlfalseHvis satt til true, vil den ikke unnslippe tittel- og tekstparametere. (Sett til falsk hvis du er bekymret for XSS-angrep.)
AnimasjontrueHvis satt tilfalse, vil modalens animasjon bli deaktivert. Mulige (streng) verdier :pop(standard når animasjonen settes til true),Skyv fra toppen, Skli-fra-bunnen
inputType"tekst"Endre typen på inndatafeltet når du brukertype: "input"(Dette kan være nyttig hvis du vil at brukere skal skrive inn passordet sitt, for eksempel).
inputPlaceholdernullNår du bruker input-typen, kan du spesifisere en plassholder for å hjelpe brukeren.
inputValuenullSpesifiser en standard tekstverdi som du vil at inputen din skal vise når du bruker dentype: "input"
showLoaderOnConfirmfalseSett tiltrueFor å deaktivere knappene og vise at noe lastes.





Foregående:HTTPS De tingene (1) HTTPS-prinsippet (Reprint)
Neste:ASPX vs. MVC Page Captcha
 Vert| Publisert på 25.02.2017 18:36:23 |
Publisert på 08.12.2017 15:20:55 |
Layuis pop-ramme føles også god å bruke
Ansvarsfraskrivelse:
All programvare, programmeringsmateriell eller artikler publisert av Code Farmer Network er kun for lærings- og forskningsformål; Innholdet ovenfor skal ikke brukes til kommersielle eller ulovlige formål, ellers skal brukerne bære alle konsekvenser. Informasjonen på dette nettstedet kommer fra Internett, og opphavsrettstvister har ingenting med dette nettstedet å gjøre. Du må fullstendig slette innholdet ovenfor fra datamaskinen din innen 24 timer etter nedlasting. Hvis du liker programmet, vennligst støtt ekte programvare, kjøp registrering, og få bedre ekte tjenester. Hvis det foreligger noen krenkelse, vennligst kontakt oss på e-post.

Mail To:help@itsvse.com