Question

我正在寻找类似Facebook的通知栏;那些说你有多少“朋友请求”，“通知”或“消息”的人。是否有任何花哨的实现，我们可以使用bootstrap，foundation或...或者我需要使用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();
})

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

像Facebook这样的通知栏

1 个答案: