2010-04-26 8 views
6

Ich entschuldige mich, wenn diese Frage vage ist, aber ich möchte eine Drop-down-Header, sehr ähnlich zu dem auf StackOverflow, die Sie benachrichtigen, wenn Sie ein neues Abzeichen oder auf Twitter, wenn ein neuer Tweet verdient haben kommt rein.SO style alert header

Ich habe im Internet nach einem Tutorial gesucht, aber ich habe Probleme, genau nach dem zu googeln, wonach ich suche. Ich nehme an, es gibt eine Möglichkeit, dies in jQuery zu tun, oder es gibt ein jQuery-Plugin dafür, aber ich hatte kein Glück, einen zu finden.

Die Idee wäre wahrscheinlich, eine AJAX-Anfrage alle paar Sekunden zu machen, und wenn ein neues alertwürdiges Objekt gefunden wird, sollte es für den Benutzer angezeigt werden.

Wenn jemand mich auf eine Ressource verweisen könnte, um zu lernen, wie man ein und/oder ein vorhandenes Plugin erstellt, wäre das großartig.

EDIT: Wenn jemand neugierig, wie ich die tatsächlichen Header mit jQuery gemacht,

Im Erfolg Callback-Funktion Ihres Ajax:

$("#alertHeader").html("whatever you want to say");  
$("#alertHeader").slideDown("slow"); 

Wo "alertHeader" ist die ID von dein Alarm div.

Der entsprechende CSS für den Header ist:

#alertHeader { 
     position:relative; 
     background:#313115; 
     width:100%; 
     height:30px; 
     display:none; 
     float:left; 
     position:relative; 
     z-index:10; 
    } 

#alertText { 
    padding-top: 2px; 
    margin-left:auto; 
    margin-right:auto; 
    color: #FFF; 
    font-size: 15px; 
    font-style: italic; 
    text-align: center; 
} 

Antwort

2

Für den UI-Anzeige Teil davon, suchen Sie nach einem fixed header mit einem Link, den Header zu verbergen, wenn darauf geklickt jQuery oder was auch immer Sie Javascript verwendet.

Edit:this link ist wahrscheinlich ein besseres Beispiel.