前言
因为公司用的前端框架是LayUI,之前都没有接触过,所以最近都在自学LayUI，可以直接通过官方文档进行学习，学习之后发现其实所有前端框架都差不多,以下为笔记内容.
一、简要介绍
- 概念
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用 ，其他UI框架:Bootstrap . Element . EasyUI . LayUI等等.
- LayUI的使用
1）官网首页下载：https://www.layui.com/
目录结构：
2）引入layui核心文件:
layui/css/layui.css // layui中内置的样式
layui/layui.js //layui中核心的js插件(模块化使用) layui/layui.all.js // layui中所有的js
3）示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<!-- 注意：
1. 在JS引入时 若引入多个JS, JS之间存在依赖性.则优先引入被依赖的JS
2. 一般引入JS,在body的最后面引入,因为代码自上而下的执行,这样可以等页面的DOM元素都加载了引入JS,避免不生效和异常问题-->
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['form','jquery'],function(){
//初始化模块的对象
// 初始化jquery对象
var $ = layui.jquery;
//初始化form表单模块对象
var form = layui.form;
});
</script>
</body>
</html>
二、页面元素
1.布局
栅格系统：容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用.
- 栅格布局规则
1）采用 layui-row 来定义行
2）采用类似 layui-col-md** 这样的预设类来定义一组列（column），且放在行（row）内。其中：变量md* 代表的是不同屏幕下的标记（可选值见下文）变量**代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
3）列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
4）可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的内边距的间距和偏移(自身所在容器的12等份)。
5）最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局
2.颜色
| 样式 | 颜色 |
|---|---|
| class=“layui-bg-red” | 赤色,比较引人注意的颜色 |
| class=“layui-bg-orange” | 橙色,一般用于提示性元素 |
| class=“layui-bg-green” | 墨绿,通常用于按钮、及任何修饰元素 |
| class="layui-bg-cyan " | 藏青：侧边或底部普遍采用的颜色 |
| class=“layui-bg-blue” | 蓝色：比较适合一些鲜艳色系的页面 |
| class=“layui-bg-black” | 雅黑：通常用于导航 |
| class=“layui-bg-gray” | 银灰：背景、边框 |
3.字体图标
- 通过对一个内联元素（一般推荐用 i标签）设定 class=“layui-icon”，来定义一个图标.然后对元素加上图标对应的字体图标.
1）layui-icon : 表示是一个字体图标
2）layui-icon-XXXX:具体的内置图标
3）字体图标在LayUI中有两种表现方式
-
1.使用class样式
-
2.使用图标字符集
<p>字体图标</p>
<!-- 使用class样式 -->
<i class="layui-icon layui-icon-rate"></i>
<!-- 使用特殊的字体字符集 -->
<i class="layui-icon"></i>
4.动画
- 内置动画,使用: class=“layui-anim” 表示是动画,动画Layui内置8种,后面跟具体的动画效果
| 动画样式 | 动画效果 |
|---|---|
| class=“layui-anim layui-anim-up” | 从最底部往上滑入 |
| class=“layui-anim layui-anim-upbit” | 微微向上划入 |
| class=“layui-anim layui-anim-scale” | 平滑放大 |
| class=“layui-anim layui-anim-scaleSpring” | 弹簧式放大 |
| class=“layui-anim layui-anim-fadein” | layui-anim-fadein |
| class=“layui-anim layui-anim-fadeout” | 渐隐 |
| class=“layui-anim layui-anim-rotate” | 360旋转 |
| class=“layui-anim layui-anim-loop” | 循环动画 |
5.按钮（常用）
- 使用class = “layui-btn” 表示按钮样式
1）颜色
| 名称 | 组合 |
|---|---|
| 原始 | class=“layui-btn layui-btn-primary” |
| 默认 | class=“layui-btn” |
| 百搭 | class=“layui-btn layui-btn-normal” |
| 暖色 | class=“layui-btn layui-btn-warm” |
| 警告 | class=“layui-btn layui-btn-danger” |
| 禁用 | class=“layui-btn layui-btn-disabled” |
2）尺寸
3）形状
- class=" layui-btn-radius" :表示圆角
4）图标按钮: 即将button和i标签使用字体图标结合
<button class="layui-btn layui-btn-lg layui-btn-danger">
<i class="layui-icon layui-icon-fire"></i>按钮
</button>
5）按钮组
class=“layui-btn-group” 将多个按钮放在一起,可以缩小默认的按钮之间的间隙
6.导航
- layui默认导航是水平导航,使用: class=“layui-nav”，class=“layui-nav-item” : 表示导航中的项
1）水平导航（class=“layui-nav” ）
- class=“layui-nav-item” 表示导航中的具体项
- class=“layui-nav-child” 表示导航项中的子项
- class=“layui-this” 表示当前被选中的项
2）垂直导航（class=“layui-nav layui-nav-tree”）
- class=“layui-nav-itemed” : 被展开的导航项
- class=“layui-nav-side” : 会垂直占一列
7.Tab选项卡
导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能.在layui中,**class=“layui-tab”**表示是一个选项卡
- class=“layui-tab-title” : 表示选项卡的标题
- class=“layui-this” : 表示当前被选中的项
- class=“layui-tab-content” : 表示选项卡中的内容
- class=“layui-tab-item” : 表示内容项
- class=“layui-show” : 表示当前内容项会展示
1）选项卡风格
2）特殊属性
3）事件
4）示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<div class="layui-tab" lay-allowClose="true" lay-filter="myTab">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item ">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
<button id="addBtn">新增一个选项卡</button>
<button id="addBtn2">切换选项卡</button>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['element','jquery'],function(){
var element = layui.element;
var $ = layui.jquery;
//选项卡事件:
//选项卡切换事件
element.on('tab(myTab)',function(data){//tab(lay-filter的值)
console.log(data);
//当前选项信息: 整个选项卡信息以及当前信息
console.log(data.elem);
console.log("get(0):"+data.elem.get(0));
// 获取上一个选项
console.log(data.elem.prevObject);
//所在选项卡的下标索引, 从 0 开始
console.log(data.index);
});
//选项卡删除事件
element.on('tabDelete(myTab)', function(data){//tab(lay-filter的值)
console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
console.log(data.elem); //得到当前的Tab大容器
});
//为按钮绑定点击事件
$("#addBtn").click(function(){
//新增选项卡
var tab = {
title: '新增选项卡的标题',
content: '选项卡的内容', //支持传入html
id: '999'
};
element.tabAdd("myTab", tab);
});
//切换选项卡
$("#addBtn2").click(function(){
//切换选项卡 tabChange("lay-filter的值", lay-id值);
element.tabChange("myTab", 999);
});
});
</script>
</body>
</html>
8.进度条
在layui中,使用class="layui-progress"表示进度条.
-
class=“layui-progress-bar” 表示具体的进度条
-
class=“layui-progress-big” 表示尺度大号
1）属性
2）事件
3）示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding: 100px">
<!-- 表示进度条 -->
<div class="layui-progress" lay-showPercent="true" lay-filter="myProgress">
<div class="layui-progress-bar" lay-percent="0%" id="myProgressBar"></div>
</div>
<button id="btn1">开始涨涨涨</button>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['element','jquery'],function(){
var element = layui.element;
var $ = layui.jquery;
//点击按钮后 让进度条进度增涨
$("#btn1").click(function(){
var m = 10;
window.setInterval(function(){
var v = m+"%";
m = m+10;
if(m > 100){
m = 100;
}
//获取进度条的值
element.progress('myProgress', v);
}, 1000);
});
});
</script>
</body>
</html>
9.面板
在layui中,面板是指:一个独立的容器,装元素，而折叠面板则能有效地节省页面的可视面积.
1）普通面板（class=“layui-card” ）
-
class=“layui-card-header” 面板的头部信息
-
class=“layui-card-body” 面板内容
2）折叠面板（class=“layui-collapse”）
-
class=“layui-colla-item” : 折叠面板中的项
-
class=“layui-colla-title” : 折叠面板中的项中的标题
-
class=“layui-colla-content” : 折叠面板项中的内容
-
class=“layui-show” : 折叠面板中 展开的项
3）属性
4）事件
5）示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding-left: 100px">
<h1>普通面板</h1>
<div class="layui-card">
<div class="layui-card-header">面板标题</div>
<div class="layui-card-body">
面板内容
</div>
</div>
<h1>折叠面板</h1>
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content ">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content ">内容区域</div>
</div>
</div>
<h1>手风琴面板---只能显示一个</h1>
<div class="layui-collapse" lay-accordion lay-filter="myPanel">
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
</div>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['element','jquery'],function(){
var element = layui.element;
var $ = layui.jquery;
//监听面板的展开或者收缩
element.on('collapse(myPanel)', function(data){
//console.log(data);
console.log(data.show); //得到当前面板的展开状态，true或者false
console.log(data.title); //得到当前点击面板的标题区域DOM对象
console.log(data.content); //得到当前点击面板的内容区域DOM对象
});
});
</script>
</body>
</html>
10.时间线
在layui中,使用class="layui-timeline"表示时间线.
-
class=“layui-timeline-item” 表示实现线中的项
-
class="layui-timeline-content 表示时间线的内容
-
class=“layui-timeline-title” 表示内容的标题
使用<p>标签表示具体的内容
1）示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入layui的css样式 -->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body style="padding-left: 100px">
<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月18日</h3>
<p>
layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
<br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
<br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layuiicon">! </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月16日</h3>
<p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个
人最爱的名篇有：</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月15日</h3>
<p>
中国人民抗日战争胜利72周年
<br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
<br>铭记、感恩
<br>所有为中华民族浴血奋战的英雄将士
<br>永垂不朽
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis" style="color:red"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">过去</div>
</div>
</li>
</ul>
<!-- 引入layui中JS -->
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
//初始化layui模块
layui.use(['element','jquery'],function(){
var element = layui.element;
var $ = layui.jquery;
});
</script>
</body>
</html>