快速入门Layui

作者: 夜泊1990
企鹅: 1611756908
鹅群: 948233848
邮箱: hd1611756908@163.com
博客: https://hd1611756908.github.io/
B 站: https://space.bilibili.com/514155929/

第一章 Layui简介

Layui的简介

1	Layui(谐音:类UI) 是一款采用自身模块规范编写的前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用

Layui下载和目录结构

下载地址

1	https://res.layui.com/static/download/layui/layui-v2.5.7.zip?v=1

├─css //css目录
│  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│  │  ├─laydate
│  │  ├─layer
│  │  └─layim
│  └─layui.css //核心样式文件
├─font  //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│  └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件

第二章 Layui环境搭建

项目引入

1
2
3

获得 layui 后，将其完整地部署到项目目录（或静态资源服务器），但是页面中只需要引入夏下面两个文件即可:
-- layui/css/layui.css
-- layui/layui.js   提示：如果是采用非模块化方式（最下面有讲解），此处可换成：layui/layui.all.js

注意事项

1	注意事项: 在向项目中引入Layui库的时候，一定要将官网下载的整个Layui压缩包中的layui文件夹整体引到项目中.

搭建实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>layui页面引入例子</title>
        <!-- css引入 -->
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>

        <!-- HTML代码 -->

        <!-- js引入 -->
        <script src="layui/layui.js"></script>
    </body>
</html>

第三章 Layui的前端元素

第1节布局元素

Layui是一套响应式的前端框架(响应式这里不做介绍)，布局采用响应式框架通用的栅格系统进行布局，引入容器的概念，栅格系统和其他响应式框架一样将容器在水平方向进行12等分，将水平分为12列，可以满足当前绝大多数的设备屏幕的适配.

容器

固定宽度并且居中的容器

1
2
3

<div class="layui-container">
  
</div>

宽度不固定100%适应的容器

1
2
3

<div class="layui-fluid">

</div>

1
2
3

<div class="layui-row">
	
</div>

layui-col-lg*  --> *代表当前占12列中的多少列的宽度  -->  桌面≥1200px
layui-col-md*  -->  桌面≥992px
layui-col-sm*  -->  平板≥768px
layui-col-xs*  -->  手机<768px

列偏移

1	layui-col-md-offset* --> * 代表当前列向右偏移多少列

列嵌套

<div class="layui-container">
    <div class="layui-row">
		<div class="layui-col-md6">
			<div class="layui-row">
				<div class="layui-col-md6">
					
				</div>
				<div class="layui-col-md6">
					
				</div>
			</div>
    	</div>
    	<div class="layui-col-md6">
			<div class="layui-row">
	
			</div>
    	</div>
    </div>
</div>

第2节其他样式元素

字体图标

字体图标地址

1	https://www.layui.com/doc/element/icon.html

图标使用

1 2	<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i> 使用i标签作为基础标签，根据图标样式表查询class直接复制粘贴即可

按钮

用法

官网介绍了两个基础标签作为按钮的元素

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>

主题

主题样式

代码实现

原始	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"

尺寸

尺寸一

样式

cc1

代码实现

大型	class="layui-btn layui-btn-lg"
默认	class="layui-btn"
小型	class="layui-btn layui-btn-sm"
迷你	class="layui-btn layui-btn-xs"

尺寸二

样式

cc2

代码实现

大型百搭	class="layui-btn layui-btn-lg layui-btn-normal"
正常暖色	class="layui-btn layui-btn-warm"
小型警告	class="layui-btn layui-btn-sm layui-btn-danger"
迷你禁用	class="layui-btn layui-btn-xs layui-btn-disabled"

尺寸三

样式

cc3

代码实现

1	<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

表单

图示

sss

代码

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="city" lay-verify="required">
        <option value=""></option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
        <option value="4">杭州</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读" checked>
      <input type="checkbox" name="like[dai]" title="发呆">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="switch" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
 
<script>
//加载form模块，否则生成表单会出现问题
layui.use('form', function(){
	
});
</script>

表格

基础表格样例

代码实现

<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>昵称</th>
      <th>加入时间</th>
      <th>签名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心</td>
      <td>2016-11-29</td>
      <td>人生就像是一场修行</td>
    </tr>
    <tr>
      <td>许闲心</td>
      <td>2016-11-28</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
    </tr>
  </tbody>
</table>

基础属性

属性名	属性值	备注
lay-even	无	用于开启隔行背景，可与其它属性一起使用
lay-skin=”属性值”	line （行边框风格） row （列边框风格） nob （无边框风格）	若使用默认风格不设置该属性即可
lay-size=”属性值”	sm （小尺寸） lg （大尺寸）	若使用默认尺寸不设置该属性即可

代码示例

