Hola a todos, les dejo una guía para cambiar las tipicas alertas de mucore en el modulo registro por notificaciones de notify js

Imágen previa de como se verían las notificaciones en lugar de alertas:

Posición global:


Posición en un elemento:



Bien, para comenzar, nos vamos a descargar el plugin desde la página oficial:
https://notifyjs.com/

y bajaremos notify.min.js (la versión comprimida) en este caso ya que no vamos a ir mas allá que usar el plugin.


Tambien vamos a necesitar jQuery, entonces vamos a la página oficial:
https://jquery.com/

le damos al botón Download jQuery.
y bajaremos la ultima versión comprimida, en mi caso para el dia de la fecha que hago esta guía es la versión 3.2.1



Listo, teniendo los dos archivos .js, nos vamos a nuestra mucore e ingresamos a la carpeta js y metemos los archivitos ahí.




Ahora se viene lo bueno, vamos a nuestra mucore nuevamente e ingresamos en la carpeta pages_modules y abrimos register.php (nuestro módulo de registro) para empezar a modificarlo así lograr cambiar las alertas por notify js.
Pueden abrirlo con cualquier editor de texto, yo de preferencia uso Sublime Text 3, pero pueden usar hasta el notepad de windows :)



Ahora bajamos hasta el primero echo ' en mi caso es en la linea 19 y dentro de ese echo ' vamos a llamar a los scripts que acabamos de descargar, de esta manera:

Code: [Select]

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/notify.min.js"></script>

imagen de como quedó:


Si se fijan en el src="..." ahí dentro de las comillas decimos en donde están ubicados nuestros archivos, en nuestro caso es dentro de la carpeta js y el nombre del archivo.

Listo ahora para ver si funciona correctamente, vamos a modificar un alerta.
En mi caso voy a tomar el primer alerta que sale al darle click en el botón submit de registro cuando todos los campos están vacíos.
Que está dentro de la función parse_inputs()
que es el siguiente:


Para probar, vamos a cambiar la palabrita alert por $.notify
quedando de la siguiente manera:

Code: [Select]

if (document.sign_up_frm.userid.value.length < 4){
		$.notify(\'User ID, 4-12 characters\n(letters and numbers only)\');
		return false;
	}

Ahora vamos a nuestra página de registro y sin rellenar ningún campo simplemente le vamos a dar al botón para registrarnos y en vez de salirnos un alerta, nos debería salir ya la notificación de notify.js


Si se fijan, salió arriba a la derecha.
Y así pueden modificar todas las alertas del archivo e ir probando.

Ahora les voy a enseñar un poco a modificar las alertas.
despues del cierre de la comilla del alert, que sería el que voy a marcar en rojo

$.notify(\'User ID, 4-12 characters\n(letters and numbers only)\');

vamos a escribir una coma "," y seguidamente abrir llaves "{}" y dentro de las llaves, vamos a configurar nuestra notificación.
por ejemplo cambiar el estilo de nuestra notificación sería con className y podemos usar los siguientes tipos de clases
error, success, warn e info.
por ejemplo voy a usar una de info de la siguiente manera

$.notify(\'User ID, 4-12 characters\n(letters and numbers only)\', {
  className:"info"
});

quiero aclarar que no hace falta hacer saltos de linea, puede ir todo en una misma linea por ejemplo:
$.notify(\'User ID, 4-12 characters\n(letters and numbers only)\', {className:"info"});

podemos agregar más como por ejemplo la posición, pero ojo, cada opción debe ir separada por coma.
por ejemplo:

$.notify(\'User ID, 4-12 characters\n(letters and numbers only)\', {
  className:"info",
  globalPosition: "bottom left"
});

ahora voy a probar de nuevo mi notifiación a ver que tal va quedando...

Wow, hermosa xD.

Okey, acá les dejo una lista de las opciones que pueden usar, recuerden separarlas por coma.

Code: [Select]

{
  // whether to hide the notification on click
  clickToHide: true,
  // whether to auto-hide the notification
  autoHide: true,
  // if autoHide, hide after milliseconds
  autoHideDelay: 5000,
  // show the arrow pointing at the element
  arrowShow: true,
  // arrow size in pixels
  arrowSize: 5,
  // position defines the notification position though uses the defaults below
  position: '...',
  // default positions
  elementPosition: 'bottom left',
  globalPosition: 'top right',
  // default style
  style: 'bootstrap',
  // default class (string or [string])
  className: 'error',
  // show animation
  showAnimation: 'slideDown',
  // show animation duration
  showDuration: 400,
  // hide animation
  hideAnimation: 'slideUp',
  // hide animation duration
  hideDuration: 200,
  // padding between element and notification
  gap: 2
}

Aclaro que todo esto se puede encontrar en la página oficial de notify js ya mencionada al principio del post.

Para terminar les voy a enseñar a mostrar la notifiación en un elemento.
para eso vamos a ir de nuevo al codigo de nuestro alert que había quedado así:

$.notify(\'User ID, 4-12 characters\n(letters and numbers only)\', {
  className:"info",
  globalPosition: "bottom left"
});

y para empezar ya no vamos a usar el globalPosition. Si no que vamos a usar el elementPosition.

$.notify(\'User ID, 4-12 characters\n(letters and numbers only)\', {
  className:"info",
  elementPosition: "left"
});

notese que tambien cambie la posición a left para que salga del lado izquierdo de mi elemento...

Ahora vamos a poner justo despues del signo peso o signo dolar lo siguiente (".pos-demo") no hace falta que usen pos-demo, pueden llamarlo como ustedes quieran.

$(".pos-demo").notify(\'User ID, 4-12 characters\n(letters and numbers only)\', {
  className:"info",
  elementPosition: "left"
});

listo ahora al pos-demo que pusimos dentro de las comillas lo vamos a usar como clase de algun elemento, en mi caso voy a agarrar el input del botón submit que es el siguiente:

<input type="image" src="template/'.$core['config']['template'] .'/images/submit_btn.gif" onclick="return parse_inputs()">

y voy a meter la clase pos-demo quedando así:
<input class="pos-demo" type="image" src="template/'.$core['config']['template'] .'/images/submit_btn.gif" onclick="return parse_inputs()">

Guardamos cambios y con esto terminamos el tutorial:



Fuente:
https://notifyjs.com/

Muy excelente guia Xysad la verdad muy bien explicada y completa, te felicito (Y)

:O Cosas como estas marcan la diferencia de otros foros :)
Hay que seguir haciendo post propios y no copy paste ♥
espero luego implementarlo en mi MUCORE :)
Gracias

EDITO: Podrias poner los codigos no de colores sino en un CODE asi nadie tendra problemas, pero igual se entiende pero siempre esta el que no puede implementarlo xd
Luego de implementarlo en mi MUCORE edito este comentario y comento si me funciono :)

Gracias Azz, espero que te funcione. Y puse algunos códigos sin las etiquetas code porque quería remarcar parte del código.
Saludos!