Po raz pierwszy odwiedziłem przepełnienie stosu i zobaczyłem piękny komunikat z nagłówkiem, który wyświetla tekst i przycisk zamknięcia.Wiadomość nagłówka, tak jak przy przepełnieniu stosu

Pasek nagłówka jest stały i świetnie nadaje się do zwrócenia uwagi użytkownika. Zastanawiam się, czy ktokolwiek z was zna kod, aby uzyskać ten sam rodzaj paska nagłówka.

2009-03-03 Akshit

Odpowiedni css obejmowałyby:

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

More information about position:fixed:

Element z position: fixed jest umieszczone w określonych współrzędnych w stosunku do okna przeglądarki. Pozycja elementu jest określona właściwościami "left", "top", "right" i "bottom". Element pozostaje w tej pozycji niezależnie od przewijania. Działa w IE7 (tryb ścisły)

Jeśli wsparcie dla IE6 jest dla ciebie ważne, możesz chcieć research workarounds.

Źródło

2009-03-03 06:39:51

Szybkie czysta realizacja 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'; 
    }; 
}

Jak go używać:

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

Źródło

2009-03-03 09:59:49 James

Zamiast posiada przełącznik po linii dopisywania po prostu zrób to: bar.style.display = message === ''? "none": "block"; Następnie, gdy chcesz pozbyć się paska, po prostu: myMessageBar.setMessage (''); –

Przełączanie widoczności wydaje mi się bardziej intuicyjnym interfejsem API; Spodziewam się, że pusty komunikat będzie wyświetlany jako pusta wiadomość, a nie w ogóle. – Matchu

Jak można wywołać myMessageBar.toggleVisibility() jako onclick dla paska? –

Oto alternatywna metoda jQuery co również przesunąć w górę/w dół pokazać/ukryć.

Dodaj poniższy kod HTML bezpośrednio po znaczniku na swojej stronie <body>:

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

Dodaj CSS do swojego arkusza stylów

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

I wreszcie jest tu obsługa JavaScript, żeby skonfigurować przycisk zamykania i funkcji aby wyświetlić i ukryć pasek wiadomości:

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

To wykonać prosty test można spróbować to:

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

Źródło

2010-03-07 20:38:38 TGuimond

Myślę, że to jest lepsze rozwiązanie, po prostu dlatego, że przesuwa całą stronę w dół! – fjsj

Aktualizacja:

Check out the DEMO

kod używany:

$(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 Jeśli chcesz utworzyć własną, sprawdź funkcję jQuery.

Źródło

2011-01-04 05:44:00 Sarfraz

Szukam czegoś, co porusza całą stronę w dół, a nie jak rozwijane menu –

@harrison: Nie jesteś pewien co masz na myśli, możesz podać przykład? – Sarfraz

tak, trzymaj się. Szukam jednego w Internecie. –

Coś takiego?

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

Jednak tutaj myślę, że zanikanie pierwszy pasek następnie przynoszą głównego pojemnika do góry, tak że byłoby coś takiego:

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

Źródło

2011-01-04 05:54:34 Nabab

Wiadomość nagłówka, tak jak przy przepełnieniu stosu

Odpowiedz

Aktualizacja:

Check out the DEMO

Powiązane problemy