SweetAlert.js: una alternativa más bonita y flexible a alert(0)
Los sitios web se han convertido en aplicaciones más completas y complejas con el tiempo. Las interacciones del sitio web a menudo se confirman con una alerta. La advertencia estándar del navegador es suficiente para la mayoría de los casos; sin embargo, se ve bastante terrible. Con SweetAlert, puedes crear fácilmente alertas animadas que, además, brindan más funciones que el aburrido estándar.
Incluya SweetAlert y comience
SweetAlert proviene del desarrollador con sede en Estocolmo Tristan Edwards, cuya página de inicio es, por cierto, un buen ejemplo de desplazamiento. SweetAlert se lanzó bajo la licencia MIT, lo que significa que es totalmente gratuito. Está hecho a partir de un archivo JavaScript y CSS y no tiene dependencias. Comenzar es bastante fácil: además del archivo JavaScript, debe incluir un archivo de hoja de estilo, que contiene todos los estilos de alerta, en el documento HTML. Luego puede llamar a varias alertas a través de «swal()».
swal("Das hat schon mal geklappt.");
Para crear un cuadro de diálogo de alerta simple, todo lo que necesita hacer es titular el método con el texto que desea que se muestre. Se agregará automáticamente un botón Aceptar para cerrar/confirmar el cuadro de diálogo. Si desea texto adicional en el cuadro de diálogo, debe agregar otro parámetro en la llamada «swal()».
swal("Das hat schon mal geklappt.", "Aber warum?");
Diferentes tipos de alertas Swal
Además de la alerta de información simple, hay otras con iconos que, según el tipo, son animados o estáticos. Puede elegir entre alertas de «advertencia» con un signo de exclamación y alertas que señalan un «error» o «éxito». Defina el tipo como un tercer parámetro.
swal("Das hat schon mal geklappt.", "Aber warum?", "success");
En lugar de usar la notación abreviada, también puede emplear la forma larga donde todos los parámetros se definen y pasan como un objeto literal. Si desea pasar más valores que los de título, texto y tipo al método «swal()», es obligatorio un objeto literal.
swal({
"title:" "Das hat schon mal geklappt.",
"text:" "Aber warum?",
"type": "success"
});
En algunos casos, un botón de cierre no es suficiente para una alerta, especialmente cuando se usa para confirmar la ejecución de una determinada función. Luego debe agregar un botón cancelar al botón Aceptar.
swal({
"title": "E-Mail senden",
"text": "Wollen Sie die E-Mail wirklich senden?",
"type": "warning",
"showCancelButton": true
}, function() {
…
});
Para integrar un botón de cancelar, establezca la opción «showCancelButton» en «true». Una función que se ejecuta cuando hace clic en el botón Aceptar debe pasarse como segundo parámetro después del objeto literal con la configuración.
En el ejemplo anterior, al hacer clic en el botón Cancelar se cierra el cuadro de diálogo. Al hacer clic en el botón Aceptar se ejecuta la función mostrada.
Crear Alertas Múltiples con Swal
SweetAlert también crea múltiples alertas. Esto significa que podría agregar dos alertas más al ejemplo anterior que aparecen al hacer clic en uno de los botones: Cancelar o Aceptar.
swal({
"title": "E-Mail senden",
"text": "Wollen Sie die E-Mail wirklich senden?",
"type": "warning",
"showCancelButton": true,
"closeOnConfirm": false,
"closeOnCancel": false
}, function(isConfirm) {
if (isConfirm) {
swal({
"title": "E-Mail wurde versandt.",
"type": "success"
});
} else {
swal({
"title": "E-Mail wurde nicht versandt.",
"type": "error"
});
}
});
Las opciones “closeOnConfirm” y “closeOnCancel” evitan que la alerta se cierre al hacer clic en un botón. En su lugar, aparece otra alerta, según el botón en el que haga clic. Una solicitud «si» ayuda a detectar en qué botón se hizo clic. La variable «isConfirm» en el ejemplo se establece en verdadero si se hizo clic en el botón Aceptar. Por supuesto, las múltiples alertas pueden volver a ejecutar funciones.
Personaliza el estilo de las alertas
El estilo estándar de “SweetAlert” es sin duda agradable, pero no siempre combina con proyectos personalizados. Puede personalizar el diseño a través de la hoja de estilo a su gusto. Sin embargo, si no se siente seguro al hacer esto, al menos puede cambiar el color de los botones Aceptar. Por supuesto, los nombres de los botones también se pueden cambiar a su gusto.
swal({
"title": "E-Mail senden",
"text": "Wollen Sie die E-Mail wirklich senden?",
"type": "warning",
"confirmButtonColor": "#000000",
"confirmButtonText": "Ja",
"imageUrl": "icon.png",
"imageSize": "100x100"
});
Si desea cambiar los iconos estándar, puede definir su propio archivo gráfico. “imageSize” determina el tamaño del gráfico en la alerta.
“SweetAlert” para Android y Bootstrap
JavaScript SweetAlert no solo está disponible para proyectos web clásicos, sino también para aplicaciones de Android. También hay una versión especial que funciona con Bootstrap. Todas las versiones tienen la licencia MIT y se pueden usar de forma gratuita.
#SweetAlertjs #una #alternativa #más #bonita #flexible #alert0