2009-03-03 8 views
44

C'est la première fois que j'ai visité le débordement de pile et j'ai vu un beau message d'en-tête qui affiche un texte et un bouton de fermeture.Message d'en-tête comme à Stack Overflow

La barre d'en-tête est fixée une et est génial d'attirer l'attention du visiteur. Je me demandais si quelqu'un d'entre vous connaissait le code pour obtenir le même genre de barre d'en-tête.

Répondre

4

Le css pertinent comprendrait:

position: fixed; 
top: 0; 
width: 100%; 

More information about position:fixed:

Un élément avec la position: fixe est positionné au niveau spécifié de coordonnées par rapport à la fenêtre du navigateur. La position de l'élément est spécifiée avec les propriétés "left", "top", "right" et "bottom". L'élément reste à cette position quel que soit le défilement. Travaux dans IE7 (mode strict)

Si le support IE6 est important pour vous, vous voudrez peut-être research workarounds.

25

pur mise en œuvre rapide 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'; 
    }; 
} 

Comment l'utiliser:

var myMessageBar = new MessageBar(); 
myMessageBar.setMessage('hello'); 
// Toggling visibility is simple: 
myMessageBar.toggleVisibility(); 
+0

Plutôt que d'avoir une bascule après la ligne append faites simplement ceci: bar.style.display = message === ''? 'none': 'block'; Ensuite, quand vous voulez vous débarrasser de la barre juste: myMessageBar.setMessage (''); –

+2

La modification de la visibilité me semble être une API beaucoup plus intuitive. Je m'attendrais à ce qu'un message vide s'affiche comme un message vide, plutôt que pas de barre du tout. – Matchu

+0

Comment invoqueriez-vous myMessageBar.toggleVisibility() comme onclick pour la barre? –

3

Voici une autre méthode utilisant jQuery qui glisserait aussi haut/bas afficher/cacher.

Ajouter le code HTML suivant juste après la balise <body> dans votre page:

<div id="msgBox"> 
    <span id="msgText">My Message</span>   
    <a id="msgCloseButton" href='#'>close</a> 
</div> 

Ajouter ce CSS à votre feuille de style

#msgBox { 
    padding:10px; 
    background-color:Orange; 
    text-align:center; 
    display:none; 
    font:bold 1.4em Verdana; 
} 
#msgCloseButton{ 
    float:right;  
} 

Et enfin voici le javascript pour configurer le bouton de fermeture et fonctions pour afficher et masquer la barre de message:

/* 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(""); 
} 

Pour effectuer un test simple, vous pouvez essayer ceci:

<a href='#' onclick="javascript: DisplayMsg('Testing');">Show Message!</a> 
+0

Je pense que c'est la meilleure solution, tout simplement parce qu'il déplace toute la page vers le bas! – fjsj

11

Mise à jour:


Check out the DEMO

utilisées Code:

$(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 vous souhaitez créer le vôtre, consultez la fonction slideToggle de jQuery.

+1

Je suis à la recherche de quelque chose qui déplace l'ensemble du site vers le bas, pas comme un menu déroulant –

+0

@harrison: Vous ne savez pas ce que vous voulez dire alors, pouvez-vous donner un exemple? – Sarfraz

+0

ouais, attendez. Je vais en chercher un en ligne. –

1

Quelque chose comme ça?

$("#bar").slideUp(); 

Cependant, ici je pense qu'ils effacent tout d'abord la barre puis ils apportent le haut principal de récipient, de sorte que ce serait quelque chose comme ça:

$("#bar").fadeOut(function(){ 
    $("#container").animate({"top":"0px"}); 
}); 
Questions connexes