I migliori modi per visualizzare le notifiche con jQuery

Question

Ho un modulo che è un semplice CRUD.

Sto cercando di visualizzare un messaggio fresco di successo alla ricerca quando l'utente entra o elimina un record. L'ho visto molto sul web.

Sono molto nuovo a jquery. qualcuno sa qualche esempio che mostrerebbe come farlo?

Fondamentalmente un div che avrebbe lentamente dim fuori.

Answer 1

La tua domanda è un po 'vago come "fresco guardando messaggio di successo" non è molto per andare con.

Se siete interessati, tuttavia, rispondendo alle domande qui ho replicato la funzionalità di due delle funzionalità di "notifica" di Stackoverflow che le persone sembrano apprezzare: il banner nella parte superiore della pagina che appare quando si ottiene un nuovo badge, ecc. e le caselle rosse attorno al sito ogni volta che qualcosa va storto con un'azione. Ho usato tecniche simili a queste per mostrare messaggi di successo nelle mie applicazioni e i miei clienti li hanno amati.

• To show the top banners - demo
• To show the red boxes - demo

Gli esempi sono molto semplici, come tutto ciò che sta facendo è che mostra un DIV da qualche parte nel documento e dissolvenza dentro e fuori a seconda della situazione . È tutto ciò di cui hai veramente bisogno per iniziare.

In aggiunta a questo, se sei un fan del Mac (e anche se non lo sei) c'è il plugin jQuery Growl che si basa sul sistema di notifica OS X. Sono anche un grande fan dell'uso del plug-in BeautyTips per mostrare i messaggi vicino a un elemento, poiché le bolle sono molto belle e facili da creare.

Answer 2

Forse state cercando for something like this o un straight fade like this. Ci sono a few effects to choose from.

Answer 3

Questo dovrebbe funzionare:

function showSnazzySuccessMessage(text) 
{ 
    if($("#successMessage").length < 1) 
    { 
     //If the message div doesn't exist, create it 
     $("body").append("<div id='successMessage' style='text-align:center;vertical-align:middle;width:400px;position:absolute;top:200px;left:300px;border:2px solid black;background:green;margin:20px;display:none'>" + text + "</div>"); 
    } 
    else 
    { 
     //Else, update the text 
     $("#successMessage").html(text); 
    } 
    //Fade message in 
    $("#successMessage").show('slow'); 
    //Fade message out in 5 seconds 
    setTimeout('$("#successMessage").hide("slow")',5000); 
} 

Dovrete giocare con lo stile per farlo sembrare il modo in cui si vuole, ma si ottiene l'idea.

Answer 4

Basta buttare in una nuova div posizionato in modo assoluto e utilizzare la fadeOut funzione per animare l'opacità con un'animazione lenta.

Qualcosa di simile a questo:

var newDiv = $('div').css({position: 'absolute', left: '100px', top: '100px'}).text('SUCCESS!!!').appendTo($('body')); 
newDiv.fadeOut(5000); 

Answer 5

mi piace molto jGrowl. È molto discreto in quanto i messaggi appaiono nell'angolo sinistro e l'utente può continuare a fare qualsiasi cosa stia facendo, ma ottiene il feedback dal sistema. E sembra anche molto elegante :).