logo标签列表

使用jQuery显示通知的最佳方法

javascriptjqueryhtml
13

我有一个简单的CRUD表单。

我想在用户输入或删除记录时显示一个看起来很酷的成功消息。我在网上经常看到这种效果。

我对jquery非常陌生。有没有人知道任何示例可以展示如何实现这个效果？

基本上需要一个div逐渐变暗。

5个回答
20

你的问题有点模糊，因为“酷炫的成功提示信息”并不足够清晰。

然而，通过回答这里的问题，我已经复制了两个Stackoverflow的“通知”功能的功能：当您获得新徽章时页面顶部弹出的横幅等，以及每当操作出现问题时在网站周围显示红色框。我使用类似于这些技术来显示我的应用程序中的成功消息，我的客户喜欢它们。

这些示例非常简单，因为它只是在文档的某个地方显示一个DIV，并根据情况淡入淡出。这就是您真正需要开始的所有内容。

除此之外，如果您是Mac的粉丝（甚至不是），还有基于OS X通知系统的jQuery Growl插件。我也非常喜欢使用BeautyTips插件，在元素附近显示消息，因为气泡非常漂亮且易于样式化。

谢谢。你是怎么变得这么擅长 jQuery 的？我对 HTML 和 jQuery 很菜 :( 有什么建议给初学者吗？ - jamie
2
实践，年轻的学徒。此外，文档非常详细。请使用它。 :) - Paolo Bergantino
刚刚更新了一份jQuery通知脚本列表在这里。 - webcoder
这里有另一个用于在页面顶部显示通知消息的jQuery插件，类似于Twitter的错误提示栏。 - Shaiju T
4

我非常喜欢jGrowl。它非常不显眼，因为消息出现在左上角，用户可以继续做任何事情，但是他确实可以从系统得到反馈。而且它看起来也非常漂亮 :)

1
我在2009年发布了这篇文章，你可能已经注意到了。似乎jGrowl仍然可以在https://github.com/stanlemon/jGrowl上获得。 - Morph
2

只需添加一个新的绝对定位的div，并使用fadeOut函数来以缓慢的动画效果控制其不透明度。

代码示例：

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

这应该可以工作：

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

你需要调整样式才能让它看起来符合你的要求，但是你已经有了想法。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接