Share
Din când în când, va trebui să afișați o casetă de alertă utilizatorilor dvs. pentru a le informa despre o eroare sau o notificare. Problema cu casetele de alertă implicite furnizate de browsere este că nu sunt foarte atractive. Când creați un site web cu combinații excelente de culori și o animație fantezistă pentru a îmbunătăți experiența de navigare a utilizatorilor dvs., cutiile de alertă neuniforme vor părea inutile.
În acest tutorial, veți afla despre o bibliotecă numită SweetAlert2 care ne permite să creați tot felul de mesaje de alertă care pot fi personalizate pentru a se potrivi cu aspectul site-ului nostru.
Înainte de a putea afișa tuturor utilizatorilor mesajele de alertă dulci, va trebui să instalați biblioteca și să o includeți în proiect. Dacă utilizați NPM sau umbrar, îl puteți instala executând următoarele comenzi:
nstall instalare sweetalert2 bower instalare sweetalert2
Puteți obține, de asemenea, un link CDN pentru cea mai recentă versiune a bibliotecii și includeți-o în pagina web folosind etichete de script:
Pe lângă fișierul JavaScript, va trebui să încărcați și un fișier CSS care este folosit pentru a modela toate casetele de alertă create de bibliotecă:
Odată ce ați instalat biblioteca, crearea unei alerte dulci este de fapt foarte ușoară. Tot ce trebuie să faceți este să apelați swal () funcţie. Asigurați-vă că funcția este apelată după încărcarea DOM-ului.
Există două moduri de a crea o alertă dulce folosind swal () funcţie. Puteți trece fie titlul, textul corpului și valoarea pictogramei în trei argumente diferite, fie puteți transmite un singur argument ca un obiect cu valori diferite ca perechi cheie-valoare. Transmiterea totului într-un obiect este utilă atunci când doriți să specificați valori pentru mai multe argumente.
Când este trecut un singur argument și este un șir, alerta dulce va afișa doar un titlu și un buton OK. Utilizatorii vor putea face clic pe oriunde în afara alertei sau pe butonul OK pentru ao respinge.
Când se transmit două argumente, primul devine titlul, iar al doilea devine textul din interiorul alertei. De asemenea, puteți afișa o pictogramă în caseta de alertă prin trecerea unui al treilea argument. Aceasta poate avea oricare dintre cele cinci valori predefinite: avertizare, eroare, succes, info, și întrebare. Dacă nu treceți al treilea argument, în interiorul mesajului de alertă nu va fi afișată nicio pictogramă.
Accentsconagua
document.querySelector ("prima") addEventListener ('click', function () swal ("Primul nostru Alert");); document.querySelector (". second") addEventListener ('click', function () swal ("Primul nostru Alert", "Cu un text corp!"); document.querySelector ("a treia") addEventListener ("clic", funcția () swal ("Primul nostru Alert", "Cu un text corp și o pictogramă de succes!", "succes");Dacă doriți pur și simplu să afișați câteva informații de bază în interiorul unei casete de avertizare, exemplul anterior va face bine. Cu toate acestea, biblioteca poate să facă mai mult decât să arăte pur și simplu utilizatorilor un text în interiorul unui mesaj de alertă. Puteți schimba fiecare aspect al acestor mesaje de alertă pentru a se potrivi nevoilor dvs..
Am acoperit deja titlul, textul și pictogramele din interiorul unui mesaj de avertizare dulce. Există, de asemenea, o opțiune de a schimba butoanele din interiorul acesteia și de a le controla comportamentul. În mod prestabilit, o alertă va avea doar un singur buton de confirmare cu textul care spune "OK". Puteți schimba textul din butonul de confirmare prin setarea valorii confirmButtonText proprietate. Dacă doriți, de asemenea, să afișați un buton de anulare în mesajele dvs. de alertă, tot ce trebuie să faceți este să setați valoarea showCancelButton la Adevărat. Textul din interiorul butonului de anulare poate fi modificat folosind cancelButtonText proprietate.
Fiecare dintre aceste butoane poate primi o altă culoare de fundal folosind confirmButtonColor și cancelButtonColor proprietăți. Culoarea implicită pentru butonul de confirmare este # 3085d6, în timp ce culoarea implicită pentru butonul de anulare este #aaa. Dacă doriți să aplicați orice alte particularizări pe butoanele de confirmare sau de anulare, puteți folosi pur și simplu confirmButtonClass și cancelButtonClass proprietăți pentru a le adăuga o nouă clasă. Odată ce clasele au fost adăugate, veți putea utiliza CSS pentru a schimba aspectul acelor butoane. De asemenea, puteți adăuga o clasă pe modalitatea principală, folosind customClass proprietate.
Dacă ați interacționat cu mesajele de alertă din primul exemplu, este posibil să fi observat că modalele pot fi închise apăsând fie introduce sau Evadare cheie. În mod similar, puteți să faceți clic, de asemenea, oriunde în afara modalului, pentru a le elimina. Acest lucru se întâmplă din cauza valorii allowEnterKey, allowEscapeKey, și allowOutsideClick este setat sa Adevărat în mod implicit.
Când afișezi două butoane diferite într-un modal, butonul de confirmare este cel care se concentrează în mod implicit. Puteți elimina focalizarea din butonul de confirmare prin setarea valorii focusConfirm la fals. În mod similar, puteți seta focalizarea pe butonul de anulare prin setarea valorii focusCancel la Adevărat.
Butonul de confirmare este afișat întotdeauna în partea stângă, în mod implicit. Aveți opțiunea de a inversa pozițiile butoanelor de confirmare și de anulare prin setarea valorii reverseButtons la Adevărat.
În afară de schimbarea poziției și culorii butoanelor din interiorul mesajelor de alertă, puteți schimba și fundalul și poziția mesajului de alertă sau fundalul din jurul acestuia. Nu numai că, dar și biblioteca vă permite să afișați propriile pictograme personalizate sau imagini în mesajele de alertă. Acest lucru poate fi util în multe situații.
Puteți personaliza fundalul unei alerte dulci folosind fundal proprietate. Această proprietate acceptă fie valoarea booleană, fie șirul. Implicit, fundalul unui mesaj de avertizare constă în cea mai mare parte a culorii gri transparente. Puteți să o ascundeți complet prin setarea valorii fundal la fals. În mod similar, puteți afișa, de asemenea, propriile imagini în fundal prin setarea fundal valoare ca șir. În astfel de cazuri, întreaga valoare a fundal șir este atribuit CSS fundal proprietate. Fundalul unui mesaj de avertizare dulce poate fi controlat folosind fundal proprietate. Toate mesajele de alertă au în mod implicit un fundal complet alb.
Toate mesajele de alertă se afișează în mod implicit în centrul ferestrei. Cu toate acestea, le puteți face să apară dintr - o altă locație folosind poziţie proprietate. Această proprietate poate avea nouă valori diferite cu nume explicite: top, top start-, top-end, centru, centru de start, centru-end, fund, bottom start-, și capătul de jos.
Puteți dezactiva animația când apare o modalitate prin setarea valorii animaţie proprietate la fals. Biblioteca oferă, de asemenea, timer proprietate care poate fi utilizată pentru a închide automat cronometrul odată ce un anumit număr de milisecunde a trecut.
În următorul exemplu, am folosit combinații diferite ale tuturor proprietăților discutate în această secțiune pentru a crea patru mesaje de alertă diferite. Acest lucru ar trebui să demonstreze modul în care puteți schimba complet aspectul și comportamentul unui modal creat de biblioteca SweetAlert2.
document.querySelector ("prima") addEventListener ("clic", functie () swal (title: "Show Two Buttons Inside Alert", showButtonText: true, confirmButtonText: , cancelButtonColor: "# ff0099");); document.querySelector (". second") addEventListener ("faceți clic pe", funcția () swal (title: " ", ConfirmButtonColor:" # ff0055 ", cancelButtonColor:" # 999999 ", reversButtons: true, focusConfirm: false, focusCancel: true);); document.querySelector ("a treia") addEventListener ("click", functie () swal (title: "Picture Profile", text: https://images3.imgbox.com/4f/e6/wOhuryw6_o.jpg ", imagineWidth: 550, imageHeight: 225, imageAlt:" Eagle Image ", showAutorButton: true, confirmButtonText:" Yes ", cancelButtonText:" Nu ", confirmButtonColor: "# 00ff55", cancelButtonColor: "# 999999", reversButtons: true,);); document.querySelector ("a patra") addEventListener ("click", functie () swal (title: "Alert Set on Timer" , fundal: "gradient linear (galben, portocaliu)", fundal: "alb", allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, showConfirmButton: false, showCancelButton: false, timer: 3000); Inițializarea diferitelor mesaje de alertă dulci pentru a le arăta utilizatorilor este un lucru, dar uneori veți avea nevoie și de acces la metode care să controleze comportamentul acestor mesaje de alertă după inițializare. Din fericire, biblioteca SweetAlert2 oferă multe metode care pot fi folosite pentru a arăta sau a ascunde un modal, precum și a obține titlul, textul, imaginea etc..
Puteți verifica dacă un modal este vizibil sau ascuns utilizând este vizibil() metodă. De asemenea, puteți închide programatic o modalitate deschisă utilizând închide() sau closeModal () metode. Dacă întâmpinați același set de proprietăți pentru mai multe mesaje de alertă în timpul inițializării, puteți apela pur și simplu setDefaults (configurationObject)metoda de la început pentru a seta valoarea tuturor acelor proprietăți simultan. Biblioteca oferă, de asemenea, resetează modul implicit() pentru a reseta toate proprietățile la valorile lor implicite.
Puteți obține titlul, conținutul și imaginea unei modalități folosind getTitle (), getContent (), și getImage () metode. În mod similar, puteți obține și codul HTML care compune butoanele de confirmare și de anulare utilizând getConfirmButton () și getCancelButton () metode.
Există o mulțime de alte metode care pot fi utilizate pentru a efectua alte activități, cum ar fi clicuri programabile pe butoanele de confirmare sau de anulare.
Biblioteca SweetAlert2 face foarte ușor pentru dezvoltatori să creeze mesaje de alertă personalizate pentru a le arăta utilizatorilor prin setarea pur și simplu a valorilor câtorva proprietăți. Acest tutorial a fost destinat să acopere elementele de bază ale acestei biblioteci, astfel încât să puteți crea rapid propriile mesaje personalizate de alertă.
Pentru a împiedica postarea să devină prea mare, am abordat doar metodele și proprietățile cele mai frecvent utilizate. Dacă doriți să citiți despre toate celelalte metode și proprietăți care pot fi utilizate pentru a crea mesaje de alertă avansate, trebuie să treceți prin documentația detaliată a bibliotecii.
Nu uitați să verificați celelalte resurse JavaScript disponibile pe piața Envato.
Simțiți-vă liber să mă anunți dacă există ceva pe care doriți să-l clarificați în acest tutorial.
