Wie würden Sie das codieren: Die SO-Mitteilungsleiste

Question

Ich bin eine Person, die am besten aus dem Beispiel lernt. Momentan tauche ich in das Gebiet der Webentwicklung ein, nachdem ich 15 Jahre lang Desktop-Apps entwickelt hatte. Ich gewöhne mich immer noch an alle Web-Technologien, die für die Entwicklung moderner Websites verwendet werden, und überall, wo ich hinschaue, sehe ich coole kleine UI-Elemente und habe keine Ahnung, wie sie implementiert werden. Also dachte ich, ich Dich bitten würde, die Web-Experten ... die wexperts :)

Was sind einige gerade nach vorne oder kreativen Möglichkeiten, wie Sie das SO Ankündigung Bar Code könnten (siehe unten) ...

http://beeeph.squarespace.com/storage/images/misc/so_announcement.jpg http://beeeph.squarespace.com/storage/images/misc/so_announcement.jpg

Geben Sie Beispielcode oder Erläuterungen auf hoher Ebene, die die verschiedenen beteiligten Technologien (HTML, CSS, Javascript usw.) enthalten.

Es scheint mir, Sie würden eine JavaScript-Funktion schreiben, um den Fading-Effekt zu behandeln, sowie die vom Back-End-Code gesendeten Ankündigungsdaten zu empfangen und zu verarbeiten.

• Was sind andere Ideen?
• Wie würde CSS dabei eine Rolle spielen?
• Könnten Sie JQuery verwenden, um dies einfach zu implementieren? GWT?
• Wie würden Sie den Inhalt der Seite verschieben, wenn eine oder mehrere Ankündigungsleisten angezeigt werden? Und was ist mit dem Verschieben der Seite zurück, wenn Sie auf die Schaltfläche zum Schließen klicken? Würdest du Frames benutzen (schrei nicht, um mich anzulügen, wenn du das vorschlägst, erinnere dich, ich bin ein Noob)? Würden Sie CSS dafür verwenden?

Vielen Dank im Voraus für Ihre Hilfe!

Answer 1

Hier ist die code, um es mit JQuery zu tun.

Html:

<div id="message_box"> 
    <img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" /> 
    The floating message goes here 
</div> 

<div> 
    .............. 
    other content goes here 
    .................. 
</div> 

CSS:

#message_box { 
position: absolute; 
top: 0; left: 0; 
z-index: 10; 
background:#ffc; 
padding:5px; 
border:1px solid #CCCCCC; 
text-align:center; 
font-weight:bold; 
width:99%; 
} 

JQuery (JavaScript):

$(window).scroll(function() 
{ 
    $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350}); 
}); 

//when the close button at right corner of the message box is clicked 
$('#close_message').click(function() 
{ 
    //the messagebox gets scrool down with top property and gets hidden with zero opacity 
    $('#message_box').animate({ top:"+=15px",opacity:0 }, "slow"); 
}); 

Sie können eine Live Demo here sehen.

Ergebnis:

alt text http://clip2net.com/clip/m12122/1247620668-clip-5kb.png

Answer 2

Ich würde sagen, dass Sie auf jeden Fall eines der JS-Frameworks überprüfen sollten, die es gibt. Ich habe JQuery nicht benutzt, aber ich habe gute Dinge darüber gehört. Ich habe MooTools benutzt und es macht Effekte sehr einfach.

Answer 3

Nun, wie für die Verschiebung des Inhalts, könnten Sie ein div haben, das bereits dort ist, aber versteckt, dann einfach anfügen/den richtigen Wert einfügen, wo der Badge Name sollte und verwenden Sie die Auszugsfunktion, wenn es erscheinen soll , die den Inhalt korrekt verschieben sollte. Ich glaube, dass Sie jQuery verwenden können, um dies zu erstellen, obwohl ich nicht sicher bin, wie sie den Live-Effekt erreichen - meine erste Vermutung wäre, dass er ab und zu den Server abfragt, aber das wäre ein bisschen ineffektiv. Ich bin mir nicht ganz sicher, was die bessere Alternative wäre, da ein Interrupt-Style-System nicht wirklich mit clientseitigen js funktionieren würde (soweit ich weiß).

