生成像StackOverflow这样的"toast"消息

Question

生成像StackOverflow这样的"toast"消息

Any*_*are 18 .net asp.net ajax jquery messagebox

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

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

我想问一下暂时出现然后消失的StackOverFlow消息,例如在向上或向下投票时以橙色显示的消息.

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

note :::根据服务器端的具体情况为用户显示消息.

提前致谢.

Answer 1

Sha*_*iel 17

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Sud*_*ha 12

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

jQuery的

jQuery用户界面库.它提供了用于创建富Internet应用程序的交互,小部件,效果和主题

你可以在这里查看一些Jquery效果

MooTools的

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

典型的SO答案:使用Jquery! (3认同)
您希望有人提供哪些其他答案？随意提供更好的选择.在那之前...... jQuery摇滚! (2认同)

Answer 3

cur*_*isk 9

好吧,通过.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);                        
    }
}

Run Code Online (Sandbox Code Playgroud)

自然地使用适合您的应用程序的任何主题,祝你好运!此外,此方法仅根据需要加载通知脚本(在这种情况下,单击按钮后),但您可以将"ShowStatus"函数绑定到后面的代码中的其他事件/测试.

归档时间：	15 年，3 月前
查看次数：	5991 次
最近记录：	11 年，3 月前