Share
Di tanto in tanto, dovrai mostrare una casella di avviso ai tuoi utenti per informarli di un errore o di una notifica. Il problema con le caselle di avviso predefinite fornite dai browser è che non sono molto attraenti. Quando crei un sito Web con fantastiche combinazioni di colori e fantasiose animazioni per migliorare l'esperienza di navigazione dei tuoi utenti, le caselle di avviso senza stile sembreranno fuori posto.
In questo tutorial, imparerai a conoscere una libreria chiamata SweetAlert2 che ci consente di creare tutti i tipi di messaggi di avviso che possono essere personalizzati per adattarsi all'aspetto del nostro sito Web.
Prima di poter mostrare tutti quei messaggi di avviso dolci ai tuoi utenti, dovrai installare la libreria e includerla nel tuo progetto. Se stai usando npm o pergolato, puoi installarlo eseguendo i seguenti comandi:
npm installa sweetalert2 bower installa sweetalert2
Puoi anche ottenere un collegamento CDN per l'ultima versione della libreria e includerlo nella tua pagina web utilizzando i tag script:
Oltre al file JavaScript, dovrai anche caricare un file CSS che viene utilizzato per disegnare tutte le caselle di avviso create dalla libreria:
Una volta installata la libreria, la creazione di un avviso dolce è in realtà molto semplice. Tutto quello che devi fare è chiamare il swal () funzione. Assicurati che la funzione venga chiamata dopo che il DOM è stato caricato.
Ci sono due modi per creare un avviso dolce usando il swal () funzione. Puoi passare il titolo, il testo del corpo e il valore dell'icona in tre diversi argomenti oppure puoi passare un singolo argomento come un oggetto con valori diversi come coppie chiave-valore. Passare tutto in un oggetto è utile quando si desidera specificare valori per più argomenti.
Quando viene passato un singolo argomento e si tratta di una stringa, l'avviso dolce mostrerà solo un titolo e un pulsante OK. Gli utenti potranno fare clic ovunque fuori dall'avviso o sul pulsante OK per ignorarlo.
Quando vengono passati due argomenti, il primo diventa il titolo e il secondo diventa il testo all'interno dell'avviso. Puoi anche mostrare un'icona nella casella di avviso passando un terzo argomento. Questo può avere uno dei cinque valori predefiniti: avvertimento, errore, successo, Informazioni, e domanda. Se non si passa il terzo argomento, nessuna icona verrà mostrata all'interno del messaggio di avviso.
Accentsconagua
document.querySelector (". first"). addEventListener ('click', function () swal ("Our First Alert");); document.querySelector (". second"). addEventListener ('clic', function () swal ("Our First Alert", "With some body text!");); document.querySelector (". third"). addEventListener ("click", function () swal ("Our First Alert", "With some body text and success icon!", "success"););Se vuoi semplicemente mostrare alcune informazioni di base all'interno di una finestra di avviso, l'esempio precedente andrà bene. Tuttavia, la libreria può effettivamente fare molto di più che semplicemente mostrare agli utenti del testo all'interno di un messaggio di avviso. È possibile modificare ogni aspetto di questi messaggi di avviso in base alle proprie esigenze.
Abbiamo già coperto il titolo, il testo e le icone all'interno di un messaggio di avviso dolce. C'è anche un'opzione per cambiare i pulsanti al suo interno e controllarne il comportamento. Per impostazione predefinita, un avviso avrà un solo pulsante di conferma con il testo che dice "OK". È possibile modificare il testo all'interno del pulsante di conferma impostando il valore di confirmButtonText proprietà. Se vuoi anche mostrare un pulsante di cancellazione nei tuoi messaggi di avviso, tutto ciò che devi fare è impostare il valore di showCancelButton a vero. Il testo all'interno del pulsante Annulla può essere modificato utilizzando il cancelButtonText proprietà.
Ognuno di questi pulsanti può avere un diverso colore di sfondo usando il confirmButtonColor e cancelButtonColor proprietà. Il colore predefinito per il pulsante di conferma è # 3085d6, mentre il colore predefinito per il pulsante Annulla è #aaa. Se si desidera applicare qualsiasi altra personalizzazione sui pulsanti di conferma o annullamento, è possibile semplicemente utilizzare il pulsante confirmButtonClass e cancelButtonClass proprietà per aggiungere una nuova classe a loro. Una volta aggiunte le classi, sarà possibile utilizzare i CSS per modificare l'aspetto di quei pulsanti. Puoi anche aggiungere una classe sulla modale principale stessa usando il CustomClass proprietà.
Se hai interagito con i messaggi di avviso nel primo esempio, potresti aver notato che le modali possono essere chiuse premendo il tasto accedere o Fuga chiave. Allo stesso modo, puoi anche cliccare ovunque al di fuori del modal per poterlo eliminare. Questo succede perché il valore di allowEnterKey, allowEscapeKey, e allowOutsideClick è impostato per vero per impostazione predefinita.
Quando mostri due pulsanti diversi all'interno di una modale, il pulsante di conferma è quello che è a fuoco per impostazione predefinita. È possibile rimuovere la messa a fuoco dal pulsante di conferma impostando il valore di focusConfirm a falso. Allo stesso modo, è anche possibile impostare lo stato attivo sul pulsante Annulla impostando il valore di focusCancel a vero.
Il pulsante di conferma è sempre visualizzato sul lato sinistro per impostazione predefinita. Hai la possibilità di invertire le posizioni dei pulsanti conferma e annulla impostando il valore di reverseButtons a vero.
Oltre a modificare la posizione e il colore dei pulsanti all'interno dei messaggi di avviso, è inoltre possibile modificare lo sfondo e la posizione del messaggio di avviso o lo sfondo circostante. Non solo, ma la libreria ti consente anche di mostrare le tue icone o immagini personalizzate nei messaggi di avviso. Questo può essere utile in molte situazioni.
È possibile personalizzare lo sfondo di un avviso dolce utilizzando il fondale proprietà. Questa proprietà accetta come valore un booleano o una stringa. Per impostazione predefinita, lo sfondo di un messaggio di avviso è costituito prevalentemente da un colore grigio trasparente. Puoi nasconderlo completamente impostando il valore di fondale a falso. Allo stesso modo, puoi anche mostrare le tue immagini in background impostando il fondale valore come una stringa. In questi casi, l'intero valore del fondale la stringa è assegnata al CSS sfondo proprietà. Lo sfondo di un messaggio di avviso dolce può essere controllato utilizzando il sfondo proprietà. Tutti i messaggi di avviso hanno uno sfondo completamente bianco per impostazione predefinita.
Per impostazione predefinita, tutti i messaggi di avviso vengono visualizzati al centro della finestra. Tuttavia, puoi farli apparire da una posizione diversa usando il posizione proprietà. Questa proprietà può avere nove valori diversi con nomi che si spiegano da soli: superiore, top-start, top-end, centro, Centro-start, Centro-end, parte inferiore, bottom-start, e estremità inferiore.
È possibile disabilitare l'animazione quando viene visualizzata una modale impostando il valore di animazione proprietà a falso. La libreria fornisce anche a Timer proprietà che può essere utilizzata per chiudere automaticamente il timer una volta passato un determinato numero di millisecondi.
Nell'esempio seguente, ho utilizzato diverse combinazioni di tutte le proprietà discusse in questa sezione per creare quattro diversi messaggi di avviso. Questo dovrebbe dimostrare come è possibile modificare completamente l'aspetto e il comportamento di una modale creata dalla libreria SweetAlert2.
document.querySelector (". first"). addEventListener ("click", function () swal (title: "Mostra due pulsanti all'interno dell'avviso", showCancelButton: true, confirmButtonText: "Confirm", confirmButtonColor: "# 00ff99" , cancelButtonColor: "# ff0099");); document.querySelector (". second"). addEventListener ("click", function () swal (title: "Sei sicuro dell'eliminazione di questo file?", digita: "info", showCancelButton: true, confirmButtonText: "Elimina ", ConfirmButtonColor:" # ff0055 ", cancelButtonColor:" # 999999 ", reverseButtons: true, focusConfirm: false, focusCancel: true);); document.querySelector (". third"). addEventListener ("click", function () swal (title: "Immagine del profilo", testo: "Vuoi rendere l'immagine di cui sopra l'immagine del tuo profilo?", imageUrl: " https://images3.imgbox.com/4f/e6/wOhuryw6_o.jpg ", imageWidth: 550, imageHeight: 225, imageAlt:" Eagle Image ", showCancelButton: true, confirmButtonText:" Sì ", cancelButtonText:" No ", confirmButtonColor: "# 00ff55", cancelButtonColor: "# 999999", reverseButtons: true,);); document.querySelector (". fourth"). addEventListener ("click", function () swal (title: "Alert Set on Timer", testo: "Questo avviso scompare dopo 3 secondi.", posizione: "bottom" , sfondo: "linear-gradient (yellow, orange)", background: "white", allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, showConfirmButton: false, showCancelButton: false, timer: 3000);); L'inizializzazione di diversi messaggi di avviso dolci per mostrarli agli utenti è una cosa, ma a volte è necessario accedere ai metodi che controllano il comportamento di tali messaggi di avviso dopo l'inizializzazione. Fortunatamente, la libreria SweetAlert2 offre molti metodi che possono essere utilizzati per mostrare o nascondere un modale e ottenere il titolo, il testo, l'immagine, ecc..
Puoi verificare se una modale è visibile o nascosta usando il è visibile() metodo. Puoi anche chiudere a livello di codice una modale aperta usando il vicino() o closeModal () metodi. Se ti capita di utilizzare lo stesso insieme di proprietà per più messaggi di avviso durante la loro inizializzazione, puoi semplicemente chiamare il setDefaults ( configurationObject)metodo all'inizio per impostare il valore di tutte quelle proprietà contemporaneamente. La libreria fornisce anche a reimpostazione dei valori iniziali() metodo per ripristinare tutte le proprietà ai loro valori predefiniti.
Puoi ottenere il titolo, il contenuto e l'immagine di una modale usando il getTitle (), getContent (), e getImage () metodi. Allo stesso modo, è anche possibile ottenere l'HTML che compone i pulsanti di conferma e annullamento utilizzando il pulsante getConfirmButton () e getCancelButton () metodi.
Esistono molti altri metodi che possono essere utilizzati per eseguire altre attività, ad esempio facendo clic programmaticamente sui pulsanti di conferma o annullamento.
La libreria SweetAlert2 rende molto facile agli sviluppatori creare messaggi di avviso personalizzati da mostrare ai propri utenti semplicemente impostando i valori di alcune proprietà. Questo tutorial ha lo scopo di coprire le basi di questa libreria in modo da poter creare rapidamente i propri messaggi di avviso personalizzati.
Per evitare che il post diventasse troppo grande, ho solo coperto i metodi e le proprietà più comunemente utilizzati. Se si desidera leggere tutti gli altri metodi e proprietà che possono essere utilizzati per creare messaggi di avviso avanzati, è necessario consultare la documentazione dettagliata della libreria.
Non dimenticare di controllare anche le altre risorse JavaScript che abbiamo a disposizione sul mercato Envato.
Sentiti libero di farmi sapere se c'è qualcosa che vorresti che chiarissi in questo tutorial.