Answer 4

Ich würde beginnen, indem Sie das Element mit CSS/HTML erstellen.

HTML

<div class="message"><p>You've earned...</p><div class="close">x</div></div> 

CSS

.message { position:absolute/*or fixed*/;top:0;left:0;background-color:orange;width:100%;height:30px} 
.close{width:20px;height:20px;float:right} 

so etwas sowieso. Spiel damit. Sobald alles schön aussieht, musst du herausfinden, wie es erscheint, wenn du willst. Ich würde das wahrscheinlich im Backend mit PHP machen - wenn der Benutzer nicht bestätigt hat, dass er die Nachricht erhalten hat, dann drucke einfach das HTML aus. Sie würden dies tun, indem Sie eine Datenbank abfragen und eine "anerkannte" Flagge betrachten.

Dann würden Sie AJAX verwenden, wenn sie auf das X klicken, das ein anderes Backend-Skript aufrufen würde, das das acknolwedged-Flag festlegen würde, und dann können Sie die Leiste ausblenden.Dafür würde ich jQuery verwenden.

Answer 5

Mit jQuery können Sie schnell eine Lösung erstellen. $ ("# fancyBar"). fadeIn(); um es zu zeigen, und $ ("# fancyBar"). fadeOut(); um es zu verstecken. Wie für Ihr Element selbst:

<div id="fancyBar"><p>You're a teacher!</p></div> 

Dieser Text durch eine serverseitige Logik erzeugt werden könnte:

<?php 

    $alerts = get_alerts(); 
    print json_encode($alerts); 

?> 

Die Möglichkeiten sind erschütternd zu erreichen. Am besten springt man zuerst in die Füße.

Answer 6

Hier ist ein Beispiel, das eine obere Symbolleiste öffnet, wenn das Dokument fertig ist.

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
</head> 
<body> 
    <style> 
     body { 
      margin:0px; 
      padding:0px; 
     } 

     #StackOverflowBar { 
      display:none; 
      border-bottom:1px solid #000000; 
      background:#444444; 
      padding:2px; 
      color:#FFFFFF; 
      font-weight:bold; 
      text-align:center; 
      font-size:1.1em; 
     } 
    </style> 

    <script>    
     $(function() { 
      $("#StackOverflowBar").append("<div>toolbar/announcement content</div>").fadeIn(); 
     }); 
    </script> 
    <div id="StackOverflowBar"></div> 
    Here's some content that will be below the toolbar. 
</body> 
</html> 

Erläuterung:

Das Skript enthalten ist jQuery, here's a link, dass Google es für Sie Host über die Vorteile der Vermietung geht. Offensichtlich gibt es Nachteile, aber ich denke, die Vorteile überwiegen sie.

Im Skriptabschnitt ist der Funktionsaufruf $() ein Alias ​​für die Funktion jQuery(). Wenn Sie eine Funktion als Argument übergeben, wird sie im Dokument ready ausgeführt. Was das Skript tut, ist ein Element mit der ID "StackOverflowBar" zu finden und HTML daran anzufügen und dann die Funktion fadeIn() für dasselbe Element auszuführen.

Sie können auch einen Abschnitt <noscript> für Benutzer einschließen, für die JavaScript nicht aktiviert ist, wenn Sie die Warnung weiterhin anzeigen möchten.

Answer 7

Eine gute Idee ist es, ein Session-Variable verwenden. So können Sie etwas tun. In Frameworks wie Codeigniter können Sie Flashdata verwenden, und die Daten sind nur für die nächste Serveranfrage verfügbar. http://codeigniter.com/user_guide/libraries/sessions.html