Question

我正在使用bootstrap 3编写一个类似Facebook的通知系统。我正在使用带有下拉菜单类

的bootstrap ul元素

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-microphone"></i> Notifications</a>
          <ul class="dropdown-menu">
                        <li><a href="#"><span class="label label-primary">7:00 AM</span> Hi :)</a></li>
                        <li role="presentation" class="divider"></li>
                        <li><a href="#"><span class="label label-primary">8:00 AM</span> How are you?</a></li>
                        <li role="presentation" class="divider"></li>
                        <li><a href="#"><span class="label label-primary">9:00 AM</span> What are you doing?</a></li>
                        <li class="divider"></li>
                        <li><a href="#" class="text-center">View All</a></li>
          </ul>
          </li>

现在li值只是硬编码。

我需要在UI上显示用户拥有的通知数量，就像facebook一样。请看下面的示例图片，我需要显示通知数量，就像2＆amp;显示12。我不是一个灵巧的javascript编码器我更像是一个后端java程序员。任何人都可以指导我如何实现这一目标的正确方向？是否有任何bootstrap插件或其他东西来实现这一目标？我在网上做了我的研究，但没有找到太多。任何帮助将不胜感激。

Answer 1

我会这样做：

＆＃13;

$("#icon1 > var").text("8");

＆＃13;

.icon {
  width:64px;
  height:64px;
  position:relative;
  background:yellow;
}

.icon > var {
  position:absolute;
  top:0;
  right:0;
  padding:2px 8px;
  background: red; color: white;
  border-radius:3px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=icon id="icon1">
  <var></var>  
</div>

＆＃13;

Answer 2

使用jquery，您可以计算包含通知文本的子元素。

像

var notification_count = $(".dropdown li:has(a)").length - 1

这样做会给你通知计数。（-1表示＆＃34;查看全部＆＃34;元素）。

对于通知图标：

您不需要图像作为通知计数。只需使用纯html css放置div或span或其他内容：

＆＃13;

.notification-count{
    height:30px;
    line-height:30px;
    padding:5px 7px;
    background-color:red;
    color:white;
    border-radius:4px;
}

＆＃13;

<span class="notification-count">3</span>

＆＃13;

您可以根据父母的意见来定位。

Answer 3

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-microphone"></i> Notifications <span class="badge">5</span> </a>
      <ul class="dropdown-menu">
                    <li><a href="#"><span class="label label-primary">7:00 AM</span> Hi :)</a></li>
                    <li role="presentation" class="divider"></li>
                    <li><a href="#"><span class="label label-primary">8:00 AM</span> How are you?</a></li>
                    <li role="presentation" class="divider"></li>
                    <li><a href="#"><span class="label label-primary">9:00 AM</span> What are you doing?</a></li>
                    <li class="divider"></li>
                    <li><a href="#" class="text-center">View All</a></li>
      </ul>
      </li>

Jquery bootstrap facebook风格通知

3 个答案: