您将如何编写此代码：SO公告栏

I'm a person that learns best from example. Currently, I'm diving into the field of Web Development after fifteen years of developing desktop apps. I'm still getting used to all the web technologies used for developing modern web sites and everywhere I look, I see cool little UI elements and have no idea how they're implemented. So I thought I'd ask you, the web experts...the wexperts :)

我是一个从榜样中学到最好的人。目前，在开发桌面应用程序十五年后，我正在进入Web开发领域。我仍然习惯于用于开发现代网站的所有网络技术以及我看到的任何地方，我看到很酷的小UI元素，并且不知道它们是如何实现的。所以我想我会问你，网络专家...... wexperts :)

What are some straight forward or creative ways you could code the SO announcement bar (shown below)...

您可以通过哪些直接或创造性的方式对SO公告栏进行编码（如下所示）......

http://beeeph.squarespace.com/storage/images/misc/so_announcement.jpg http://beeeph.squarespace.com/storage/images/misc/so_announcement.jpg

Feel free to give example code or high level explanations that include the various technologies involved (HTML, CSS, Javascript, etc.).

随意提供示例代码或高级解释，包括涉及的各种技术（HTML，CSS，Javascript等）。

It seems to me you would write a javascript function to handle the fading effect, as well as, receiving and processing the announcement data sent from the back end code.

在我看来，你会编写一个javascript函数来处理淡入淡出效果，以及接收和处理从后端代码发送的公告数据。

What are some other ideas?
还有什么其他想法？
How would CSS play a role in this?
CSS将如何发挥作用？
Could you use JQuery to implement this easily? GWT?
你能用JQuery轻松实现吗？ GWT？
How would you handle shifting the contents of the page down when one or more announcement bars are displayed? And what about shifting the page back up when you click the close button? Would you use frames (don't yell to lout at me for suggesting that, remember I'm a noob)? Would you use CSS for this?
当显示一个或多个公告栏时，您将如何处理页面内容的移动？那么当你点击关闭按钮时将页面重新调整呢？你会使用框架（不要大喊大叫我提示，记住我是菜鸟）？你会用CSS吗？

Thanks so much in advance for all your help!

非常感谢您提供的所有帮助！

7 个解决方案

#1

Here is the code to do it with JQuery.

以下是使用JQuery执行此操作的代码。

Html:

HTML：

<div id="message_box">
    <img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" />
    The floating message goes here
</div>

<div>
  ..............
  other content goes here
  ..................
</div>

CSS:

CSS：

#message_box {
position: absolute;
top: 0; left: 0;
z-index: 10;
background:#ffc;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
font-weight:bold;
width:99%;
}

JQuery (javascript):

JQuery（javascript）：

$(window).scroll(function()
{
  $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
});

//when the close button at right corner of the message box is clicked
$('#close_message').click(function()
{
  //the messagebox gets scrool down with top property and gets hidden with zero opacity
  $('#message_box').animate({ top:"+=15px",opacity:0 }, "slow");
});

You can see a Live Demo here.

你可以在这里看到现场演示。

Result:

结果：

alt text http://clip2net.com/clip/m12122/1247620668-clip-5kb.png

替代文字http://clip2net.com/clip/m12122/1247620668-clip-5kb.png

#2

I'd say you definitely should check out one of the JS frameworks that are around. I haven't used JQuery but I have heard good things about it. I have used MooTools and it makes effects very easy.

我要说你一定要查看其中一个JS框架。我没有使用过JQuery，但我听说过它很好。我使用过MooTools，效果非常简单。

#3

jQuery would allow you to whip up a solution pretty quickly. $("#fancyBar").fadeIn(); to show it, and $("#fancyBar").fadeOut(); to hide it. As for your element itself:

jQuery可以让你快速制定解决方案。 $（ “＃fancyBar”）淡入（）。显示它，和$（“＃fancyBar”）。fadeOut（）;隐藏它至于你的元素本身：

<div id="fancyBar"><p>You're a teacher!</p></div>

That text could be generated by some server-side logic:

该文本可能由某些服务器端逻辑生成：

<?php

  $alerts = get_alerts();
  print json_encode($alerts);

?>

The ways to accomplish this are staggering. Best to just jump in feet-first.

实现这一目标的方法令人震惊。最好先跳脚。

#4

