Ho cercato una barra di notifica come quella di questo sito che visualizza in alto la notifica a un utente di modifiche, ecc. Dovrebbe avere la possibilità di essere chiusa. Tutto quello che posso trovare per jquery è this onebarre di notifica jquery che è possibile eliminare?
Qualcuno ha altri consigli o suggerimenti?
Super facile da costruire. Basta fare la prima <div> sotto il tag <body>, e impostare il css per qualcosa di simile:
#notify {
position:relative;
width:100%;
background-color:orange;
height:50px;
color:white;
display:none;
}
Poi le notifiche, è sufficiente farlo scorrere verso il basso:
$('#notify').html('new message').slideDown();
e aggiungere un evento click per chiuderlo e cancellare la notifica:
$('#notify').click(function(){
$(this).slideUp().empty();
});
Demo: http://jsfiddle.net/AlienWebguy/Azh4b/
Se si desidera renderlo veramente come StackOverflow, è sufficiente impostare un cookie quando si invia la notifica, quindi ogni caricamento della pagina mostra tutte le notifiche con i cookie applicabili.
Se si desidera più notifiche, modificare #notify a .notify e impilare. Qualcosa di simile a questo:
$('.notify').live('click',function() {
$(this).slideUp('fast',function(){$(this).remove();});
});
$(function(){
notify('You have earned the JQuery badge!');
notify('You have earned the Super Awesome badge!');
});
function notify(msg) {
$('<div/>').prependTo('body').addClass('notify').html(msg).slideDown();
}
Non ho mai pensato di costruire il mio ... ha senso. Grazie e grazie per l'ottimo esempio :) – Paul
Sei il benvenuto, felice di aiutare :) – AlienWebguy
Ho realizzato qualcosa di molto simile a questo per un paio di miei progetti.
C'è un JSFiddle demo, che funziona ma è un vero e proprio passaggio dalle mie libs personali - codice che probabilmente potrebbe usare pulizia e ottimizzazione, ma dà una buona impressione di come funziona.
Il bonus aggiuntivo del mio codice è che non mostra elementi duplicati: "esegue il ping" di quello attualmente esistente. Cliccando ovunque sulla notifica lo chiude.
L'unico inconveniente che posso vedere è che copre alcuni dei contenuti principali, ma è risolvibile se si inserisce il contenitore delle notifiche nella parte superiore del contenuto con position: static.
Per favore fatemi sapere se ci sono delle specifiche che volete che spieghi; c'è un sacco di codice da eseguire in una sola risposta.
Probabilmente scriverò un plug-in jQuery che lo fa ad un certo punto, visto che c'è solo un esempio. Lo posterò qui quando lo farò.
NB. setInterval() viene utilizzato solo a scopo dimostrativo. Inoltre, ci sono diversi avvisi colorati (successo, informazioni, avviso, errore - verde, blu, arancione e rosso rispettivamente).
Si consiglia di provare "noty" https://github.com/needim/noty
È * davvero * facile da fare. Anche questo sito ne ha uno! – Blender
@Blender: "Anche questo" sembra semplice perché * anche * StackOverflow è riuscito a farlo funzionare. –
La maggior parte delle cose su questo sito è abbastanza minimale e semplice (e ovviamente ben codificata). – Blender