Html 引导导航栏通知标志
我正在建立一个网站,允许用户互相发送消息。我使用AJAX获得了大量新消息。因此,我只需要找到一种方法,如何在用户的导航栏中显示徽章 以下是我想要实现的目标: 我希望使用Html 引导导航栏通知标志,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在建立一个网站,允许用户互相发送消息。我使用AJAX获得了大量新消息。因此,我只需要找到一种方法,如何在用户的导航栏中显示徽章 以下是我想要实现的目标: 我希望使用1创建徽章 我的导航栏代码: <nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-laravel" style="margin-bottom: 20px;"> <div class="container">
1
创建徽章
我的导航栏代码:
<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-laravel" style="margin-bottom: 20px;">
<div class="container">
<a class="navbar-brand" href="#">Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="messages">Messages <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">People <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Photos <span class="sr-only">(current)</span></a>
</li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<li><a class="nav-link" href="#">Login</a></li>
<li><a class="nav-link" href="#">Register</a></li>
</ul>
</div>
</div>
</nav>
-
-
-
-
根据您发布的图像,您可以在消息
家长中添加徽章,如下所示:
<li class="nav-item">
<span class="badge badge-pill badge-primary" style="float:right;margin-bottom:-10px;">1</span> <!-- your badge -->
<a class="nav-link" href="messages">Messages <span class="sr-only">(current)</span></a>
</li>
1.
(假设不需要javascript,因为您已经准备好了ajax
函数来更新徽章值)
当然,您可以将内联样式提取到外部样式表
(这是一把小提琴)
希望这有帮助。您所描述的是动态行为。您需要一些javascript来监听消息并在dom上为您动态创建元素。或者,如果您正在进行服务器端编程,您可以在后端实现它,并在页面加载时通过api向上游传递它。我已经每5秒有一个AJAX调用来检查新消息,所以我知道用户何时收到新消息以及他有多少新消息。我只需要在导航栏上加一个徽章就可以通知他了。哦!在这种情况下,您是否在ajax的成功处理程序中尝试了一个循环,该循环将遍历集合并执行类似于$(“#Messages”).append('totalCount')
?似乎您只需对所有这些进行快速计数,然后将其附加到导航上的li
中。