facebook - Facebook 等通知栏

Question

我正在寻找类似 Facebook 通知栏的东西；那些说你有多少“朋友请求”、“通知”或“消息”。有什么用引导程序、基础或……我们可以使用的花哨的东西吗？或者我需要使用 CSS 和.. 来创建我自己的？

谢谢

Answer 1

Bootstrap 实际上已经内置了这个概念，它称之为徽章：

• http://twitter.github.io/bootstrap/components.html#labels-badges

似乎有人以前有过这个想法，但它是用于一个名为 CakePHP 的库，我看不到任何简单的方法来提取信息：

• https://github.com/beeman/cakephp-bootstrap-notifications/blob/master/README.md

我在这里找到了一个很好的示例片段，但是通知徽章在左侧而不是在右上角：

• http://jsfiddle.net/WBTf8/1/

其中有这样的标记：

<div class="navbar" style="position: static;">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Title</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li>
              <a href="#" 
                 data-html="true"
                 data-placement="bottom"
                 data-toggle="popover"
                 data-content="Notification 1<br/>Notification 2"
                 data-original-title="Notifications">
                  <span class="badge badge-success">2</span> Notifications
              </a>
          </li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!-- /.nav-collapse -->
    </div>
  </div><!-- /navbar-inner -->
</div>

和这样的启动功能：

$(function() {
    $('[data-toggle=popover]').popover();
})

它使用弹出框来显示通知。您仍然需要编写更多代码才能将其转变为一项功能，尽管例如能够在页面加载时将通知推送到客户端，在用户打开通知菜单时将它们标记为已处理，并将该信息传回到数据存储。