Hola amig@s :$, experimentando con funciones de jQuery he logrado hacer un sistema de alertas instantáneo, que hace que dos típos de alertas (Verde, rojo... Si quieres, agregas más.) se muestren en la parte superior del sitio.
Sin más preámbulos, hagan click
aquí para que vean de qué se trata.
Bueno, comenzemos.
Primero: incluyan el siguiente código JavaScript en la etiqueta HEAD de tu código HTML.
<script type="text/javascript">
/* -- -- -- -- -- -- -- -- */ // Created by Atrix
/* T O P - A L E R T S */ // Funciona con jQuery
/* -- -- -- -- -- -- -- -- */ // Insertar este script en HEAD.
function top_alert(texto,color,img) {
$('#top_alerta_'+ color +'').fadeIn('slow'); // Mostramos alerta.
$('#top_alerta_'+ color +'').html('<img src='+ img +' align="left" style=margin:10px 0 0 5px;> '+ texto +''); // Escribimos la alerta.
}
function top_alert_out(color) {
$('#top_alerta_'+ color +'').slideToggle(1500); // Desaparecemos la alerta.
}
</script>
Segundo: Descarga las siguiente imágenes a tu servidor.
=> Este es el fondo rojo
=> Este es el fondo verde
=> Este es el icono de declaración verdadera.
=> Este es el icono de declaración falsa.
Tercero: en head igual o en un documento aparte ingrese el siguiente código CSS
<style type="text/css">
/* -- -- -- -- -- -- -- -- */ // Created by Atrix
/* T O P - A L E R T S */ // Hoja CSS
/* -- -- -- -- -- -- -- -- */ // Utiliza CSS3.
div#top_alerta_rojo {
background:url('link.png') repeat !important; /* MODIFICA LA URL AL ARCHIVO DE ORIGEN */
padding:13px;
text-shadow:rgba(0,0,0,0.20) 0 1px;
font-family:Arial;
color:white;
box-shadow:rgba(0,0,0,0.20) 0 0 10px;
position:fixed;
top:0;
width:100%;
margin:auto;
cursor:pointer;
display:none;
}
div#top_alerta_verde {
background:url('link.png') repeat !important; /* MODIFICA LA URL AL ARCHIVO DE ORIGEN */
padding:13px;
text-shadow:rgba(0,0,0,0.20) 0 1px;
font-family:Arial;
color:white;
box-shadow:rgba(0,0,0,0.20) 0 0 10px;
position:fixed;
top:0;
width:100%;
cursor:pointer;
display:none;
}
<style>
Cuarto: Dentro de body, colocar lo siguiente.
<!-- DIV'S TOP ALERT -->
<div id="top_alerta_rojo" onClick="top_alert_out('rojo');"></div>
<div id="top_alerta_verde" onClick="top_alert_out('verde');"></div>
<!-- / -->
Quinto: Disfrutarlo, con ayuda de eventos o ejecución por Script.
Pero antes, os detallo.
Los patrones que tiene top alerts son los siguientes.
top_alert("texto", "color", "imagen");
en
Texto pondrás el texto que quieres aparezca en la alerta.
en
Color El color que quieres que tenga la alerta (Sólo rojo o verde)
en
Imagen pondrás la dirección de la imagen que quieras apareza a la izquierda. En la descarga te dí dos imágenes. Puedes usarlas
Ahora te ejemplo una ejecución por evento
<input name="tester" type="submit" id="tester" value="Clickeame, y te daré una alerta Roja." onClick='top_alert("<b>Vez, funciona.</b><br>Ahora hazme click encíma y esto se cerrará.", "rojo", "icono_rojo.gif");'>
Ejemplo de ejecución por script
<script type="text/javascript">
top_alert("<b>Vez, funciona.</b><br>Ahora hazme click encíma y esto se cerrará.", "rojo", "icono_rojo.gif");
</script>
Para que no se
lien' les dejo el ejemplo en HTML.
<html>
<head>
<title>Probando Top alerts</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"> </script>
<script type="text/javascript">
/* -- -- -- -- -- -- -- -- */ // Created by Atrix
/* T O P - A L E R T S */ // Funciona con jQuery
/* -- -- -- -- -- -- -- -- */ // Insertar este script en HEAD.
function top_alert(texto,color,img) {
$('#top_alerta_'+ color +'').fadeIn('slow'); // Mostramos alerta.
$('#top_alerta_'+ color +'').html('<img src='+ img +' align="left" style=margin:10px 0 0 5px;> '+ texto +''); // Escribimos la alerta.
}
function top_alert_out(color) {
$('#top_alerta_'+ color +'').slideToggle(1500); // Desaparecemos la alerta.
}
</script>
<style type="text/css">
body {
margin:0;
padding:0;
font-size:11px;
font-family:"Trebuchet MS";
color:gray;
background:#DADADA;
}
div#top_alerta_rojo {
background:url('bg_rojo.png') repeat;
padding:13px;
text-shadow:rgba(0,0,0,0.20) 0 1px;
font-family:Arial;
color:white;
box-shadow:rgba(0,0,0,0.20) 0 0 10px;
position:fixed;
top:0;
width:100%;
margin:auto;
cursor:pointer;
display:none;
}
div#top_alerta_verde {
background:url('bg_verde.png') repeat;
padding:13px;
text-shadow:rgba(0,0,0,0.20) 0 1px;
font-family:Arial;
color:white;
box-shadow:rgba(0,0,0,0.20) 0 0 10px;
position:fixed;
top:0;
width:100%;
cursor:pointer;
display:none;
}
</style>
</head>
<!-- DIV'S TOP ALERT -->
<div id="top_alerta_rojo" onClick="top_alert_out('rojo');"></div>
<div id="top_alerta_verde" onClick="top_alert_out('verde');"></div>
<!-- / -->
<body>
<input name="tester" type="submit" id="tester" value="Clickeame, y te daré una alerta Roja." onClick='top_alert("<b>Vez, funciona.</b><br>Ahora hazme click encíma y esto se cerrará.", "rojo", "icono_rojo.gif");'>
<input name="tester" type="submit" id="tester" value="Clickeame, y te daré una alerta Verde." onClick='top_alert("<b>Vez, funciona.</b><br>Ahora hazme click encíma y esto se cerrará.", "verde", "icono_verde.gif");'>
<br>
Created by Atrix. - PHPeros.NET
Saludos
