产生像 *** 这样的“吐司”消息
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/
【讨论】:
以上是关于产生像 *** 这样的“吐司”消息的主要内容,如果未能解决你的问题,请参考以下文章