Question

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

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

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

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

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

还有什么其他想法？
CSS如何在这方面发挥作用？
您可以使用JQuery轻松实现吗？ GWT？
如果显示一个或多个公告栏，您将如何处理页面内容的移动？那么当你点击关闭按钮时，将页面重新调整呢？你会使用框架（不要大喊大叫我提示，记住我是菜鸟）？你会使用CSS吗？

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

Answer 1

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

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：

#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）：

$(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");
});

您可以看到Live Demo here。

结果：

_{（来源：clip2net.com）}

Answer 2

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

Answer 3

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

Answer 4

我首先使用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}

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

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

Answer 5

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

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

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

<?php

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

?>

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

Answer 6

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

<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;
        }

        #StackOverflowBar {
            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() {
            $("#StackOverflowBar").append("<div>toolbar/announcement content</div>").fadeIn();
        });
    </script>
    <div id="StackOverflowBar"></div>
    Here's some content that will be below the toolbar. 
</body> 
</html>

说明：

包含的脚本是jQuery，here's a link，它可以让Google为您托管它。显然存在缺点，但我认为其好处超过了它们。

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

您还可以添加＆lt; noscript＆gt;如果您仍希望向其显示警报，则为未启用JavaScript的用户启用此部分。

Answer 7

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

你会如何编码：SO公告栏

7 个答案: