Personalización de mensajes de alerta con AlertifyJS
(1a Parte) dentro de aplicación Blank
Cuando realizamos alertas en nuestro navegador con alert() de JS, se quedan cortas en relación a la personalización de las mismas, y de igual forma el usuario puede optar a indicar que ya no se muestren y de esta forma alterar el funcionamiento óptimo de nuestro sistema.
Es por ello que te mostrare como trabajar con el framework de javascript llamado AlertifyJS, el cual nos permite customizar de manera tal que nuestros mensajes de alerta a los usuarios sean bastante atractivas y funcionales
Utilizando la CDN de AlertifyJS en una aplicación blank
Por ser un framework de javascript es necesario que este dentro de la estructura de HTML en este caso dentro de HTML5 y por ende este código cerrarlo con los tag de PHP, como se muestra a continuación:
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>AlertifyJS con Scriptcase</title>
</!-- En esta área se llaman las CDN de AlertifyJS -->
</head>
<body>
</!-- En esta área se coloca el código de AlertifyJS -->
</body>
</html>
<?php
Resultado
Utilizando AlertifyJS desde una librería externa en una aplicación blank
Trabajar con CDN es bastante rápido y funcional al momento para realizar pruebas, pero lo más recomendable es tener nuestras librerías siempre en el mismo alojamiento y de esta forma estar confiado que siempre estará disponible y con mayor rapidez de acceso a la misma, es por ello que agregaremos esta librería en nuestro proyecto dentro de ScriptCase
Para ello lo realizamos siguiendo los pasos a continuación:
- Descargar la librería desde: http://alertifyjs.com/
- Download
- En Scriptcase crear una Librería externa llamada alertifyjs ó el nombre que prefieras
- Herramientas à Librerías Externas à Crear una nueva librería
- Cargar el framework de AlertifyJS
- Clic en el botón Upload y arrastras el ZIP descargado en el paso 1 ó puedes buscar la ruta de carga del mismo, luego cierras la ventana
- Activar la librería externa (¡no olvidar!)
- Clic sobre Usar librería
- Resultado final
De la misma forma que utilizamos la estructura de HTML procedemos con la misma estructura con la variante que ahora Re-direccionamos con la macro sc_url_library hacia la ubicación interna dentro de nuestro Scriptcase.
Ejemplo:
<!-- JavaScript -->
<script src="<?php echo sc_url_library('prj', 'alertifyjs_demo', 'alertify.min.js'); ?>"></script>
<!-- Css -->
<link rel="stylesheet" href="<?php echo sc_url_library('prj', 'alertifyjs_demo', 'css/alertify.min.css'); ?>">
El código completo queda de la siguiente manera:
Resultado
Revisa en la documentación del sitio todas las variantes que puedes lograr, en la 2da parte veremos cómo poder incorporarlo dentro de Aplicaciones formularios y Grid
Vea más contenido en nuestro blog.
También podría gustarte…