1
2
3

<table lay-even lay-skin="line" lay-size="lg">

</table>

第四章 Layui的模块化

1	Layui官网开头使用醒目的大字介绍了自己(经典模块化前端框架)，那么他的模块化表现在哪里呢？接下来我们开始说他的模块化

第1节弹出层

模块加载名称：layer

Layui要想使用模块首先就是页面中加载模块,加载模块的方式使用 layui.use(‘layer’,function(){ //执行的代码 });

1.1 消息提示

//加载layer模块
layui.use('layer', function(){
  //获取layer实例
  var layer = layui.layer;
  //调用layer里面的msg方法
  layer.msg('hello');
});

1.2 确认对话框

//eg1
layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
  //do something
  
  //关闭弹出框
  layer.close(index);
});

//eg2
layer.confirm('is not?', function(index){
  //do something
  
  //关闭弹出框
  layer.close(index);
});

1.3 页面(iframe层)

1
2
3

layer.open(options) - 原始核心方法，详见官网

https://www.layui.com/doc/modules/layer.html

第2节时间控件

模块加载名称：laydate

<input type="text" class="layui-input" id="test1">

<script>
    layui.use('laydate', function(){
      //获取daydata实例
      var laydate = layui.laydate;

      //执行一个laydate实例
      laydate.render({
        elem: '#test1' //指定元素
      });
    });
</script>

基础参数选项

elem - 绑定元素

1
2
3

laydate.render({ 
  elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
});

type - 控件选择类型

type可选值	名称	用途
year	年选择器	只提供年列表选择
month	年月选择器	只提供年、月选择
date	日期选择器	可选择：年、月、日。type默认值，一般可不填
time	时间选择器	只提供时、分、秒选择
datetime	日期时间选择器	可选择：年、月、日、时、分、秒

//年选择器
laydate.render({ 
  elem: '#test'
  ,type: 'year'
});
 
//年月选择器
laydate.render({ 
  elem: '#test'
  ,type: 'month'
});
 
//日期选择器
laydate.render({ 
  elem: '#test'
  //,type: 'date' //默认，可不填
});
 
//时间选择器
laydate.render({ 
  elem: '#test'
  ,type: 'time'
});
 
//日期时间选择器
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
});

format - 自定义格式

//自定义日期格式
laydate.render({ 
  elem: '#test',
  format: 'yyyy年MM月dd日'
});

trigger - 自定义弹出控件的事件

//自定义事件
laydate.render({ 
  elem: '#test',
  trigger: 'click' //采用click弹出
});

第3节数据表格

模块加载名称：table

数据表格样式

数据表格的生成

HTML

1	<table id="demo" lay-filter="test"></table>

<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80} 
      ,{field: 'sign', title: '签名', width: 177}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
  });
  
});
</script>

数据表格的默认数据格式

{
	"code": 0,
	"msg": "",
	"count": 1000,
	"data": [{
		"id": 10000,
		"username": "user-0",
		"sex": "女",
		"city": "城市-0",
		"sign": "签名-0",
		"experience": 255,
		"logins": 24,
		"wealth": 82830700,
		"classify": "作家",
		"score": 57
	}]
}

//默认请求的参数
当前页:page=1
每页显示多少条数:limit=30

数据表格的配置

1
2
3

详细配置参见地址:

https://www.layui.com/doc/modules/table.html

第4节表单

模块加载名称：form

地址

1	https://www.layui.com/doc/modules/form.html

第五章 Layui实战一

使用Layui框架实现CRUD

员工列表

添加员工

下拉列表生成以及弹出层生成

更新员工

重点就是更新员工,里面包括普通的字段回显,单选框回显和下拉框回显

—- 回显采用在父页面向弹出层传递一个参数隐藏在弹出层页面的input控件的方式

删除员工

删除主要是消息提示框

第1节员工列表

HTML

1	<table id="demo" lay-filter="test"></table>

