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:

  1. Descargar la librería desde: http://alertifyjs.com/
    • Download
  2. En Scriptcase crear una Librería externa llamada alertifyjs ó el nombre que prefieras
    • Herramientas à Librerías Externas à Crear una nueva librería
  3. 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
  4. Activar la librería externa (¡no olvidar!)
    • Clic sobre Usar librería
  5. 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

Observa como en el siguiente video

You might also like…

Te pagan por tu sistema no por el código

En el mundo empresarial el tiempo es un factor determinante, dado que puede provocar ganancias o ta...

Do they pay for your system or code?

For all those who develop systems and softwares every day at work: Have you ever wondered what make...

What is Business Intelligence anyways?

Surely you have listened about the expression, “BI” or “Business Intelligence”, the questio...

You might also like…

Get new posts, resources, offers and more each week.

We will use the information you provide to update you about our Newsletter and Special Offers. You can unsubscribe any time you want by clinck in a link in the footer of any email you receive from us, or by contacting us at sales@scriptcase.net. Learn more about our Privacy Police.