Question

我非常嫉妒设计这个网站的人，尤其是页面顶部的“信息”栏，它经常会通知你。

我非常想在我的网站上看到这个，有没有人知道类似这样的可下载脚本？（PHP）

stackoverflow设计团队的回答会很好！ ;）

Answer 1

这将主要通过jQuery完成。这只是定期查询服务器的问题：

setInterval(function(){
  $.post("getUpdates.php", function(response){
    showInfoBar(response);
  });
}, 10000);

那将每10秒请求更新一次。一旦页面加载，你也可以这样做。至于getUpdates.php中的PHP代码：

if (!isset($_SESSION["userid"]))
  die("You are not logged in");

$updates = getUpdatesForUser($_SESSION["userid"]);
if ($updates) {
  print json_encode($updates);
} else {
  print "No updates";
}

对于get-updates，您可以将其作为数据库中的表来执行：

userid |         time        | updatemsg
-------------------------------------------------------------
   28  | 2009-08-21 12:53:02 | You've received the 'uber' badge.

获取用户更新就像查询此表以获取所有新更新一样简单。您可以创建一个字段来指示何时发送更新，并且不应再次发送。

这一切都非常精彩，但应该给你一个如何实现它的基本概念。

Answer 2

查看 - ＆gt;源

            <div id="topbar">

                <div id="hlinks">
                    <a href="/users/recent/144496"><img src="http://sstatic.net/so/img/replies-off.png" width="15" height="10" title="you have no new replies"></a>
                    <a href="/users/144496/martin" >Martin</a>&nbsp;<span class="reputation-score" title="reputation score">741</span><span title="9 bronze badges"><span class="badge3">&#9679;</span><span class="badgecount">9</span></span>
<span class="link-separator">|</span>

                    <a href="/users/logout?returnurl=%2fquestions%2f1320043%2fthe-stackoverflow-info-bar-at-the-top-of-the-page">logout</a>
<span class="link-separator">|</span>

                    <a href="/about">about</a> <span class="link-separator">|</span> <a href="/faq">faq</a>
                </div>
                <div id="hsearch">
                    <form id="search" action="/search" method="get">
                    <div>
                        <input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="80" size="28" value="search">

                    </div>
                    </form>
                </div>
            </div>

然后查看CSS。

Answer 3

比它看起来容易一百万倍。

你只需使用jQuery，有一个宽度为100％的div，左：0;顶部：0;然后用一些jQuery动画函数显示它。

Answer 4

您可以使用jQuery框架实现相同的功能。它真的很容易做到。

如何在stackoverflow.com上创建页面顶部的信息栏？

4 个答案: