前端框架Layui学习二：面板、布局、徽章、时间线、颜色选择器
Layui
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，拿来即用。
一、面板
1.卡片面板
卡片式面板：面板通常用于非白色背景色的主体内
从而映衬出边框投影。结合 layui 的栅格系统轻松实现响应式布局。
相关样式：
layui-row 代表一行
layui-col-space15 space0-space30代表卡片之间的间距
layui-col-md6 代表一列 md1-md12 代表当前卡片占整行的x/12
layui-card 代表一个卡片
layui-card-header 代表卡片头信息
layui-card-body 代表卡片内容样式
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>卡片面板</legend>
</fieldset>
<div style="padding: 20px; background-color: #F2F2F2;">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">卡片面板</div>
<div class="layui-card-body">
卡片式面板面板通常用于非白色背景色的主体内<br>
从而映衬出边框投影
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">卡片面板</div>
<div class="layui-card-body">
结合 layui 的栅格系统<br>
轻松实现响应式布局
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">标题</div>
<div class="layui-card-body">
内容
</div>
</div>
</div>
</div>
</div>
</body>
2.普通折叠面板
相关样式：
layui-collapse 代表一个折叠面板
layui-colla-item 代表一个折叠项
layui-colla-title 代表折叠项的显示标题
layui-colla-content 代表折叠项的内容
layui-show 是否展开
相关事件
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规折叠面板</legend>
</fieldset>
<div class="layui-collapse" lay-filter="test">
<div class="layui-colla-item">
<h2 class="layui-colla-title">请选择最喜欢的动漫？</h2>
<div class="layui-colla-content">
<p>1、火影 2、海贼王 3、犬夜叉</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">要加油哦</h2>
<div class="layui-colla-content">
<p>好的好的</p>
</div>
</div>
</div>
<script src="../static/css/layui.js"></script>
<script type="text/javascript">
layui.use(["jquery","element"],function() {
let $ = layui.jquery;
var element = layui.element;
element.on('collapse(test)', function (data) {
console.log(data.show);
console.log(data.title);
console.log(data.content);
})
})
</script>
</body>
3.手风琴面板
在普通面板上加lay-accordion=""
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规折叠面板</legend>
</fieldset>
<div class="layui-collapse" lay-filter="test" lay-accordion="">
<div class="layui-colla-item">
<h2 class="layui-colla-title">请选择最喜欢的动漫？</h2>
<div class="layui-colla-content">
<p>1、火影 2、海贼王 3、犬夜叉</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">要加油哦</h2>
<div class="layui-colla-content">
<p>好的好的</p>
</div>
</div>
</div>
<script src="../static/css/layui.js"></script>
<script type="text/javascript">
layui.use(["jquery","element"],function() {
let $ = layui.jquery;
var element = layui.element;
element.on('collapse(test)', function (data) {
console.log(data.show);
console.log(data.title);
console.log(data.content);
})
})
</script>
</body>
二、布局
相关样式：
layui-row ：行
layui-col-xs6 移动设备占比
layui-col-sm6 平板设备占比
layui-col-md6 桌面设备占比
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../static/css/layui.css">
<style>
.grid-demo{
height: 20px;
background: green;
}
.grid-demo-bg1{
background: #00F7DE;
}
</style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>始终等比例水平排列</legend>
</fieldset>
<div class="layui-row">
<div class="layui-col-xs6">
<div class="grid-demo grid-demo-bg1">6/12</div>
</div>
<div class="layui-col-xs6">
<div class="grid-demo">6/12</div>
</div>
</div>
</body>
三、徽章
1.组合使用
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>小徽章、大家族</legend>
</fieldset>
<blockquote class="layui-elem-quote layui-quote-nm">
小圆点：
<span class="layui-badge-dot"></span>
<span class="layui-badge-dot layui-bg-orange"></span>
<span class="layui-badge-dot layui-bg-green"></span>
<span class="layui-badge-dot layui-bg-cyan"></span>
<span class="layui-badge-dot layui-bg-blue"></span>
<span class="layui-badge-dot layui-bg-black"></span>
<span class="layui-badge-dot layui-bg-gray"></span>
<br><br>常规弧形徽章：
<span class="layui-badge">6</span>
<span class="layui-badge">99</span>
<span class="layui-badge">61728</span>
<span class="layui-badge">赤</span>
<span class="layui-badge layui-bg-orange">橙</span>
<span class="layui-badge layui-bg-green">绿</span>
<span class="layui-badge layui-bg-cyan">青</span>
<span class="layui-badge layui-bg-blue">蓝</span>
<span class="layui-badge layui-bg-black">黑</span>
<span class="layui-badge layui-bg-gray">灰</span>
<br><br>边框徽章：
<span class="layui-badge-rim">6</span>
<span class="layui-badge-rim">Hot</span>
</blockquote>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>与其它元素的搭配</legend>
</fieldset>
<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
<button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>
</body>
四、时间线
1.常规时间线
相关样式：
layui-timeline：代表一个时间线
layui-timeline-item：代表一个时间节点
layui-timeline-axis：代表左边的竖线
layui-timeline-content：时间线的内容
layui-text：代表文本
layui-timeline-title：代表标题，可以分为标题和内容
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规时间线</legend>
</fieldset>
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月10日</h3>
<p>
第一天
<br>火影
<br>忍者 <i class="layui-icon"></i>
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月11日</h3>
<p>
第二天
<br><em>“海贼王”</em>
<br>路飞 <i class="layui-icon"></i>
</p>
<ul>
<li>《登高》</li>
<li>《茅屋为秋风所破歌》</li>
</ul>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月12日</h3>
<p>
第三天
<br>加油
<br>一起努力
<br>未来
<br>无限光明
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">过去</div>
</div>
</li>
</ul>
</body>
2.简约时间线
和常规时间线相比就是没有区分标题和内容
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>简约时间线：大事记</legend>
</fieldset>
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">第一天：看火影</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">第二天：看犬夜叉</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">第三天：看海贼王</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">第四天：打游戏</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">未来：一直嗨一直爽</div>
</div>
</li>
</ul>
</body>
五、颜色选择器
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规使用</legend>
</fieldset>
<div style="margin-left: 30px;">
<div id="test1"></div>
<div id="test2" style="margin-left: 30px;"></div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>表单赋值</legend>
</fieldset>
<div style="margin-left: 30px;">
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-input-inline" style="width: 120px;">
<input type="text" value="" placeholder="请选择颜色" class="layui-input" id="test-form-input">
</div>
<div class="layui-inline" style="left: -11px;">
<div id="test-form"></div>
</div>
</div>
</form>
</div>
<script src="../static/css/layui.js"></script>
<script type="text/javascript">
layui.use(["jquery","element","colorpicker","layer"],function() {
let $ = layui.jquery;
var element = layui.element;
var colorpicker = layui.colorpicker;
var layer = layui.layer;
//常规使用
colorpicker.render({
elem: '#test1' //绑定元素
,change: function(color){ //颜色改变的回调
layer.tips('选择了：'+ color, this.elem, {
tips: 1
});
}
});
//初始色值
colorpicker.render({
elem: '#test2'
,color: '#2ec770' //设置默认色
,done: function(color){
layer.tips('选择了：'+ color, this.elem);
}
});
//表单赋值
colorpicker.render({
elem: '#test-form'
,color: '#1c97f5'
,done: function(color){
$('#test-form-input').val(color);
}
});
});
</script>
</body>