代码之家 › 专栏 › 技术社区 › Anyname Donotcare

生成“toast”消息,如StackOverflow

messagebox ajax jquery asp.net .net

Anyname Donotcare · 技术社区 · 14 年前

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

我在windows应用程序中尝试过类似的消息框,但它们看起来很糟糕,在服务器上发布时会产生问题。我试过一个更新面板,在页面底部的顶部有一个很酷的标签,但是我仍然觉得它不够好。有时候我在使用AJAX的时候遇到了一些特殊的问题,但是对于用户来说还是不太好。。。

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

我想建立这样的消息或重用一个可以提供这些的DLL。这可行吗?

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

提前谢谢。

5 回复 | 直到 14 年前

DatRid 10 年前

好吧,使用jGrowl(扩展Shane的答案)via.cs的一种方法如下所示。

webform ASP.NET中的这个示例

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

在页面的代码隐藏中:

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”函数绑定到后面代码中的其他事件/测试。

Yannick Blondeau 12 年前

具体来说 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>