我怎么能做一些类似于*顶部那个很酷的条的东西,当你得到一个新徽章时就会弹出?

时间:2021-01-26 16:00:32

When you get a new badge on *.com, a bar appears at the top of the screen informing you of your achievement. It sticks around until the user closes it.

当你在*.com上获得一个新的徽章时,屏幕顶端会出现一个条,告诉你你的成就。直到用户关闭它。

I rather like that system of informing the user about new news related to the site or their account. It's fairly unintrusive, but still clearly communicates the information. Even if all users receive a notification this way, it sticks around for each user until they have acknowledged seeing it.

我很喜欢这个系统,告诉用户关于网站或他们的账户的新消息。这是相当不打扰,但仍然清楚地传达信息。即使所有的用户都以这种方式接收通知,它也会在每个用户都知道看到它的情况下继续使用。

I'm running a system using Ruby on Rails on a PostGres database. What's the best way to implement a similar system on my setup?

我正在一个PostGres数据库上运行一个使用Ruby on Rails的系统。在我的设置中实现类似系统的最佳方式是什么?

Edit: Just to clarify, I'm interested both in the server side and client side of the setup.

编辑:澄清一下,我对设置的服务器端和客户端都感兴趣。

2 个解决方案

#1


2  

The effect can be accomplished with jQuery and the slideDown method (http://api.jquery.com/slideDown/). Set an onClick event to make the element slideUp, hide, or hit an AJAX call to let you know that the user got the message and dismissed it.

这种效果可以通过jQuery和slideDown方法(http://api.jquery.com/slideDown/)来实现。设置一个onClick事件,使元素滑动、隐藏或单击AJAX调用,以让您知道用户获得了消息并将其删除。

You could set the contents of the element (I'd go with a div) via an AJAX call, or you could simply populate the div with the appropriate message when generating your page, start the div off as hidden, and then kick off the slideDown method when the page load is complete via a $(document).ready definition (http://think2loud.com/jquery-document-ready-howto/).

你可以设置元素的内容(我和一个div)通过一个AJAX调用,或者你可以简单地填充div与适当的消息在生成页面时,启动div的隐藏,然后启动slideDown方法当页面加载完成后通过美元(文档)。可以定义(http://think2loud.com/jquery-document-ready-howto/)。

#2


1  

You could use something like the jquery popup bubble extension: http://www.farmcode.org/post/2009/04/06/jQuery-popup-bubble-extension.aspx

您可以使用类似于jquery popup气泡扩展的东西:http://www.farmcode.org/post/2009/04/06/jquerypopup - bubextension.aspx。

#1


2  

The effect can be accomplished with jQuery and the slideDown method (http://api.jquery.com/slideDown/). Set an onClick event to make the element slideUp, hide, or hit an AJAX call to let you know that the user got the message and dismissed it.

这种效果可以通过jQuery和slideDown方法(http://api.jquery.com/slideDown/)来实现。设置一个onClick事件,使元素滑动、隐藏或单击AJAX调用,以让您知道用户获得了消息并将其删除。

You could set the contents of the element (I'd go with a div) via an AJAX call, or you could simply populate the div with the appropriate message when generating your page, start the div off as hidden, and then kick off the slideDown method when the page load is complete via a $(document).ready definition (http://think2loud.com/jquery-document-ready-howto/).

你可以设置元素的内容(我和一个div)通过一个AJAX调用,或者你可以简单地填充div与适当的消息在生成页面时,启动div的隐藏,然后启动slideDown方法当页面加载完成后通过美元(文档)。可以定义(http://think2loud.com/jquery-document-ready-howto/)。

#2


1  

You could use something like the jquery popup bubble extension: http://www.farmcode.org/post/2009/04/06/jQuery-popup-bubble-extension.aspx

您可以使用类似于jquery popup气泡扩展的东西:http://www.farmcode.org/post/2009/04/06/jquerypopup - bubextension.aspx。