Die besten Möglichkeiten zum Anzeigen von Benachrichtigungen mit jQuery

Question

Ich habe ein Formular, das eine einfache CRUD ist.

Ich versuche, eine cool aussehende Erfolgsmeldung anzuzeigen, wenn Benutzer einen Datensatz eingibt oder löscht. Ich habe das im Web viel gesehen.

Ich bin sehr neu in Jquery. Kennt jemand Beispiele, die zeigen, wie das geht?

Grundsätzlich ein Div, das langsam dimmen würde.

Answer 1

Ihre Frage ist ein wenig vage, da eine "cool aussehende Erfolgsmeldung" nicht viel zu tun ist.

Wenn Sie jedoch interessiert sind, indem Sie hier Fragen beantworten, habe ich die Funktionalität von zwei der "Benachrichtigungs" -Funktionen von Stackoverflow, die die Leute zu genießen scheinen, repliziert: das Banner oben auf der Seite, das erscheint, wenn Sie ein neues bekommen Abzeichen, usw. und die roten Kästchen auf der Website, wenn mit einer Aktion etwas schief geht. Ich habe ähnliche Techniken verwendet, um Erfolgsmeldungen in meinen Anwendungen zu zeigen, und meine Kunden haben sie geliebt.

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

Die Beispiele sind sehr einfach, da alle es tun, ist ein DIV irgendwo im Dokument, und es in und aus je nach Situation Verblassen . Das ist alles, was Sie wirklich brauchen, um loszulegen.

Zusätzlich, wenn Sie ein Mac-Fan sind (und auch wenn Sie nicht sind) gibt es das jQuery Growl Plugin, das auf dem OS X-Benachrichtigungssystem basiert. Ich bin auch ein großer Fan der Verwendung des BeautyTips Plugins, um Nachrichten in der Nähe eines Elements zu zeigen, da die Blasen sehr schön und einfach zu stylen sind.

Answer 2

Vielleicht suchen Sie for something like this oder straight fade like this. Es gibt a few effects to choose from.

Answer 3

sollte diese Arbeit:

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

Sie werden mit dem Stil spielen, müssen sie so, wie Sie aussehen wollen, aber Sie bekommen die Idee.

Answer 4

Einfach ein neues absolut positioniertes div einwerfen und die fadeOut-Funktion verwenden, um die Deckkraft mit einer langsamen Animation zu animieren.

Etwas wie folgt aus:

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

Answer 5

Ich mag jGrowl wirklich. Es ist sehr unaufdringlich, da die Nachrichten in der linken Ecke erscheinen und der Benutzer kann weiterhin tun, was auch immer er tut, aber er bekommt Feedback vom System. Und es sieht auch sehr schick aus :).