Share
Hvert øyeblikk må du vise en varselboks til brukerne for å gi dem beskjed om en feil eller varsel. Problemet med standardvarslingskassene fra nettlesere er at de ikke er veldig attraktive. Når du lager et nettsted med flotte fargekombinasjoner og fancy animasjon for å forbedre brukeropplevelsen din, vil de uformede varslingsboksene virke utelukkende.
I denne opplæringen lærer du om et bibliotek kalt SweetAlert2 som gjør at vi kan lage alle slags varselmeldinger som kan tilpasses for å passe til utseendet på vår egen nettside.
Før du kan vise alle de søte varselmeldingene til brukerne, må du installere biblioteket og inkludere det i prosjektet. Hvis du bruker NPM eller Lysthus, Du kan installere den ved å kjøre følgende kommandoer:
npm installere sweetalert2 bower install sweetalert2
Du kan også få en CDN-kobling for den nyeste versjonen av biblioteket og inkludere den på din nettside ved hjelp av skriptetiketter:
I tillegg til JavaScript-filen, må du også laste inn en CSS-fil som brukes til å utforme alle varslingsboksene som er opprettet av biblioteket:
Når du har installert biblioteket, er det veldig enkelt å lage et søt varsel. Alt du trenger å gjøre er å ringe Swal () funksjon. Bare vær sikker på at funksjonen kalles etter at DOM er lastet.
Det er to måter å opprette en søt advarsel ved hjelp av Swal () funksjon. Du kan enten passere tittelen, kroppstexten og ikonverdien i tre forskjellige argumenter, eller du kan sende et enkelt argument som et objekt med forskjellige verdier som nøkkelverdier. Å overføre alt i et objekt er nyttig når du vil angi verdier for flere argumenter.
Når et enkelt argument er bestått og det er en streng, vil det søte varselet bare vise en tittel og en OK-knapp. Brukere vil kunne klikke hvor som helst utenfor varselet eller på OK-knappen for å avvise det.
Når to argumenter er bestått, blir den første tittelen, og den andre blir teksten inne i varselet. Du kan også vise et ikon i varselboksen ved å sende et tredje argument. Dette kan ha noen av de fem forhåndsdefinerte verdiene: advarsel, feil, suksess, info, og spørsmål. Hvis du ikke passerer det tredje argumentet, vises ingen ikon inne i varselmeldingen.
Accentsconagua
document.querySelector ("first"). addEventListener ('klikk', funksjon () swal ("Vår første varsel");); document.querySelector (". second"). addEventListener ("klikk", funksjon () swal ("Vår første advarsel", "Med litt kroppstekst!");); document.querySelector ("tredje"). addEventListener ("klikk", funksjon () swal ("Vår første advarsel", "Med litt kroppstekst og suksessikon!", "suksess"););Hvis du bare vil vise noen grunnleggende informasjon i en varselboks, vil det forrige eksempelet fungere fint. Biblioteket kan imidlertid faktisk gjøre mye mer enn bare å vise brukerne litt tekst i en varselmelding. Du kan endre alle aspekter av disse varslingsmeldingene for å dekke dine behov.
Vi har allerede dekket tittelen, teksten og ikonene i en søt varselmelding. Det er også et alternativ til å endre knappene i den og kontrollere deres oppførsel. Som standard vil et varsel bare ha en enkelt bekreftelsesknapp med tekst som sier "OK". Du kan endre teksten inne i bekreftelsesknappen ved å sette verdien av confirmButtonText eiendom. Hvis du også vil vise en avbryt-knapp i varselmeldingene, er alt du trenger å angi verdien av showCancelButton til ekte. Teksten inne i avbryt-knappen kan endres ved hjelp av cancelButtonText eiendom.
Hver av disse knappene kan få en annen bakgrunnsfarge ved hjelp av confirmButtonColor og cancelButtonColor eiendommer. Standardfarge for bekreftelsesknappen er # 3085d6, mens standardfarge for Avbryt-knappen er #aaa. Hvis du vil bruke andre tilpasninger på bekreft eller avbryt knapper, kan du bare bruke confirmButtonClass og cancelButtonClass egenskaper for å legge til en ny klasse for dem. Når klassene er lagt til, vil du kunne bruke CSS til å endre utseendet på disse knappene. Du kan også legge til en klasse på hovedmodellen selv ved å bruke customClass eiendom.
Hvis du har interaksjon med varselmeldingene i det første eksemplet, har du kanskje lagt merke til at modalene kan lukkes ved å trykke enten på Tast inn eller Flukt nøkkel. På samme måte kan du også klikke hvor som helst utenfor modal for å avvise det. Dette skjer fordi verdien av allowEnterKey, allowEscapeKey, og allowOutsideClick er satt til ekte som standard.
Når du viser to forskjellige knapper inne i en modal, er bekreftelsesknappen den som er i fokus som standard. Du kan fjerne fokus fra bekreftelsesknappen ved å sette verdien av focusConfirm til falsk. På samme måte kan du også sette fokus på Avbryt-knappen ved å sette verdien av focusCancel til ekte.
Bekreftelsesknappen vises som standard på venstre side. Du har muligheten til å reversere posisjonene til bekreft og avbryt knapper ved å sette verdien av reverseButtons til ekte.
I tillegg til å endre posisjon og farge på knapper i varselmeldingene, kan du også endre bakgrunnen og posisjonen til varselmeldingen eller bakgrunnen rundt den. Ikke bare det, men biblioteket lar deg også vise dine egne egendefinerte ikoner eller bilder i varselmeldingene. Dette kan være nyttig i mange situasjoner.
Du kan tilpasse bakgrunnen til et vakkert varsel ved hjelp av bakteppe eiendom. Denne egenskapen aksepterer enten en boolsk eller en streng som sin verdi. Bakgrunnen for en varslingsmelding består som standard av mest gjennomsiktig grå farge. Du kan gjemme det helt ved å sette verdien av bakteppe til falsk. På samme måte kan du også vise dine egne bilder i bakgrunnen ved å sette inn bakteppe verdien som en streng. I slike tilfeller er hele verdien av bakteppe streng er tildelt CSS bakgrunn eiendom. Bakgrunnen til en søt varselmelding kan styres ved hjelp av bakgrunn eiendom. Alle varslingsmeldinger har som standard en helt hvit bakgrunn.
Alle varslingsmeldingene vises som standard i midten av vinduet. Du kan imidlertid få dem til å dukke opp fra et annet sted ved hjelp av stilling eiendom. Denne egenskapen kan ha ni forskjellige verdier med selvforklarende navn: topp, top-start, topp-end, senter, center-start, senter-enden, bunn, bottom-start, og bunnenden.
Du kan deaktivere animasjonen når en modal dukker opp ved å angi verdien av animasjon eiendom til falsk. Biblioteket gir også en tidsur Egenskap som kan brukes til å lukke timeren automatisk når et bestemt antall millisekunder har gått.
I det følgende eksemplet har jeg brukt forskjellige kombinasjoner av alle egenskapene som er omtalt i denne delen, for å opprette fire forskjellige varslingsmeldinger. Dette skal demonstrere hvordan du helt kan endre utseendet og oppførselen til en modal opprettet av SweetAlert2-biblioteket.
document.querySelector ("first"). addEventListener ("klikk", funksjon () swal (title: "Vis to knapper inne i varselet", showCancelButton: true, confirmButtonText: "Bekreft", bekreftButtonColor: "# 00ff99" , avbrytButtonColor: "# ff0099");); document.querySelector (". second"). addEventListener ("klikk", funksjon () swal (title: "Er du sikker på å slette denne filen?", skriv: "info", showCancelButton: true, confirmButtonText: "Delete Det ", bekreftButtonColor:" # ff0055 ", avbrytButtonColor:" # 999999 ", reversButtons: true, focusConfirm: false, focusCancel: true);); document.querySelector ("third"). addEventListener ("klikk", funksjon () swal (title: "Profile Picture", tekst: "Vil du gjøre bildet ovenfor ditt profilbilde?", imageUrl: " https://images3.imgbox.com/4f/e6/wOhuryw6_o.jpg ", imageWidth: 550, imageHeight: 225, imageAlt:" Eagle Image ", showCancelButton: true, confirmButtonText:" Yes ", cancelButtonText:" No " confirmButtonColor: "# 00ff55", avbrytButtonColor: "# 999999", reverseButtons: true,);; document.querySelector ("fjerde"). addEventListener ("klikk", funksjon () swal (tittel: "Alert Set on Timer", tekst: "Dette varselet forsvinner etter 3 sekunder.", posisjon: "bottom" Bakgrunn: "lineær-gradient (gul, oransje)", bakgrunn: "hvit", tillateOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, showConfirmButton: false, showCancelButton: false, timer: 3000);); Initialisering av forskjellige søte varselmeldinger for å vise dem til brukere er en ting, men noen ganger vil du også trenge tilgang til metoder som styrer oppførselen til disse varslingsmeldingene etter initialisering. Heldigvis tilbyr SweetAlert2-biblioteket mange metoder som kan brukes til å vise eller skjule en modal, samt få tittelen, teksten, bildet, etc.
Du kan sjekke om en modal er synlig eller skjult ved hjelp av isVisible () metode. Du kan også programmere lukke en åpen modal ved å bruke Lukk() eller closeModal () metoder. Hvis du tilfeldigvis bruker samme sett med egenskaper for flere varslingsmeldinger under initialiseringen, kan du bare ringe setDefaults (configurationObject)Metode i begynnelsen å sette verdien av alle disse egenskapene samtidig. Biblioteket gir også en Tilbakestill standardinnstillinger() metode for å tilbakestille alle egenskapene til standardverdiene.
Du kan få tittelen, innholdet og bildet av en modal ved hjelp av getTitle (), getContent (), og getImage () metoder. På samme måte kan du også få HTML-koden som utgjør bekreftelse og avbryt knapper ved hjelp av getConfirmButton () og getCancelButton () fremgangsmåter.
Det finnes mange andre metoder som kan brukes til å utføre andre oppgaver, for eksempel ved å klikke på bekreft eller avbryt knappene.
SweetAlert2-biblioteket gjør det veldig enkelt for utviklere å opprette egendefinerte varslingsmeldinger for å vise sine brukere ved å bare angi verdiene for noen få egenskaper. Denne opplæringen var rettet mot å dekke grunnleggende om dette biblioteket slik at du kan lage dine egne e-postvarsler raskt.
For å forhindre at innlegget blir for stort, har jeg bare dekket de mest brukte metodene og egenskapene. Hvis du vil lese om alle andre metoder og egenskaper som kan brukes til å lage avanserte varslingsmeldinger, bør du gå gjennom den detaljerte dokumentasjonen av biblioteket.
Ikke glem å sjekke ut de andre JavaScript-ressursene vi har tilgjengelig på Envato Market, så vel.
Gi meg beskjed om det er noe du vil at jeg skal klargjøre i denne opplæringen.
