Estaba leyendo el post de Sergio donde nos comenta sobre un snippet para visualizar/ocultar un Label.
El articulo de Sergio:
En el articulo utiliza la función setTimeout que tenemos disponible en javascript para disparar eventos en intervalos previamente asignados.
Yo tenia un post (de hace varios siglos) de un ejemplo que utilizamos con Lautaro, y se dio la oportunidad de publicarlo. Como no sabia el titulo para bautizarlo deje los dos:
- jQuery: Mensaje por x segundos idem Gmail.
- Visualizar/Ocultar un Label y/o Panel en ASP.NET por x segundos
Pero con jQuery?
Ya en la pagina principal de jQuery tenemos algo para vislumbrar “el potencial de su sencillez”, así que basado en ese ejemplo aqui para embeberlo en nuestras paginas ASP.NET
Descargar el proyecto de ejemplo
Para ayudar “jugando un poco”, el proyecto para descargar
Que lo que queremos lograr?
Un mensaje por x segundos, like Gmail 😉 … desvanecimiento…
Aquí utilizo un UserControl por comodidad pero esto es un firme candidato a WebControl.
Ejemplos
Para descargar el proyecto de ejemplo lo puedes hacer aquí, que consta de estos elementos:
El UserControl tiene algo? no nada simplemente hereda de una clase:
public partial class varios_Mensaje : YODA.Web.UI.MensajeBase { }
La clase bajo el namespace YODA.Web.UI contiene:
- Registrar los .js necesarios
- Agregar al contenido del UC (UserControl) un panel para contener el mensaje (Evento Init)
- y luego una serie de métodos que lo único que harán será escribir script del lado del cliente
El código:
namespace YODA.Web.UI { public abstract class MensajeBase : System.Web.UI.UserControl { protected Panel Contenedor; private string TemplateScriptMensajeArmar = "mensajeArmar('{0}','{1}','{2}');"; private string TemplateScriptMensajeArmarConTiempo = "mensajeArmar('{0}','{1}','{2}',{3});"; public MensajeBase() { // // TODO: Add constructor logic here // } protected void Page_Init(object sender, EventArgs e) { Contenedor = new Panel(); Contenedor.CssClass = "mensajeContenedor"; this.Controls.Add(Contenedor); } protected void Page_Load(object sender, EventArgs e) { //Registrando script ScriptManager.RegisterClientScriptInclude(this.Page, this.GetType(), "jQuery", ResolveClientUrl("~/js/jquery-1.3.2.min.js")); ScriptManager.RegisterClientScriptInclude(this.Page, this.GetType(), "YODA.Web.UI.Mensaje", ResolveClientUrl("~/js/YODA.Web.UI.Mensaje.js")); } /// <summary> /// Visualizar un mensaje /// </summary> /// <param name="Mensaje">Cadena de texto a visualizar</param> public void MostrarMensaje(String Mensaje) { Armar(Mensaje, 0, MensajeTipo.Normal); } /// <summary> /// Visualizar un mensaje /// </summary> /// <param name="Mensaje">Cadena de texto a visualizar</param> /// <param name="TiempoAVisualizar">Tiempo en milisegundos a visualizar el mensaje</param> public void MostrarMensaje(String Mensaje, Int32 TiempoAVisualizar) { Armar(Mensaje, TiempoAVisualizar, MensajeTipo.Normal); } public void MostrarMensaje(String Mensaje, Int32 TiempoAVisualizar, MensajeTipo Tipo) { Armar(Mensaje, TiempoAVisualizar, Tipo); } private void Armar(String Mensaje, Int32 TiempoAVisualizar, MensajeTipo Tipo) { String script = string.Empty; if (TiempoAVisualizar > 0) { script = String.Format(TemplateScriptMensajeArmarConTiempo, Contenedor.ClientID, Mensaje, Tipo.ToString(), TiempoAVisualizar); } else { script = String.Format(TemplateScriptMensajeArmar, Contenedor.ClientID, Mensaje, Tipo.ToString()); } //Registrando script ScriptManager.RegisterStartupScript(this, this.GetType(), "MensajeArmar", script, true); } } }
O sea la magia es jQuery que nos proporciona funcionalidades muy nutritivas para nuestras web :), en este ejemplo encapsule MensajeArmar en una función en el archivo YODA.Web.UI.Mensaje.js
Allí tendremos la ubicación del contenedor (en este caso un DIV ya que es el ID del Panel que incrustamos en el evento Init anteriormente) y luego manipulaciones de contenido HTML para armar algo que nos quede de esta forma:
<div id=Panel1_texto class=mensajeTexto> <span class='mensajeNormal mensajeTipoError'>Hola Mundo!</span> </div>
Que con los estilos correctos quedara de siguiente forma:
No nos vamos a poner exquisitos con el diseño, ya que es un simple ejemplo. Queda por parte del lector descargar el ejemplo y manipularlo a su antojo, por ejemplo que acepte un template para el tipo de mensaje (template HTML)
El código js:
//Visualizar el mensaje function mensajeArmar(contenedorId, mensaje, tipo, tiempoParaOcultar) { var contenedor = '#' + contenedorId; var contenedorTexto = '#' + contenedorId + '_texto' //Tipo de Mensaje: //por si queremos utilizar para definir mensajes de error, informacion, alertas... if (tipo == undefined) { tipo = 'Normal'; } var tipoMensajeCss = 'mensajeTipo'+tipo; if (tiempoParaOcultar == undefined) { tiempoParaOcultar = 4000; } $(contenedor).html('<div id=' + contenedorId + '_texto' + ' class=mensajeTexto><span class='mensajeNormal '+tipoMensajeCss + ''>' + mensaje + '</span></div>'); //boton cerrar (cualquier objeto con clase = cerrar $(contenedor + " .cerrar").click(function() { mensajeOcultar(); }) //visualizando el mensaje contenedor $(contenedorTexto).fadeIn(1000); //asignando el tiempo para ocultarlo setTimeout(mensajeOcultar, tiempoParaOcultar); } //Ocultar el mensaje function mensajeOcultar() { $('.mensajeTexto').fadeOut(2000); }
En la pagina (la única del proyecto) podremos ver los ejemplos
y bueno, empecemos…
Ejemplo 1: Básico
Simplemente visualizaremos el mensaje…en la ubicación que insertamos en la pagina el UserControl
El código:Mensaje1.MostrarMensaje("Hola Mundo!");
Ejemplo 2: Definiendo contenido
Enviamos un contenido de ejemplo, idem al anterior pero proponiendo el mensaje 🙂
El código del botón nos podemos imaginar como seria, para el que no:Mensaje1.MostrarMensaje(txtMensaje2.Text.Trim());
Ejemplo 3: Mensaje con botón cerrar
Aquí el botón cerrar hará uso de la funcion mensajeOcultar, que lo armo desde el codebehind asi:
Mensaje1.MostrarMensaje(txtMensaje2.Text.Trim() + ". <a href=# class=cerrar>Ocultar</a>");
Como vemos que solamente el enlace tiene la clase “cerrar” y asigno inyectando condigo con jQuery, esta linea se encuentra en el archivo YODA.Web.UI.Mensaje.js, en el método mensajeArmar
//boton cerrar (cualquier objeto con clase = cerrar $(contenedor + " .cerrar").click(function() { mensajeOcultar(); })
Ejemplo4: Con contenido HTML
Idem al ejemplo 2, pero aquí insertamos tags :O
Se visualiza
Ejemplo5: Con tipo de mensaje e icono 😉
Los tipos de mensaje insertan una clase CSS para asignar algo en particular, en este ejemplo solamente imágenes
Podríamos hacer con CSS algo mas? SI! pero no era el objetivo de este “extenso articulo”
Espero que les pueda servir de ayuda o guía.
Para descargar como les decia aquí
Excelente aporte! gracias
JQuery : Visualizando etiquetas durante x segundos