1_Layui

一. 引言

• 官网: https://www.layui.com/
• 在官网首页, 可以很方便的下载Layui
• Layui是一款经典模块化前端UI框架, 我们只需要定义简单的HTML,CSS,JS即可实现很复杂的前端效果
• 使得前端页面的制作变得更加简单

二. 环境搭建

2.1 下载

• 在官网即可完成下载

2.2 导入依赖

• 下载的Layui解压后, 将其中的layui目录导入到项目中(放在web目录下)
• 然后在页面中引入layui

<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>

• 也可以使用第三方CDN的方式引入
  • UNPKG 和 CDNJS 均为第三方开源免费的 CDN，通过 NPM/GitHub 实时同步。另外还有 LayuiCDN。

<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.7/dist/css/layui.css">

<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.7/dist/layui.js">

三. 页面元素

3.1 布局

• 响应式栅格布局, 每行分12等分

<%--layui-container居中显示有固定尺寸; layui-fluid沾满行宽--%>
<%--<div class="layui-fluid">--%>
<div class="layui-container">
    常规布局（以中型屏幕桌面为例）：
    <div class="layui-row">
        <div class="layui-col-md9 layui-bg-blue">
            你的内容 9/12
        </div>
        <div class="layui-col-md3 layui-bg-orange">
            你的内容 3/12
        </div>
    </div>

    移动设备、平板、桌面端的不同表现：
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            移动：6/12 | 平板：6/12 | 桌面：4/12
        </div>
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            移动：6/12 | 平板：6/12 | 桌面：4/12
        </div>
        <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
            移动：4/12 | 平板：12/12 | 桌面：4/12
        </div>
        <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
            移动：4/12 | 平板：7/12 | 桌面：8/12
        </div>
        <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
            移动：4/12 | 平板：5/12 | 桌面：4/12
        </div>
    </div>
</div>

3.2 字体图标

• class="layui-icon 具体的图标样式"

从 layui 2.3.0 开始，支持 font-class 的形式定义图标：
<i class="layui-icon layui-icon-face-heart"></i>
你可以去定义它的颜色或者大小，如：
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>

3.3 按钮

• class="layui-btn 主题样式"

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

主色	class="layui-btn layui-btn-primary layui-border-green"
百搭	class="layui-btn layui-btn-primary layui-border-blue"
暖色	class="layui-btn layui-btn-primary layui-border-orange"
警告	class="layui-btn layui-btn-primary layui-border-red"
深色	class="layui-btn layui-btn-primary layui-border-black"

原始	class="layui-btn layui-btn-radius layui-btn-primary"
默认	class="layui-btn layui-btn-radius"
百搭	class="layui-btn layui-btn-radius layui-btn-normal"
暖色	class="layui-btn layui-btn-radius layui-btn-warm"
警告	class="layui-btn layui-btn-radius layui-btn-danger"
禁用	class="layui-btn layui-btn-radius layui-btn-disabled"

3.4 表单

• class="layui-form"

<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>
//Demo
layui.use('form', function(){
  var form = layui.form;

  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script> 

3.5 数据表格

3.5.1 动态表格

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

<script src="/layui/layui.js"></script>
<script>
    //必须要导入 table 模块 layui.use('table',...)
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例, 为表格填充数据
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: '${pageContext.request.contextPath}/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代表查询成功, 为1时, 会显示msg中的内容
  • count是为分页准备的, 共有多少条数据

{"msg":"no data",
 "code":0,
 "data":[{"id":1,"username":"张三","sex":"男","city":"北京","score":100},
        {"id":1,"username":"张三","sex":"男","city":"北京","score":100},
        {"id":1,"username":"张三","sex":"男","city":"北京","score":100}],
 "count":100}

3.5.2 分页参数

• 分页条细节定制

page:{limit:1//每页显示1条
	 ,limits:[1,2,3]//可选每页条数
	 ,first: '首页'//首页显示为文字,默认显示的是页码
	 ,last: '尾页'
	 ,prev: '<em>←</em>'//上一页显示内容,默认显示< >
	 ,next: '<i class="layui-icon layui-icon-next"></i>'
	 ,layout:['prev','page','next','count','limit','skip','refresh']//自定义分页布局
}

3.5.3 显示工具栏

• 右上角工具栏按钮 toolbar:true

table.render({
            elem: '#demo'
            ,height: 312
            ,toolbar:true
            ,url: '' //数据接口
			,page: {}
			});

3.5.4 操作按钮

• 为每行增加操作按钮

<script>
    //必须要导入 table 模块 layui.use('table',...)
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例, 为表格填充数据
        table.render({
            elem: '#demo'
            ,height: 312
            ,toolbar:true
            ,url: '${pageContext.request.contextPath}/data.jsp' //数据接口
            ,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: 'right', title: '操作', toolbar: '#barDemo',sort: true}
            ]]
        });

    });
</script>
<%--如下script可以定义在页面中的任何位置--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-even="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-even="del">删除</a>
</script>

3.5.5 操作按钮回调

• 按钮的单击事件

