javascript - example - Mensaje de encabezado al igual que en Stack Overflow
html section (5)
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 cierre.
La barra de encabezado es fija y es excelente 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.
Actualizar:
Echa un vistazo a la DEMO
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);
}
}
}
Si desea crear el suyo propio, consulte la función slideToggle de jQuery.
¿Algo como esto?
$("#bar").slideUp();
Sin embargo, aquí creo que primero se desvanecen en la barra y luego suben el contenedor principal, por lo que sería algo así:
$("#bar").fadeOut(function(){
$("#container").animate({"top":"0px"});
});
Aquí hay un método alternativo usando jQuery que también se deslizaría hacia arriba / abajo en mostrar / ocultar.
Agregue el siguiente 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ñade este CSS a tu 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 las 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 puedes probar esto:
<a href=''#'' onclick="javascript: DisplayMsg(''Testing'');">Show Message!</a>
El css relevante incluiría:
position: fixed;
top: 0;
width: 100%;
Más información sobre la position:fixed :
Un elemento con posición: fijo se coloca en las coordenadas especificadas en relación con la ventana del navegador. La posición del elemento se especifica con las propiedades "izquierda", "arriba", "derecha" y "abajo". El elemento permanece en esa posición independientemente del desplazamiento. Funciona en IE7 (modo estricto)
Si el soporte de IE6 es importante para usted, es posible que desee investigar soluciones alternativas .
Implementación rápida y pura 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'';
};
}
Cómo usarlo:
var myMessageBar = new MessageBar();
myMessageBar.setMessage(''hello'');
// Toggling visibility is simple:
myMessageBar.toggleVisibility();