Esta es la primera vez que visité el desbordamiento de pila y vi un hermoso mensaje de encabezado que muestra un texto y un botón de cerrar.Mensaje de encabezado como en Stack Overflow
La barra de encabezado es fija y es ideal para llamar la atención del visitante. Me preguntaba si alguno de ustedes sabe el código para obtener el mismo tipo de barra de encabezado.
El css relevante incluiría:
position: fixed;
top: 0;
width: 100%;
More information about position:fixed:
Un elemento con posición: fijo se coloca en el especificado coordenadas relativas a la ventana del navegador. La posición del elemento se especifica con las propiedades "izquierda", "superior", "derecha" e "inferior". El elemento permanece en esa posición independientemente del desplazamiento. Funciona en IE7 (modo estricto)
Si la compatibilidad con IE6 es importante para usted, es posible que desee research workarounds.
rápida pura implementación de JavaScript:
function MessageBar() {
// CSS styling:
var css = function(el,s) {
for (var i in s) {
el.style[i] = s[i];
}
return el;
},
// Create the element:
bar = css(document.createElement('div'), {
top: 0,
left: 0,
position: 'fixed',
background: 'orange',
width: '100%',
padding: '10px',
textAlign: 'center'
});
// Inject it:
document.body.appendChild(bar);
// Provide a way to set the message:
this.setMessage = function(message) {
// Clear contents:
while(bar.firstChild) {
bar.removeChild(bar.firstChild);
}
// Append new message:
bar.appendChild(document.createTextNode(message));
};
// Provide a way to toggle visibility:
this.toggleVisibility = function() {
bar.style.display = bar.style.display === 'none' ? 'block' : 'none';
};
}
Como Usar:
var myMessageBar = new MessageBar();
myMessageBar.setMessage('hello');
// Toggling visibility is simple:
myMessageBar.toggleVisibility();
Aquí es un método alternativo utilizando jQuery que también deslizarse hacia arriba/abajo en mostrar/ocultar.
Agregar el siguiente código HTML justo después de la etiqueta <body> en su página:
<div id="msgBox">
<span id="msgText">My Message</span>
<a id="msgCloseButton" href='#'>close</a>
</div>
Añadir esta CSS a la hoja de estilo
#msgBox {
padding:10px;
background-color:Orange;
text-align:center;
display:none;
font:bold 1.4em Verdana;
}
#msgCloseButton{
float:right;
}
Y finalmente aquí está el javascript para configurar el botón de cierre y funciones para mostrar y ocultar la barra de mensajes:
/* Document Ready */
$(function() {
SetupNotifications();
});
SetupNotifications = function() {
//setup close button in msgBox
$("#msgCloseButton").click(function (e) {
e.preventDefault();
CloseMsg();
});
}
DisplayMsg = function (sMsg) {
//set the message text
$("#msgText").text(sMsg);
//show the message
$('#msgBox').slideDown();
}
CloseMsg = function() {
//hide the message
$('#msgBox').slideUp();
//clear msg text
$("#msgtText").val("");
}
para realizar una prueba simple que usted podría intentar esto:
<a href='#' onclick="javascript: DisplayMsg('Testing');">Show Message!</a>
Creo que esta es la mejor solución, ¡simplemente porque mueve toda la página! – fjsj
código utilizado:
$(function(){
$('#smsg_link').click(function(){
showMessage('#9BED87', 'black', 'This is sample success message');
return false;
});
$('#imsg_link').click(function(){
showMessage('#FFE16B', 'black', 'This is sample info message');
return false;
});
$('#emsg_link').click(function(){
showMessage('#ED869B', 'black', 'This is sample error message');
return false;
});
});
/*
showMessage function by Sarfraz:
-------------------------
Shows fancy message on top of the window
params:
- bgcolor: The background color for the message box
- color: The text color of the message box
- msg: The message text
*/
var interval = null;
function showMessage(bgcolor, color, msg)
{
$('#smsg').remove();
clearInterval(interval);
if (!$('#smsg').is(':visible'))
{
if (!$('#smsg').length)
{
$('<div id="smsg">'+msg+'</div>').appendTo($('body')).css({
position:'fixed',
top:0,
left:0,
width:'98%',
height:'30px',
lineHeight:'30px',
background:bgcolor,
color:color,
zIndex:1000,
padding:'10px',
fontWeight:'bold',
fontSize:'18px',
textAlign:'center',
opacity:0.8,
margin:'auto',
display:'none'
}).slideDown('show');
interval = setTimeout(function(){
$('#smsg').animate({'width':'hide'}, function(){
$('#smsg').remove();
});
}, 3000);
}
}
}
I Si desea crear uno propio, consulte la función slideToggle de jQuery.
estoy buscando algo que mueva todo el sitio web hacia abajo, no como un menú desplegable –
@harrison: No estoy seguro de lo que quiere decir entonces, ¿puede dar un ejemplo? – Sarfraz
sí, espera. buscaré uno en línea. –
¿Algo como esto?
$("#bar").slideUp();
Sin embargo, aquí creo que se desvanecen a cabo primero la barra luego se lo llevan el contenedor principal, así que eso sería algo así:
$("#bar").fadeOut(function(){
$("#container").animate({"top":"0px"});
});
En lugar de tener una palanca después de la línea append solo haz esto: bar.style.display = message === ''? 'ninguno': 'bloque'; Luego, cuando desee deshacerse de la barra simplemente: myMessageBar.setMessage (''); –
Alternar la visibilidad me parece una API mucho más intuitiva; Esperaría que un mensaje en blanco se muestre como un mensaje en blanco, en lugar de sin ninguna barra. – Matchu
¿Cómo invocar myMessageBar.toggleVisibility() como un clic para la barra? –