Лучшие способы отображения уведомлений с помощью jQuery

У меня есть форма, которая является простым CRUD.

Я пытаюсь показать сообщение об успешном ожидании, когда пользователь вводит или удаляет запись. Я видел это много в Интернете.

Я очень новичок в jquery. Кто-нибудь знает какие-либо примеры, которые показывали бы, как это сделать?

В принципе, div, который медленно тускнеет.

ОТВЕТЫ

Ответ 1

Ваш вопрос немного расплывчатый, поскольку "приятное сообщение о успехе" не так много.

Если вы заинтересованы, тем не менее, отвечая на вопросы, здесь я воспроизвел функциональность двух функций уведомления "Stackoverflow", которые, по-видимому, нравятся людям: баннер в верхней части страницы, который появляется, когда вы получаете новый значок и т.д. и красные квадратики вокруг сайта, когда что-то идет не так с действием. Я использовал методы, подобные этим, чтобы показывать сообщения о успехе в моих приложениях, и мои клиенты любили их.

Примеры очень просты, поскольку все, что он делает, показывает DIV где-то в документе и затухает его в и в зависимости от ситуации. Это все, что вам действительно нужно начать.

В дополнение к этому, если вы поклонник Mac (и даже если нет), существует плагин jQuery Growl, который основано на системе уведомлений OS X. Я также большой поклонник использования плагина BeautyTips для отображения сообщений рядом с элементом, поскольку пузыри очень приятные и легкие в стиле.

Ответ 2

Мне очень нравится jGrowl. Это очень ненавязчиво, поскольку сообщения появляются в левом углу, и пользователь может продолжать делать все, что он делает, но он получает обратную связь от системы. И это тоже выглядит очень интересно:).

Ответ 3

Просто введите новый абсолютно позиционированный div и используйте функцию fadeOut, чтобы оживить ее непрозрачность с помощью медленной анимации.

Что-то вроде этого:

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

Ответ 5

Это должно работать:

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

Вам нужно будет сыграть со стилем, чтобы он выглядел так, как вы хотите, но вы поняли.