产生像 *** 这样的“吐司”消息

Posted

技术标签:

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

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

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

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

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

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

提前致谢。

【问题讨论】:

您可能至少要改写您的标题。目前它是模棱两可的,可能会导致问题被(错误地)迁移到Meta 请随意编辑我的问题,我的英语不太好,我只是试着提出我的问题想法..谢谢 关于 jQuery 警告,请看这里:***.com/questions/2323366/jquery-1-4-2-vsdoc 它只是与 IDE 中的智能感知有关 【参考方案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/

【讨论】:

以上是关于产生像 *** 这样的“吐司”消息的主要内容,如果未能解决你的问题,请参考以下文章

在低于 Marshmallow 的版本上显示吐司消息

Android Studio Chaquopy 吐司消息

吐司消息样式变化?只有 Toast 消息没有 Snackbar 其他没有小部件

Android消息的提示,Toast吐司方式

如何从 IntentService 创建吐司?它卡在屏幕上

如何在 Unity3D 上显示适用于 Android 的 Google Play 游戏“欢迎回来”吐司?