Here's an example that pops up a top toolbar when the document is ready.

这是一个在文档准备好后弹出顶部工具栏的示例。

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
    <style>
        body {
            margin:0px;
            padding:0px;
        }

        #*Bar {
            display:none;
            border-bottom:1px solid #000000;
            background:#444444;
            padding:2px;
            color:#FFFFFF;
            font-weight:bold;
            text-align:center;
            font-size:1.1em;
        }
    </style>

    <script>            
        $(function() {
            $("#*Bar").append("<div>toolbar/announcement content</div>").fadeIn();
        });
    </script>
    <div id="*Bar"></div>
    Here's some content that will be below the toolbar. 
</body> 
</html>

Explanation:

说明：

The script included is jQuery, here's a link that goes over the benefits of lettings Google host it for you. Obviously there are drawbacks but I think the benefits outweigh them.

包含的脚本是jQuery，这里有一个链接，可以让Google为您托管它。显然存在缺点，但我认为其好处超过了它们。

In the script section, the $() function call is an alias for the jQuery() function, and when you pass a function as an argument it runs it at document ready. What the script is doing is finding an element with an ID of "*Bar" and appending HTML to it and then running the fadeIn() function on that same element.

在脚本部分中，$（）函数调用是jQuery（）函数的别名，当您将函数作为参数传递时，它会在文档就绪时运行它。脚本正在做的是找到ID为“*Bar”的元素，并向其附加HTML，然后在同一元素上运行fadeIn（）函数。

You could also include a <noscript> section for users that don't have JavaScript enabled if you still want to show the alert to them.

如果您仍希望向其显示警报，则还可以为未启用JavaScript的用户提供

#5

I'd start by creating the element with CSS/HTML.

我首先使用CSS / HTML创建元素。

HTML

<div class="message"><p>You've earned...</p><div class="close">x</div></div>

CSS

.message { position:absolute/*or fixed*/;top:0;left:0;background-color:orange;width:100%;height:30px}
.close{width:20px;height:20px;float:right}

Something like that anyway. Play with it. Once it looks all pretty you have to figure out how to make it appear when you want. I'd probably do this on the backend with PHP -- if the user has not acknowledged that he's received the message, then just print out that HTML. You'd do this by querying a database and looking at some "acknowledged" flag.

无论如何都是这样的。玩它。一旦它看起来很漂亮，你必须弄清楚如何让它出现在你想要的时候。我可能会在PHP的后端执行此操作 - 如果用户没有确认他收到了该消息，那么只需打印出该HTML。你可以通过查询数据库并查看一些“已确认”标志来完成此操作。

Then, you'd use AJAX when they click the X which would call another backend script which would set the acknolwedged flag, and then you can fade out the bar. For that, I'd use jQuery.

然后，当他们点击X时会使用AJAX，这会调用另一个后端脚本来设置acknolwedged标志，然后你可以淡出栏。为此，我使用jQuery。

#6

Well, as for shifting the content down, you could have a div that is already there but hidden, then simply append/insert the correct value where the badge name should be and use the slideout function when it is supposed to appear, which should correctly shift the content down. I do believe that you could use jQuery to create this, although I'm not sure how they achieve the live effect-my first guess would be that it polls the server every now and then, but that would seem a bit ineffective. I'm not entirely sure what the better alternative would, however, since an interrupt style system wouldn't really work with client-side js(as far as I know).

好吧，至于向下移动内容，你可以有一个已经存在但已隐藏的div，然后简单地在徽章名称应该附加/插入正确的值，并在应该出现时使用滑出功能，这应该是正确的转移内容。我相信你可以使用jQuery来创建它，虽然我不确定它们是如何实现实时效果的 - 我的第一个猜测是它不时地轮询服务器，但这似乎有点无效。但是，我不完全确定更好的选择是什么，因为中断样式系统不能真正用于客户端js（据我所知）。

#7

A good idea is use a session variable. So you can do something like . In frameworks like codeigniter you can use the Flashdata, and the data will only be available for the next server request. http://codeigniter.com/user_guide/libraries/sessions.html

一个好主意是使用会话变量。所以你可以做点什么。在codeigniter之类的框架中，您可以使用Flashdata，并且数据仅可用于下一个服务器请求。 http://codeigniter.com/user_guide/libraries/sessions.html

#1