Come si legge questo: la barra SO Anno

Question

Sono una persona che impara meglio dall'esempio. Attualmente, mi sto immergendo nel campo dello sviluppo Web dopo quindici anni di sviluppo di app desktop. Mi sto ancora abituando a tutte le tecnologie web utilizzate per lo sviluppo di siti Web moderni e ovunque guardi, vedo interessanti piccoli elementi dell'interfaccia utente e non ho idea di come siano implementati. Così ho pensato di chiedervi, gli esperti web ... le wexperts :)

Quali sono alcuni modi dritto in avanti o creativo è possibile codificare la barra annuncio SO (vedi sotto) ...

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

Sentitevi liberi di fornire codice di esempio o spiegazioni di alto livello che includano le varie tecnologie coinvolte (HTML, CSS, Javascript, ecc.).

Mi sembra che si possa scrivere una funzione javascript per gestire l'effetto dissolvenza, nonché per ricevere ed elaborare i dati dell'annuncio inviati dal codice back-end.

• Quali sono alcune altre idee?
• In che modo i CSS hanno un ruolo in questo?
• Si può usare JQuery per implementarlo facilmente? GWT?
• Come gestiresti lo spostamento del contenuto della pagina verso il basso quando vengono visualizzate una o più barre degli annunci? E che dire del cambio di pagina quando fai clic sul pulsante Chiudi? Vorresti usare i frame (non gridare contro di me per averlo suggerito, ricorda che sono un noob)? Useresti CSS per questo?

Grazie mille in anticipo per tutto il vostro aiuto!

Answer 1

Ecco il code di farlo con jQuery.

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

Potete vedere una Live Demo here.

Risultato:

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

Answer 2

Direi che dovresti assolutamente controllare uno dei framework JS che ci sono. Non ho usato JQuery ma ne ho sentito parlare bene. Ho usato MooTools e rende gli effetti molto facili.

Answer 3

Bene, come per spostare il contenuto verso il basso, si potrebbe avere un div che è già lì ma nascosto, quindi semplicemente aggiungere/inserire il valore corretto dove dovrebbe essere il nome del badge e utilizzare la funzione slideout quando dovrebbe apparire , che dovrebbe spostare correttamente il contenuto verso il basso. Credo che si possa usare jQuery per creare questo, anche se non sono sicuro di come ottengono l'effetto live - la mia prima ipotesi sarebbe che sondaggi il server ogni tanto, ma ciò sembrerebbe un po 'inefficace. Non sono del tutto sicuro quale sia l'alternativa migliore, tuttavia, dal momento che un sistema di interrupt non funzionerebbe davvero con il lato client js (per quanto ne so).

Answer 4

Vorrei iniziare creando l'elemento con CSS/HTML.

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} 

Qualcosa del genere comunque. Giocaci. Una volta che sembra tutto carino devi capire come farlo apparire quando vuoi. Probabilmente lo farei sul backend con PHP - se l'utente non ha riconosciuto di aver ricevuto il messaggio, allora basta stampare quell'HTML. Faresti ciò interrogando un database e osservando un flag "riconosciuto".

Quindi, usereste AJAX quando fanno clic sulla X, che chiamerebbe un altro script di backend che imposterà la bandiera acknolwed e quindi potrete sfumare la barra.Per quello, userei jQuery.

Answer 5

jQuery permetterebbe di improvvisare una soluzione abbastanza rapidamente. $ ("# FancyBar") fadeIn().; per mostrarlo e $ ("# fancyBar"). fadeOut(); per nasconderlo. Per quanto riguarda il vostro elemento stesso:

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

Questo testo potrebbe essere generato da una certa logica server-side:

<?php 

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

?> 

I modi per ottenere questo risultato sono da capogiro. Meglio saltare semplicemente in piedi-prima.

Answer 6

Ecco un esempio che si apre una barra degli strumenti in alto quando il documento è pronto.

<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> 

Spiegazione:

Lo script incluso è jQuery, here's a link che va oltre i benefici di locazione Google ospitare per voi. Ovviamente ci sono degli inconvenienti, ma penso che i benefici superino quelli.

Nella sezione di script, la chiamata di funzione $() è un alias per la funzione jQuery() e quando si passa una funzione come argomento, viene eseguita a documento pronto. Che lo script sta facendo è trovare un elemento con un ID di "StackOverflowBar" e aggiungendo HTML ad esso e poi eseguire la funzione fadeIn() su quello stesso elemento.

Si potrebbe includere anche una sezione <noscript> per gli utenti che non hanno JavaScript abilitato se si vuole ancora mostrare l'avviso a loro.

Answer 7

Una buona idea è utilizzare una variabile di sessione. Quindi puoi fare qualcosa del genere. In framework come codeigniter è possibile utilizzare Flashdata e i dati saranno disponibili solo per la successiva richiesta del server. http://codeigniter.com/user_guide/libraries/sessions.html