页面元素之徽章
2020-04-11 本文已影响0人
小疏林er
1、基本使用
徽章通常作为修饰性元素，与其他元素、模块组合使用（导航、选项卡等等），起到新消息提醒、计数等作用。
layui为我们提供了三种风格的徽章,我们只要按需要讲对应的类添加到<span></span>之间即可。
（1）小圆点class="layui-badge-dot"
- 小圆点徽标里面不可以加文字！（其实可以加，但是它太小了，加了后不好看，还需要各种调）
- 默认徽标是红色的，可以通过添加layui-bg-color来更改，也可以使用css更改(尺寸啥的也能改，但这大小就差不多够用)。
<div style="text-align: center;margin-top: 100px;"> <span class="layui-badge-dot "></span> <span class="layui-badge-dot layui-bg-orange"></span> <span class="layui-badge-dot" style="background-color:#009688 ;height: 30px;width: 30px;"></span> </div>image.png
（2）椭圆体class="layui-badge"
- 所谓的椭圆体就是加了圆角的div（无边框）
- 椭圆体中可以加内容，一般都添加数字，作为新消息提醒使用。
<div style="text-align: center;margin-top: 100px;"> <span class="layui-badge" >99+</span> <span class="layui-badge layui-bg-orange">21</span> <span class="layui-badge layui-bg-green">55</span> </div>image.png
（3）边框体class="layui-badge-rim"
- 边框体和椭圆体相比，多了一圈边框。
- 默认状态是白色，有需要可以添加颜色（（1）里面有提到）。
<div style="text-align: center;margin-top: 100px;"> <span class="layui-badge-rim">6</span> <span class="layui-badge-rim layui-bg-green">6</span> <span class="layui-badge-rim layui-bg-red">Hot</span> </div>image.png
2、动态更改
设想效果：
页面由两个按钮和应该字体图标组成，点击新来消息按钮，微信图标右上角新增徽章并显示1，而后每点一次新增显示数+1，大于99时显示99+。点击删除消息按钮时，消息数-1，减到0时徽标隐藏。
image.png
* 代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script> <!-- (1) -->
<script type="text/javascript" src="layui/layui.js" ></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<style type="text/css">
div i{
color: #009688;
}
i span{
position:relative;
top: -30px ;
left: -15px;
}
</style>
<script>
$(function(){
var cnt = 0;
$('#btn1').click(function(){
cnt ++;
if(cnt>=1&&cnt<=99){
$('#badge1').css("display","inline-block" ) //(2)
$('#badge1').addClass("layui-badge") //(3)
$('#badge1').html(cnt) //(4)
}else if(cnt>99){
cnt=99;
$('#badge1').html(cnt+'+')
}
})
$('#btn2').click(function(){
cnt --;
if(cnt>=1){
$('#badge1').html(cnt)
}else if(cnt<=0){
cnt=0;
$('#badge1').css("display"," none" ) //(5)
}
})
})
</script>
</head>
<body>
<div style="text-align: center;margin-top: 100px;">
<i class="layui-icon"style="font-size: 50px;"> <!-- (6) -->

<span id="badge1"></span>
</i>
</div>
<div style="text-align: center;margin-top: 100px;">
<button class="layui-btn" id="btn1">新来一条消息</button>
<button class="layui-btn" id="btn2">删除一条消息</button>
</div>
</body>
</html>
注：对应代码上的（1）（2）。。。
（1）别忘了引入jQuery！
（2）$('#badge1').css("display","inline-block" ):这句话的作用是将隐藏的徽标显示出来（减到0时将徽标隐藏了），查源码时发现徽标是以inline-block形式显示的，所以隐藏后又用css（）把none改成inline-block，将徽标显示出来。
（3）$('#badge1').addClass("layui-badge"):开始时span标签并无class，所以一开始没有徽章，点击后cnt>=1才添加图标。
（4）$('#badge1').html(cnt):将cnt添加到<span></span>之间，从而达到显示的目的。
（5）$('#badge1').css("display"," none" )：将span标签进行隐藏。
菜鸟教程中css-display属性.png
（6）<i class="layui-icon"style="font-size: 50px;">：更改图标大小，内嵌在<i>中才好用！
效果图：
image.png
3、综合使用
我为了省事儿之间把以前的导航栏代码复制过来了，将徽章之间粘贴进去，就成了这个样子。
image.png
但是将它显示出来体现不出来技术，如何进行动态加载、修改才是重要的。（俺也不知道咋整）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="layui/layui.js" ></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript">
layui.use('element',function(){
//加载模块
var element = layui.element;
})
</script>
</head>
<body>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item ">
<a href="javascript:;" >信息维护</a>
<dl class="layui-nav-child ">
<dd><a href="">社区信息维护</a></dd>
<dd><a href="">单元信息维护</a></dd>
<dd><a href="">住户信息维护</a></dd>
</dl>
</li>
<li class="layui-nav-item "><a href="">社区服务</a></li>
<li class="layui-nav-item layui-this"><a href="">生活缴费</a></li>
<li class="layui-nav-item"><a href="">社区公告<span class="layui-badge" id="badge1">99+</span></a></li>
<li class="layui-nav-item"><a href="">个人信息<span class="layui-badge-dot layui-bg-green"></a></li>
<li class="layui-nav-item"><a href="">关于我们</a></li>
</ul>
<div class="layui-tab ">
<ul class="layui-tab-title layui-bg-green">
<li class="layui-this">物业费</li>
<li>取暖费</li>
<li>水费<span class="layui-badge-dot "></li>
<li>电费</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show"style="text-align: center;">
<i class="layui-icon "style="font-size: 100px;"></i>
<h1>不想给你！</h1>
</div>
<div class="layui-tab-item"style="text-align: center;">
<i class="layui-icon "style="font-size: 100px;"></i>
</div>
<div class="layui-tab-item"style="text-align: center;">
<i class="layui-icon "style="font-size: 100px;"></i>
</div>
<div class="layui-tab-item"style="text-align: center;">
<i class="layui-icon "style="font-size: 100px;"></i>
</div>
</div>
</div>
</body>
</html>
