如何像 stackoverflow.com 一样在页面顶部制作信息栏?

发布于 2024-08-02 14:28:15 字数 1539 浏览 9 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

过潦 2024-08-09 14:28:15

这主要是通过 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.

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

这一切都非常杂乱,但应该让您对如何完成它有一个非常基本的了解。

This will largely be done with jQuery. It's just a matter of periodically querying the server:

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

That would request updates every 10 seconds. You could do this once the page loads too. As for the PHP code in getUpdates.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";
}

As for the get-updates, you can do that as a table in your database:

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

Getting a users updates is as easy as querying this table for all new updates. You could create a field to indicate when an update has been sent, and should not be sent again.

This is all very thrown-together, but should give you a very basic idea of how to accomplish it.

终弃我 2024-08-09 14:28:15

查看->来源

            <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> <span class="reputation-score" title="reputation score">741</span><span title="9 bronze badges"><span class="badge3">●</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。

View -> Source

            <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> <span class="reputation-score" title="reputation score">741</span><span title="9 bronze badges"><span class="badge3">●</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>

Then check out the CSS.

北城半夏 2024-08-09 14:28:15

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

你只需使用 jQuery,有一个宽度为 100%、left : 0 的 div;顶部:0;然后用一些 jQuery 动画功能来展示它。

It's a million times easier than it looks.

You just use jQuery, have a div that is width 100%, left : 0; top : 0; and then show it with some jQuery animation function.

甲如呢乙后呢 2024-08-09 14:28:15

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

You can achieve the same functionality with jQuery framework.
Its really easy to do.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文