<script type="text/javascript">
		 	
  layui.use(['table'],function(){

    var table = layui.table;
    var layer = layui.layer;
    var $ = layui.jquery;
    /* 
					获取员工列表
				 */
    table.render({
      elem:"#demo", # 设置指定数据表格生成的容器ID
        id:"tId",     # 设置数据表格刷新的ID
          url:"http://127.0.0.1:8080/getEmployeePage",  # 获取数据的请求地址
            page:true,   # 是否开启分页
              limit:5,     # 每页显示多少条数
                limits:[5,10,15],  # 动态修改页容量
                  request:{            # 自定义获取分页数据的请求参数默认为 page  limit
                    pageName:'pageNo',
                           limitName:'pageSize'
                          },
      parseData:function(d){   # 重新定义数据的返回格式成layui默认的格式
        return {
        code:d.code==200?0:d.code,
        count:d.obj.count,
        data:d.obj.data
      };
                           },
      cols:[[   # 数据表格的列设置
             {field:"empId",title:"员工编号",width:"14.2%",sort:true},
             {field:"empName",title:"员工名称",width:"14.2%",sort:true},
             {field:"age",title:"年龄",width:"14.2%",sort:true},
             {field:"gender",title:"性别",width:"14.2%",sort:true,templet:function(d){
               return d.gender==0?'女':'男';
             }},
             {field:"hireDate",title:"入职时间",width:"14.2%",sort:true},
             {field:"deptName",title:"部门",width:"14.2%",sort:true,templet:function(dd){
               return dd.department.deptName;
             }},
             {title:"操作",width:"15.5%",align:"center",templet:function(d){
               var str="<button type='button' class='layui-btn layui-btn-xs layui-btn-danger' lay-event='del'>删除</button>";
               str+="<button type='button' class='layui-btn layui-btn-xs layui-btn-warm' lay-event='edit'>更新</button>";
               return str;
             }}
            ]]
    });
  });
</script>

第2节弹出层(添加员工)

HTML

1	<button id="addEmpId" type="button" class="layui-btn layui-btn-fluid layui-btn-lg layui-btn-normal">添加员工</button>

/* 
	弹出添加弹窗
*/
$("#addEmpId").click(function(){
  layer.open({
    type:2,
    title:"添加员工",
    content:"./emp_add.html",
    area:["600px","500px"],
    shade:0.3,
    anim:5,
    end:function(){
    console.log("添加层被关闭了....");
    //刷新整合页面
    //location.reload();
    //只重载表格
    table.reload("tId");
   }
  });
});

第3节删除/更新员工

/*
	toolbar绑定工具条
*/
table.on('tool(test)',function(obj){
  //获取当前行数据
  var data = obj.data;
  console.log(data);
  //获取当前行点击的事件
  var e = obj.event;
  if(e=='del'){
    //弹出删除窗口,确认是否删除
    layer.confirm("是否删除?",{icon:3,title:"提示"},function(index){
      //调用AJAX删除后台数据--> 获取删除数据的ID
      $.getJSON("http://localhost:8080/deleteEmployee",{empId:data.empId},function(d){
        if(d.code!=200){
          //删除失败
          layer.msg(d.msg);
        }else{
          //关闭弹出层
          layer.close(index);
          //刷新表格
          table.reload("tId");
        }
      });
    });
  }else if(e=='edit'){
    //弹出更新弹出层
    layer.open({
      type:2,
      title:"更新员工",
      content:"./emp_update.html",
      area:["600px","500px"],
      shade:0.3,
      anim:5,
      end:function(){
        console.log("更新层被关闭了....");
        //只重载表格
        table.reload("tId");
      },
      success:function(layero,index2){
        //更新弹出层表单数据进行回显
        var body = layer.getChildFrame("body",index2);
        body.find("#empId").val(data.empId);//员工ID回显
        body.find("#empName").val(data.empName);//员工名称
        body.find("#age").val(data.age); //员工年龄
        body.find("#date").val(data.hireDate); //入职时间
        //性别回显
        body.find("input[name='gender'][value=0]").attr("checked",data.gender==0?true:false);
        body.find("input[name='gender'][value=1]").attr("checked",data.gender==1?true:false);
        //下拉部门回显,将部门ID传递到弹出层表单的隐藏域中
        body.find("#hiddenDeptId").val(data.department.deptId);
      }
    });
  }else{
    //其他
    layer.msg("对不起,功能还在路上...");
  }
});

第六章 Layui实战二

基于X-admin框架完成CRUD操作,X-admin是一款基于Layui的免费的后台管理框架

官网地址: http://x.xuebingsi.com/

员工列表

员工添加

员工更新

此框架的更新和原生的Layui更新有点不近相同,如果他采用原生方式获取不到从页面传递过来的隐藏数据

所以此框架采用通过url传递参数的方式获取父页面传递到弹出层的数据

员工删除

第一章 Layui简介

第二章 Layui环境搭建

第三章 Layui的前端元素

第1节 布局元素

第2节 其他样式元素

第四章 Layui的模块化

第1节 弹出层

1.1 消息提示

1.2 确认对话框

1.3 页面(iframe层)

第2节 时间控件

第3节 数据表格

第4节 表单

第五章 Layui实战一

第1节 员工列表

第2节 弹出层(添加员工)

第3节 删除/更新员工

第六章 Layui实战二

第1节布局元素

第2节其他样式元素

第1节弹出层

第2节时间控件

第3节数据表格

第4节表单

第1节员工列表

第2节弹出层(添加员工)

第3节删除/更新员工