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

Question

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

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

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

По сути, это div, который будет постепенно уменьшаться.

Answer 1

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

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

• Показать верхние баннеры - демо
• Показать красные рамки - демо

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

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

Answer 2

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

Answer 3

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

Примерно так:

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

Answer 4

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

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

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

Answer 5

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