Questo articolo è un articolo speculare di traduzione automatica, clicca qui per saltare all'articolo originale.

Vista: 20094|Risposta: 2

[HTML/HTML5] Una bellissima casella di messaggi di allerta SweetAlert

[Copiato link]
Pubblicato su 24/12/2015 12:00:48 | | | |





Sweet Alert è un bellissimo effetto di ricordo che sostituisce il tradizionale Javascrip{filter}t Alert. SweetAlert centra e allinea automaticamente al centro della pagina, quindi appare bene sia che tu stia usando un computer desktop, telefono o tablet. Inoltre, è disponibile un'ampia gamma di opzioni di configurazione personalizzate per un controllo flessibile.

Come utilizzare:

Introduzione:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
Poi, un esempio semplice:

swal({ titolo: "Errore!", testo: "Ecco il mio messaggio di errore!", digita: "errore", confermaButtonText: "Cool" });
Pacchetto file allegato: sweetalert-master.zip (650.13 KB, Numero di download: 9, 售价: 2 粒MB)

Discussione
Valore predefinito

Descrip{filter}tion
Titolonull (obbligatorio)Il titolo del modale. Può essere aggiunto all'oggetto sotto la chiave "titolo" oppure passato come primo parametro della funzione.
TestonulloA descrip{filter}tion per il modale. Può essere aggiunto all'oggetto sotto il tasto "testo" oppure passato come secondo parametro della funzione.
digitarenulloIl tipo del modale. SweetAlert è disponibile con 4 tipi integrati che mostreranno un'animazione corrispondente di icona: "Avviso", "Errore", "Successo" e "info". Puoi anche impostarlo come "Input"Per ottenere un modulo prompt. Può essere inserito nell'oggetto sotto la chiave "type" oppure passato come terzo parametro della funzione.
allowEscapeKeytrueSe impostato atrue, l'utente può annullare il modale premendo il tasto Escape.
Classe personalizzatanulloUna classe CSS personalizzata per il modale. Può essere aggiunto all'oggetto sotto la chiave "customClass".
allowOutsideClickfalseSe impostato atrue, l'utente può annullare il modale cliccando fuori di esso.
mostraAnnullaPulsantefalseSe impostato atrue, verrà mostrato un pulsante "Annulla", su cui l'utente potrà cliccare per annullare il modale.
mostraConfermaPulsantetrueSe impostato afalse, il pulsante "OK/Conferma" sarà nascosto. Assicurati di impostare un timer o di impostare allowOutsideClick su true quando usi questa cosa, per non infastidire l'utente.
confirmButtonText"OK"Usa questo per cambiare il testo sul pulsante "Conferma". Se showCancelButton è impostato come true, il pulsante di conferma mostrerà automaticamente "Conferma" invece di "OK".
confirmButtonColor"#AEDEF4"Usa questo per cambiare il colore di sfondo del pulsante "Conferma" (deve essere un valore HEX).
cancelButtonText"Annulla"Usa questo per cambiare il testo sul pulsante "Annulla".
closeOnConfermatrueImpostato afalsese vuoi che il modale rimanga aperto anche se l'utente preme il pulsante "Conferma". Questo è particolarmente utile se la funzione collegata al pulsante "Conferma" è un altro SweetAlert.
closeOnCanceltrueStessa cosa con closeOnConfirm, ma per il pulsante cancella.
imageUrlnulloAggiungi un'icona personalizzata per il modale. Dovrebbe contenere una stringa con il percorso verso l'immagine.
imageSize"80x80"Se imageUrl è impostato, puoi specificare imageSize per indicare quanto vuoi che sia grande l'icona in px. Passa una stringa con due valori separati da una "x". Il primo valore è la larghezza, il secondo è l'altezza.
timernulloChiudi automaticamente il timer del modale. Impostato in ms (millisecondi).
HTMLfalseSe impostato su true, non sfugge ai parametri di titolo e testo. (Impostalo su false se ti preoccupano gli attacchi XSS.)
AnimazionetrueSe impostato afalse, l'animazione del modale sarà disabilitata. Valori possibili (stringa):pop(predefinito quando l'animazione è impostata su vero),Scivola dall'alto, Scorrimento dal basso
inputType"testo"Cambia il tipo del campo di input quando si utilizzatype: "input"(Questo può essere utile se vuoi che gli utenti digitino la loro password, ad esempio).
inputPlaceholdernulloQuando si utilizza il tipo di input, puoi specificare un segnaposto per aiutare l'utente.
inputValuenulloSpecifica un valore di testo predefinito che vuoi che il tuo input mostri quando lo usitype: "input"
showLoaderOnConfirmfalseImpostato atrueper disabilitare i pulsanti e mostrare che qualcosa si sta caricando.





Precedente:HTTPS Queste cose (1) Principio HTTPS (Ristampa)
Prossimo:Captcha della pagina ASP vs. MVC
 Padrone di casa| Pubblicato su 25/02/2017 18:36:23 |
Pubblicato su 08/12/2017 15:20:55 |
Anche il telaio pop di Layui è piacevole da usare
Disconoscimento:
Tutto il software, i materiali di programmazione o gli articoli pubblicati dalla Code Farmer Network sono destinati esclusivamente all'apprendimento e alla ricerca; I contenuti sopra elencati non devono essere utilizzati per scopi commerciali o illegali, altrimenti gli utenti dovranno sostenere tutte le conseguenze. Le informazioni su questo sito provengono da Internet, e le controversie sul copyright non hanno nulla a che fare con questo sito. Devi eliminare completamente i contenuti sopra elencati dal tuo computer entro 24 ore dal download. Se ti piace il programma, ti preghiamo di supportare software autentico, acquistare la registrazione e ottenere servizi autentici migliori. In caso di violazione, vi preghiamo di contattarci via email.

Mail To:help@itsvse.com