Share
Af en toe moet je een waarschuwingsvenster laten zien aan je gebruikers om hen op de hoogte te stellen van een fout of melding. Het probleem met de standaard waarschuwingsvakken van browsers is dat ze niet erg aantrekkelijk zijn. Wanneer u een website maakt met geweldige kleurencombinaties en mooie animaties om de browse-ervaring van uw gebruikers te verbeteren, lijken de ongestileerde waarschuwingsboxen niet op hun plaats.
In deze tutorial leer je over een bibliotheek genaamd SweetAlert2 waarmee we allerlei waarschuwingsberichten kunnen maken die kunnen worden aangepast aan het uiterlijk van onze eigen website..
Voordat u al die zoete waarschuwingsberichten aan uw gebruikers kunt tonen, moet u de bibliotheek installeren en deze in uw project opnemen. Als je gebruikt NPM of prieel, u kunt het installeren door de volgende opdrachten uit te voeren:
npm installeren sweetalert2 prieel installeren sweetalert2
U kunt ook een CDN-koppeling voor de nieuwste versie van de bibliotheek krijgen en deze in uw webpagina opnemen met scripttags:
Naast het JavaScript-bestand moet u ook een CSS-bestand laden dat wordt gebruikt om alle waarschuwingsvakken op te maken die door de bibliotheek zijn gemaakt:
Nadat u de bibliotheek hebt geïnstalleerd, is het maken van een zoet alarm eigenlijk heel eenvoudig. Het enige wat u hoeft te doen is bellen met de swal () functie. Zorg ervoor dat de functie wordt aangeroepen nadat de DOM is geladen.
Er zijn twee manieren om een zoet alarm te maken met behulp van de swal () functie. U kunt de titel, hoofdtekst en pictogramwaarde in drie verschillende argumenten doorgeven of u kunt een enkel argument doorgeven als een object met verschillende waarden als sleutel / waardeparen. Alles in een object doorgeven is handig wanneer u waarden voor meerdere argumenten wilt opgeven.
Wanneer een enkel argument wordt doorgegeven en het een string is, zal de Sweet Alert alleen een titel en een OK-knop tonen. Gebruikers kunnen overal buiten de waarschuwing klikken of op de knop OK om deze te sluiten.
Wanneer twee argumenten worden doorgegeven, wordt de eerste de titel en de tweede de tekst in de waarschuwing. U kunt ook een pictogram in het waarschuwingsvenster weergeven door een derde argument door te geven. Dit kan een van de vijf vooraf gedefinieerde waarden hebben: waarschuwing, fout, succes, info, en vraag. Als u het derde argument niet doorgeeft, wordt er geen pictogram weergegeven in het waarschuwingsbericht.
Accentsconagua
document.querySelector (". eerste"). addEventListener ('klik', functie () swal ("Our First Alert");); document.querySelector (". second"). addEventListener ('klik', functie () swal ("Our First Alert", "With some body text!");); document.querySelector (". third"). addEventListener ('klik', functie () swal ("Our First Alert", "With some body text and success icon!", "success"););Als u eenvoudig enkele basisinformatie in een waarschuwingsvenster wilt weergeven, doet het vorige voorbeeld het prima. De bibliotheek kan echter veel meer doen dan gebruikers alleen tekst binnen een waarschuwingsbericht laten zien. U kunt elk aspect van deze waarschuwingsberichten aanpassen aan uw eigen behoeften.
We hebben de titel, de tekst en de pictogrammen in een zoet waarschuwingsbericht al behandeld. Er is ook een optie om de knoppen erin te veranderen en hun gedrag te regelen. Standaard heeft een waarschuwing slechts één bevestigingsknop met de tekst "OK". U kunt de tekst binnen de bevestigingsknop wijzigen door de waarde van de confirmButtonText eigendom. Als u ook een knop Annuleren in uw waarschuwingsberichten wilt weergeven, hoeft u alleen de waarde in te stellen showCancelButton naar waar. De tekst binnen de annuleerknop kan worden gewijzigd met behulp van de cancelButtonText eigendom.
Elk van deze knoppen kan een andere achtergrondkleur krijgen met behulp van de confirmButtonColor en cancelButtonColor eigenschappen. De standaardkleur voor de bevestigingsknop is # 3085d6, terwijl de standaardkleur voor de annuleerknop is #aaa. Als u een andere aanpassing op de knoppen voor bevestigen of annuleren wilt toepassen, kunt u eenvoudig de confirmButtonClass en cancelButtonClass eigenschappen om een nieuwe klasse toe te voegen. Zodra de klassen zijn toegevoegd, kunt u CSS gebruiken om het uiterlijk van die knoppen te wijzigen. U kunt ook een klasse toevoegen aan het hoofdmodaal zelf met behulp van de CustomClass eigendom.
Als u in het eerste voorbeeld met de waarschuwingsberichten hebt gewerkt, is het u wellicht opgevallen dat de modaliteiten kunnen worden gesloten door op de knop te drukken invoeren of Ontsnappen sleutel. Op dezelfde manier kun je ook ergens buiten het modale klikken om het te negeren. Dit gebeurt omdat de waarde van allowEnterKey, allowEscapeKey, en allowOutsideClick ingesteld op waar standaard.
Als u twee verschillende knoppen in een modaal toont, is de bevestigingsknop degene die standaard in focus is. U kunt de focus verwijderen van de bevestigingsknop door de waarde in te stellen van focusConfirm naar vals. Op dezelfde manier kunt u ook de focus instellen op de knop Annuleren door de waarde in te stellen van focusCancel naar waar.
De bevestigingsknop wordt standaard altijd aan de linkerkant weergegeven. U hebt de mogelijkheid om de posities van de knoppen voor bevestigen en annuleren om te keren door de waarde in te stellen reverseButtons naar waar.
Naast het wijzigen van de positie en kleur van knoppen in de waarschuwingsberichten, kunt u ook de achtergrond en positie van het waarschuwingsbericht of de achtergrond eromheen wijzigen. Niet alleen dat, maar de bibliotheek biedt u ook de mogelijkheid om uw eigen aangepaste pictogrammen of afbeeldingen in de waarschuwingsberichten weer te geven. Dit kan in veel situaties nuttig zijn.
U kunt de achtergrond van een zoet alarm aanpassen met behulp van de backdrop eigendom. Deze eigenschap accepteert een Booleaanse waarde of een tekenreeks als waarde. De achtergrond van een waarschuwingsbericht bestaat standaard uit voornamelijk transparante grijze kleuren. U kunt het volledig verbergen door de waarde in te stellen van backdrop naar vals. Op dezelfde manier kunt u ook uw eigen afbeeldingen op de achtergrond weergeven door de backdrop waarde als een tekenreeks. In dergelijke gevallen is de gehele waarde van de backdrop string is toegewezen aan de CSS achtergrond eigendom. De achtergrond van een zoet waarschuwingsbericht kan worden beheerd met behulp van de achtergrond eigendom. Alle waarschuwingsberichten hebben standaard een volledig witte achtergrond.
Alle waarschuwingsberichten verschijnen standaard in het midden van het venster. U kunt ze echter vanaf een andere locatie laten verschijnen met behulp van de positie eigendom. Deze eigenschap kan negen verschillende waarden hebben met voor zichzelf sprekende namen: top, top-start, de beste, centrum, center-start, center-end, bodem, bottom-start, en onderkant.
U kunt de animatie uitschakelen wanneer een modaal verschijnt door de waarde van de animatie eigendom aan vals. De bibliotheek biedt ook een timer eigenschap die kan worden gebruikt om de timer automatisch te sluiten wanneer een bepaald aantal milliseconden is verstreken.
In het volgende voorbeeld heb ik verschillende combinaties van alle eigenschappen gebruikt die in deze sectie worden besproken om vier verschillende waarschuwingsberichten te maken. Dit zou moeten aantonen hoe je het uiterlijk en het gedrag van een modal gemaakt door de SweetAlert2-bibliotheek volledig kunt veranderen.
document.querySelector (". eerste"). addEventListener ("klik", functie () swal (title: "Toon twee knoppen binnen de melding", showCancelButton: true, confirmButtonText: "Confirm", confirmButtonColor: "# 00ff99" , cancelButtonColor: "# ff0099");); document.querySelector (". tweede"). addEventListener ("klik", functie () swal (title: "Weet u zeker dat u dit bestand wilt verwijderen?", typ: "info", showCancelButton: true, confirmButtonText: "Verwijderen It ", confirmButtonColor:" # ff0055 ", cancelButtonColor:" # 999999 ", reverseButtons: true, focusConfirm: false, focusCancel: true);); document.querySelector (". third"). addEventListener ("klik", functie () swal (title: "Profile Picture", tekst: "Wilt u van de bovenstaande afbeelding uw profielfoto maken?", 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", cancelButtonColor: "# 999999", reverseButtons: true,);); document.querySelector (". fourth"). addEventListener ("klik", functie () swal (title: "Alert Set on Timer", tekst: "Dit alarm verdwijnt na 3 seconden.", positie: "bottom" , achtergrond: "lineair verloop (geel, oranje)", achtergrond: "wit", allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, showConfirmButton: false, showCancelButton: false, timer: 3000);); Het initialiseren van verschillende zoete waarschuwingsberichten om ze aan gebruikers te laten zien, is één ding, maar soms hebt u ook toegang nodig tot methoden die het gedrag van die waarschuwingsberichten na de initialisatie bepalen. Gelukkig biedt de SweetAlert2-bibliotheek vele methoden die kunnen worden gebruikt om een modaal te tonen of te verbergen, evenals de titel, tekst, afbeelding, enz..
U kunt controleren of een modaal zichtbaar of verborgen is met behulp van de is zichtbaar() methode. U kunt ook een open modaal programmatisch sluiten met behulp van de dichtbij() of closeModal () methoden. Als u dezelfde set eigenschappen voor meerdere waarschuwingsberichten tijdens de initialisatie gebruikt, kunt u eenvoudig de setDefaults ( configurationObject)methode in het begin om de waarde van al deze eigenschappen tegelijk in te stellen. De bibliotheek biedt ook een resetDefaults () methode om alle eigenschappen opnieuw in te stellen naar hun standaardwaarden.
Je kunt de titel, inhoud en afbeelding van een modaal krijgen met behulp van de getTitle (), Inhoud krijgen(), en getImage () methoden. Op dezelfde manier kunt u ook de HTML krijgen die de bevestigings- en annuleerknoppen vormt met behulp van de getConfirmButton () en getCancelButton () methoden.
Er zijn veel andere methoden die kunnen worden gebruikt om andere taken uit te voeren, zoals programmatisch klikken op de knoppen Bevestigen of Annuleren.
De SweetAlert2-bibliotheek maakt het zeer eenvoudig voor ontwikkelaars om aangepaste waarschuwingsberichten te maken voor hun gebruikers door simpelweg de waarden van een paar eigenschappen in te stellen. Deze zelfstudie was bedoeld om de basis van deze bibliotheek te bespreken, zodat u snel uw eigen aangepaste waarschuwingsberichten kunt maken.
Om te voorkomen dat de post te groot wordt, heb ik alleen de meest gebruikte methoden en eigenschappen behandeld. Als u wilt lezen over alle andere methoden en eigenschappen die kunnen worden gebruikt om geavanceerde waarschuwingsberichten te maken, moet u de gedetailleerde documentatie van de bibliotheek doornemen.
Vergeet niet om ook de andere JavaScript-bronnen te bekijken die we beschikbaar hebben op de Envato-markt.
Laat het me weten als er iets is dat je wilt dat ik verduidelijk in deze tutorial.