<table id="demo" lay-filter="test"></table>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例, 为表格填充数据
        table.render({...});
        //注: tool 是工具条事件名, test 是 table原始容器的属性 lay-filter="对应的值"
        table.on('tool(test)', function (obj) {
            var data = obj.data; //获得当前行数据
            //获得 lay-event 对应的值 (也可以是表头的 event 参数对应的值)
            var layEvent = obj.event;
            var tr = obj.tr; //获得当前行 tr 的DOM对象(如果有的话)
            if (layEvent === 'del'){//删除
                layer.confirm('真的要删除么?', function (index) {
                    //向服务端发送删除请求
                    //此处可以发送ajax
                    obj.del();//删除对应行 (tr) 的 DOM结构
                    layer.close(index);
                });
            } else if (layEvent === 'edit'){//编辑
                //向服务端发送更新请求
                //同步更新缓存对应的值
                obj.update({
                    username: '李四',
                    city: '上海',
                    sex: '女',
                    score: 99
                });
            }
        });
    });
</script>

3.6 导航

• 导航条
  • class="layui-nav" 水平导航条
  • class="layui-nav layui-nav-tree" 垂直导航条

<ul class="layui-nav" lay-filter="">
    <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="">大数据</a></li>
    <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>
</ul>

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });
</script>

3.7 动画

• Layui提供了动画支持

其中 layui-anim 是必须的，后面跟着的即是不同的动画类
<div class="layui-anim layui-anim-up"></div>

循环动画，追加：layui-anim-loop
<div class="layui-anim layui-anim-up layui-anim-loop"></div>

四. 内置模块

4.1 layer

4.1.1 弹窗方法

• 弹窗 msg(), alert(), confirm()

layer.msg(content, options, end) - 提示框

<script>
    layui.use('layer', function() {
        var layer = layui.layer;

        layer.msg('确定么?', {btn: ['确定!','取消!'], icon: 1, time: 2000, //2秒关闭（如果不配置，默认是3秒）
            yes:function (i) {layer.close(i);layer.msg('yes!')},
            btn2:function (i) {layer.close(i);layer.msg('no!')}
        });
    });

</script>

layer.alert(content, options, yes) - 普通信息框

<script>
    layui.use('layer', function() {
        var layer = layui.layer;

        //0-6共7种图标,0:warning 1:success 2:error 3:question 4:lock 5:哭脸 6:笑脸
        layer.alert('alert弹框蓝?',
            {title:'alert',icon:6},
            function () {layer.msg('yes!');}
        )
    });

</script>

layer.confirm(content, options, yes, cancel) - 询问框

<script>
    layui.use('layer', function() {
        var layer = layui.layer;

        layer.confirm('要删除吗?',
            {shade:'false',icon:3,btn:["是滴","不了"]},
            function () {layer.msg('好滴!');},
            function () {layer.msg('不了!');}
        );
    });

</script>

4.1.2 弹窗属性

• type - 基本层类型

类型：Number，默认：0

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

• title - 标题

类型：String/Array/Boolean，默认：'信息'

title支持三种类型的值，若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false

• content - 内容

类型：String/DOM/Array，默认：''

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。譬如：

<script>
    layui.use('layer', function() {
        var layer = layui.layer;

        layer.open({
           type:1, //消息框,没有确定按钮
           title:['hello','padding-left:5px'],//标题及标题样式
           content:layui.$('#testmain'), //dom格式
           offset:'rb',//可以在右下角显示
           shade:false //是否遮罩
        });
    });
</script>
<div id="testmain" style="display: none; padding: 10px; height: 173px; width: 275px;">
    hello world!
</div>
<script>
    layui.use('layer', function() {
        var layer = layui.layer;

        layer.open({
           type:2, //iframe加载, 需要一个url
           content:'${pageContext.request.contextPath}/nav.jsp'
        });
    });
</script>

4.2 layDate

• 日期程

<form action="" class="layui-form layui-form-pane" method="post">
    <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
        <label class="layui-form-label">生日</label>
        <div class="layui-input-block">
            <input readonly type="text" class="layui-input" id="birth" name="birth" placeholder="请选择生日日期" autocomplete="off">
        </div>

    </div>
</form>

<script>
    layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#birth', //指定元素
            format: 'yyyy-MM-dd',
            value: '2020-12-12', //默认值
            //value: new Date() //默认值
        });
    });
</script>

4.3 upload

• 上传按钮

<form action="" class="layui-form layui-form-pane" method="post">
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn">提交</button>
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon"></i>上传图片
            </button>
        </div>

    </div>
</form>

<script>
    layui.use(['upload','form','layer'], function(){
        var layer = layui.layer;
        var upload = layui.upload;

        //执行一个laydate实例
        var uploadInst = upload.render({
            elem: '#test1', //指定元素
            url: '/data.jsp', //上传接口
            //accept: 'file', //file代表所有文件, 默认是images,代表图片
            size: 100, //文件最大100kb
            done: function (res) {
                //上传完毕回调
                layui.layer.msg('ok');
            },
            error: function () {
                //请求异常回调
                layui.layer.msg('error')
            }
        });
    });
</script>

4.4 carousel

• 轮播图

<div class="layui-carousel" id="test1">
    <div carousel-item style="text-align: center; line-height: 280px">
        <div>条目1</div>
        <div>条目2</div>
        <div>条目3</div>
        <div>条目4</div>
        <div>条目5</div>
    </div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->

<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>