产生像 StackOverflow 这样的“吐司”消息答案

【问题标题】：Produce "toast" messages like StackOverflow产生像 StackOverflow 这样的“吐司”消息
【发布时间】：2011-05-13 08:45:51
【问题描述】：

我每次构建 Web 应用程序时都会考虑的一个问题是消息应该如何呈现给最终用户

我尝试过类似 Windows 应用程序中的消息框，但它们看起来很糟糕，并且在服务器上发布时会出现问题。我已经尝试在页面底部的顶部包含一个很酷的标签的更新面板..但我仍然觉得它根本不够好。有时我在使用 AJAX 时在特定情况下会遇到问题，而且对用户来说仍然看起来不太好......

我想问一下 StackOverFlow 消息会出现一段时间然后消失，例如在对消息进行投票时显示为橙色的消息。

我想构建这样的消息或重用可以提供这些消息的 DLL。这可行吗？

注意::: 根据服务器端的特定条件为用户显示消息..

提前致谢。

【问题讨论】：

您可能至少要改写您的标题。目前它是模棱两可的，可能会导致问题被（错误地）迁移到Meta
请随意编辑我的问题，我的英语不太好，我只是试着提出我的问题想法..谢谢
关于 jQuery 警告，请看这里：stackoverflow.com/questions/2323366/jquery-1-4-2-vsdoc 它只是与 IDE 中的智能感知有关

标签： .net asp.net jquery ajax messagebox

【解决方案1】：

具体来说，jGrowl jQuery 插件可以满足您的要求。

只需在您的 html 中包含 jQuery 和 jGrowl 脚本，然后使用 $.jGrowl() 函数开始生成消息。

示例代码：

<html>
<head>
<script src="path/to/jquery.js"></script>
<script src="path/to/jgrowl.js"></script>
<script>
$(function() {
  $.jGrowl("My sticky message, loaded after the rest of the page", {sticky: true});
  $("#mybutton").live("click", function(_) {
    $.jGrowl("you clicked the button!");});
});
</script>
</head>
<body>
<button id="mybutton">click me</button>
</body>
</html>

【讨论】：

非常感谢，但是如何在 .cs 文件或 .aspx 中使用它们，你能给我举个简单的例子吗？
提供的示例。我没有使用过 .NET，但根据我在网上阅读的内容，在 .aspx 模板中包含上述内容相当简单。
+1 对 jGrowl 的调用很好，效果很好，用 .NET/.cs 示例添加了我自己的答案

【解决方案2】：

要创建效果，您可以使用这些工具

Jquery

jQuery 用户界面库。它为创建富 Internet 应用程序提供交互、小部件、效果和主题

可以查看一些jquery效果here

MooTools

基于 Mootools JavaScript 框架构建的 Web 应用程序用户界面库

【讨论】：

典型的 SO 答案：使用 Jquery！
您希望别人提供什么其他答案？随意提供更好的选择。在那之前... jQuery 摇滚！
@MaximGershkovich 我会（如果我是问的人）如何使用 JQuery 来实现这一点，即是否有一个插件或示例在起作用。只是说你可以使用 JQuery 有点像说你可以坐公共汽车去 X，但不说从哪一个或从哪里得到它。问候

【解决方案3】：

嗯，通过 .cs 使用 jGrowl（扩展 Shane 的答案）的一种方法如下所示。

这个例子在 webform ASP.NET 中

使用 1 个按钮创建一个简单的 aspx 页面，并确保在页面头中包含必要的 jquery/jgrowl 脚本和 css 引用，我还有一个 ScriptManager 和页面上的更新面板。

在页面后面的代码中：

protected void Button1_Click(object sender, EventArgs e)
{
    this.ShowStatus("This is your message!<br />Some HTML formatting works!<br />");
}

protected void ShowStatus(string message)
{
    ScriptManager sm = ScriptManager.GetCurrent(Page);

    if (sm.IsInAsyncPostBack)
    {
        string script = @"
            $(document).ready(function() {
            $.jGrowl.defaults.theme = 'iphone';
            $.jGrowl('" + message + "', {theme: 'iphone',header: 'Notification',life: 8000});});";

        ScriptManager.RegisterStartupScript(Page,this.GetType(), "notification", script,true);                        
    }
}

自然地使用适合您应用的任何主题，祝您好运！此外，这种方法仅根据需要加载通知脚本（在这种情况下，在您单击按钮之后），但您可以将“ShowStatus”函数与后面代码中的其他事件/测试联系起来。

【讨论】：

请你解释一下你写的方法::特别是你使用脚本管理器的部分我想知道它是如何工作的......非常感谢你
msdn.microsoft.com/en-us/library/bb310408.aspx 了解有关 RegisterStartupScript 的更多信息，msdn.microsoft.com/en-us/library/… 了解 ScriptManager 本身，解释它们的工作原理和原因。
做什么/不做什么？我从中提取的应用程序在 IE/FF/Chrome 中运行得很好......你遇到了什么问题？
@user418343> 你的 Firefox 版本是多少？
你有什么有趣的插件/插件在 Firefox 中活跃吗？

【解决方案4】：

另一个非常好的 JavaScript 通知插件是Pines Notify

它还具有通知历史小部件。

【讨论】：

这很棒，但是如何与 .cs 文件一起使用我想在用户单击 asp.net 中的服务器按钮时显示此消息..非常感谢..我希望它适用于IE 和火狐..
这看起来很不错，，，然后如何在.cs文件中使用它......我在这个网站上搜索，找不到如何使用它们..

【解决方案5】：

使用 mootools 的 Notimoo 插件。
昨天刚用过，喜欢配置选项。

http://code.google.com/p/notimoo/

【讨论】：