layUI笔记

最新推荐文章于 2024-01-28 10:47:43 发布

洛依尘

最新推荐文章于 2024-01-28 10:47:43 发布

阅读量809

点赞数

分类专栏：前端文章标签： layui

本文链接：https://blog.csdn.net/qq_39220990/article/details/113827680

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

layUI笔记

一、引言

1.1 介绍

官网：https://www.layui.com/

在官网首页，可以很方便的下载LayUI

LayUI 是一款经典模块化前端 UI 框架，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。

使得前端页面的制作变得更加简单。

二、环境搭建

2.1 下载

在官网即可完成下载

下载LayUI

在这里插入图片描述

2.2 导入依赖

下载的LayUI解压后，将其中的layui目录导入项目中

解压后的 layui目录

在这里插入图片描述

将layui目录放到项目的webapp目录下

在这里插入图片描述

在JSP中导入layui依赖

在这里插入图片描述

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <title>登录</title>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script src="layui/layui.js"></script>

2.3 使用模块和回调函数

<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});
</script>

三、页面元素

3.1 布局

栅格系统
列组合

定义行
.layui-row

定义列 . layui-col-md*
md表示不同屏幕的标识(Xs、 sm、 md、 1g)

每一行被均分为12列，列的总数不能超过12，否则会自动换行

响应式规则
栅格会自动根据屏幕的分辨率选择对应的样式效果。

列边距

.layui-col-space*
*代表的是px值(1~30)
列偏移
将列向右移动指定列数
. layui-col-md-offset *
*代表的是列数
列嵌套
列之间可以无限嵌套列

<!-- layui-container居中显示有固定尺寸；layui-fluid占满行宽 -->
<!--<div class="layui-container">-->
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md9 layui-col-lg6 layui-bg-orange">
            你的内容 9/12
        </div>
        <div class="layui-col-md3 layui-col-lg6 layui-bg-gray">
            你的内容 3/12
        </div>
    </div>

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

3.2 字体图标

class=“layui-icon 具体的图标样式”

<i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #1E9FFF;"></i>
<i class="layui-icon layui-icon-heart" 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>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary">主题的按钮</a>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-btn-sm">主题的按钮</a>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-btn-radius ">圆角的按钮</a>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-btn-sm  layui-btn-radius ">
    <i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #1E9FFF;"></i>
    带图标的按钮
</a>
<div class="layui-btn-group">   按钮组
    <button type="button" class="layui-btn">增加</button>
    <button type="button" class="layui-btn ">编辑</button>
    <button type="button" class="layui-btn">删除</button>
</div>

3.4 表单

必须要在外层容器中定义class=“layui-form”，form模块才能正常工作。

layui-input-inline 合适长度

layui-form-item 表单元素项

<form action="" class="layui-form">
    <div class="layui-form-item">
         内容
    </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.4.1 输入框

常用属性:
required 浏览器固定的必填字段
lay-verify 需要验证的类型(required表示必填项)
class=“layui- input” 提供的通用的样式
class=“layui- input-block” 占据全部宽度
class=“layui - input- inline”. 占据分宽度
文本框
placeholder 当文本框为空时，默认显示的文本信息
autocomplete 表单元素是否自动填充(当浏览器中缓存中存在相同name属性的值时，会填充)

	<div class="layui-form-item">
        <label class="layui-form-label">标签区域</label>
        <div class="layui-input-inline">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>

3.4.2 下拉框

下拉选择框
1.通过selected属性设置默认选中项
2.通过disabled属性开启禁用，可以设置select和option标签 (禁用下拉框和禁用下拉选项)
3.可以通过optgroup 标签给select分组
4.通过设置lay - search属性开启搜索匹配功能

<div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-inline">
            <select name="city" lay-verify="" >
                <option value="">请选择一个城市</option>
                <option value="010">北京</option>
                <option value="021" selected>上海</option>
                <option value="0571" disabled>杭州</option>
            </select>
        </div>
    </div>

3.4.3 复选框

复选框
1.通过tit1e属性设置自定义文本(如果不需要显示文本，则不设置title属性)
2.通过checked属性设置被选中的项
3.通过lay- skin属性设置复选框的样式效果(lay-skin="parmary"表示原始效果)
4.通过disabled属性禁用元素|

<div class="layui-form-item">
        <label class="layui-form-label">爱好</label>
        <div class="layui-input-block">
            <input type="checkbox" name="" title="写作" checked>
            <input type="checkbox" name="" title="发呆">
            <input type="checkbox" name="" title="禁用" disabled>
            <input type="checkbox" name="" title="写作" lay-skin="primary">
            <input type="checkbox" name="" title="发呆" lay-skin="primary">
            <input type="checkbox" name="" title="禁用" disabled lay-skin="primary">
        </div>
    </div>

3.4.4 开关

开关
将复选框，设置lay-skin=" switch"形成开关风格
1.通过lay-text=“打开的值 |关闭的值"来设定开关的两种状态的文本，通过” | "分隔
2.通过checked设置默认打开状态
3.通过disabled属性禁用开关
4.通过value属性设置选中的值|

<div class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
            <input type="checkbox" name="" lay-skin="switch">
            <input type="checkbox" name="" lay-skin="switch" checked>
            <input type="checkbox" name="" lay-skin="switch" checked lay-text="on|off" value="on">
            <input type="checkbox" name="" lay-skin="switch" checked lay-text="打开|关闭" disabled>
        </div>
    </div>

3.4.5 单选

1.通过checked设置默认打开状态
2.通过disabled属性禁用开关
3.通过value属性设置选中的值|

<div class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="nan" title="男">
            <input type="radio" name="sex" value="nv" title="女" checked>
            <input type="radio" name="sex" value="" title="中性" disabled>
        </div>
    </div>

3.4.6 组装行内表单

class=“layui-inline”：定义外层行内
class=“layui-input-inline”：定义内层行内

<div class="layui-form-item">
 
  <div class="layui-inline">
    <label class="layui-form-label">范围</label>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid">-</div>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-inline">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="password" name="" autocomplete="off" class="layui-input">
    </div>
  </div>
</div>

3.4.7 总结

<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 type="button" class="layui-btn layui-btn-lg" lay-submit lay-filter="formDemo">立即提交</button>
        <button type="button" class="layui-btn" id="test1">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
    </div>
  </div>
</form>
<script>
// 必须要导入form模块，才能保证表单正常渲染
layui.use('form', function(){
  var form = layui.form;
  //监听提交
  form.on('submit(formDemo)', function(data){// data就是表单中的所有数据
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

3.5 数据表格

3.5.1 动态表格

动态表格

<table id="demo" lay-filter="test"></table>
<script>
// 必须要导入 table模块 layui.use('table',...)
layui.use('table', function(){
  var table = layui.table;
  // 为表格填充数据 渲染
  table.render({
    elem: '#demo' //绑定id
    ,height: 312
    ,url: '${pageContext.request.contextPath}/data‘ //获取数据
    ,page: true //开启分页
    ,cols: [[ //设置表头
       {field:'id', width:80, title: 'ID', sort: true}
        ,{field:'username', width:80, title: '用户名'}
        ,{field:'sex', width:80, title: '性别', sort: true}
        ,{field:'city',  title: '城市'} //没定义宽度则占满剩余所有宽度，都不定义则所有列均分
        ,{field:'score',width:80, title: '评分', sort: true}
    ]]
    ,response:{ // 对应后端Result类，new UserResult(code, msg, count, users);
		statusName:'code', // 对应 code
		msgName:'msg', // 对应 msg
        countName:'count', // 对应 count
		dataName:'users' // 对应 data
            }
  });
  
});
</script>

数据格式如下：

code:0 代表查询成功，为1时，会显示msg中的内容
count是为分页准备的，共有多少条数据

数据格式如下：
{"msg":"no data",
 "code":0,
 "data":[{"id":1,"username":"shine1","sex":"男","city":"保定","score":100},
         {"id":2,"username":"shine2","sex":"女","city":"石家庄","score":100},
         {"id":3,"username":"shine3","sex":"男","city":"邢台","score":100}],
 "count":100}


@Data
@NoArgsConstructor
public class UserResult {
    private Integer code;
    private String msg;
    private Integer count;
    private List<User> data;

    public UserResult(Integer code, String msg, Integer count, List<User> data) {
        this.code = code;
        this.msg = msg;
        this.count = count;
        this.data = data;
    }
}

3.5.2 分页参数

分页条细节定制

<script>
    layui.use("table",function(){
        var table = layui.table;
        table.render({
            elem: '#demo'，
            url:'${pageContext.request.contextPath}/data,
            cols:[[...]],
            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'] //自定义分页布局
            }
       });
    });
</script>

3.5.3 显示工具栏

右上角工具按钮 toolbar:true

<script>
    layui.use("table",function(){
        var table = layui.table;
        table.render({
            elem: '#demo'，
            toolbar:true,
            url:'${pageContext.request.contextPath}/data,
            cols:[[...]],
            page:{...},
       });
    });
</script>

3.5.4 操作按钮

为每行增加操作按钮

<script>
    layui.use(["table","laytpl"],function(){
        var table = layui.table;
        table.render({
            elem: '#demo'，
            url:'${pageContext.request.contextPath}/data,
            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: '城市'}
                ,{field: 'score', title: '评分', width: 80, sort: true}
                ,{field:"right",title:"操作",toolbar: '#barDemo'}
            ]],
            ...
        });
	});
</script>
<!-- 如下script可以定义在页面的任何位置 -->
<script type="text/html" id="barDemo">
	<!-- lay-event标识事件类型，在点击回调中可以获取 -->
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

3.5.5 操作按钮回调

按钮的单击事件

<table id="demo" lay-filter="test"></table>
<script>
    layui.use("table",function(){
        table = layui.table;
        table.rander({...});
        // 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: 'shine001',
                    city: '北京',
                    sex:'女',
                    score:99});
            }
        });
    });
</script>

3.6 导航

导航
水平

<ul class="layui-nav layui-nav-tree" 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(){});
</script>

<span class="layui-breadcrumb" lay-separator="-">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>

3.7 动画

LayUI提供了动画支持

样式类	描述
layui-anim-up	从最底部往上滑入
layui-anim-upbit	微微往上滑入
layui-anim-scale	平滑放大
layui-anim-scaleSpring	弹簧式放大
layui-anim-fadein	渐现
layui-anim-fadeout	渐隐
layui-anim-rotate	360度旋转
追加：layui-anim-loop	循环动画

<!-- 整个div会在页面显示时，以特定动画显示出来 -->
<div class="layui-anim layui-anim-up" style="height: 100px">aa</div>
<!-- 额外添加样式类：layui-anim-loop 使得动画循环运行 -->
<div class="layui-anim layui-anim-rotate layui-anim-loop" 
     style="text-align:center;line-height: 100px;margin-left:50px;height: 100px;width:100px">bb</div>
12345

3.8 选项卡

选项卡
默认风格: layui-tab
简洁风格需要追加 class: layui-tab-brief
卡片风格需要追加 class: layui -tab-card

可以对父层容器设置属性lay-allowClose=“true” 来允许Tab选项卡被删除

<div class="layui-tab layui-tab-card " lay-allowClose="true" lay-filter="demo">
    <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>用户管理</li>
        <li>权限分配</li>
        <li>商品管理</li>
        <li lay-id="5">订单管理</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <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 class="layui-tab-item">6</div>
    </div>
</div>
<div class="layui-btn-group">
    <button type="button" class="layui-btn" id="add">增加</button>
    <button type="button" class="layui-btn " id="change">切换订单管理</button>
    <button type="button" class="layui-btn" id="delete">删除
    </button><button type="button" class="layui-btn" id="deleteAll">删除所有</button>
</div>


<script src="resources/layui/layui.js"></script>

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

        $("#add").click(function (){
            element.tabAdd('demo', {
                title: '选项卡的标题'
                ,content: '选项卡的内容' //支持传入html
                ,id: '选项卡标题的lay-id属性值'
            });
        })
        $("#change").click(function (){
            element.tabChange('demo', '5');
        })
        $("#delete").click(function (){
            element.tabDelete('demo', '5');
        })
    });
</script>

3.9 表格

表格
class="layui-table’
常用属性
lay-even如果设置了该属性，则可以显示隔行换色的效果
lay-skin设置表格边框风格
line (行迈框风格)
row(列边框风格)
nob(无边框风格)
lay-size设置表格的尺寸
sm(小尺寸)
1g(大尺寸)

<table class="layui-table" lay-even lay-size="lg" lay-skin="row">
    <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>
    <tr>
        <td>贤心</td>
        <td>2016-11-29</td>
        <td>人生就像是一场修行</td>
    </tr>
    <tr>
        <td>许闲心</td>
        <td>2016-11-28</td>
        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
    </tr>
    </tbody>
</table>

四、内置模块

4.1 layer

4.1.1 弹窗方法

弹窗 msg()、alert()、confirm()

<script>
    layui.use("layer",function (){
        var layer = layui.layer;
        layer.msg("dd");
        layer.open({
            type: 0,
            title:false, //可以不显示标题
            content: '传入任意的文本或html' //这里content是一个普通的String
        });
        layer.open({
            type: 2,
            content: 'http://sentsin.com', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            area: ['500px', '300px']  //宽 高
        });
    });
</script>

<script>
    // 导入 layer模块
    layui.use(["layer"],function(){
        var layer = layui.layer;
        
        layer.msg("hello world!!");
        // yes:第一个按钮的回调   btn2是第二个  btn3第三个按钮的回调
        layer.msg("确定吗？",{btn:["确定！","放弃！"],
            				yes:function(i){layer.close(i);layer.msg("yes!!!")},
            				btn2:function(i){layer.close(i);layer.msg("no!!!")}}
        );
    });
</script>

<script>
// 导入 layer模块  
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("好滴");
    			}
	);
});
</script>

<script>
// 导入 layer模块  
layui.use(["layer"],function(){
    var layer = layui.layer;
	layer.confirm("hello world~",
            {shade:false,icon:3,btn:["好滴","不行"]},
            function(){layer.msg("好滴！");},
            function(){layer.msg("不行！")}
   	);
});
</script>

4.1.2 弹窗属性

type 弹窗类型，可选值 0-4
title 弹窗标题，可选值 text/array
content 弹窗内容，可选值 text/html/dom

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

4.2 layDate

日期框

<form class="layui-form layui-form-pane" action="" method="post">
    <!-- layui-form-item 一个输入项-->
    <div class="layui-form-item">
        <label class="layui-form-label">生日</label>
        <!-- layui-input-block 输入框会占满除文字外的整行 -->
        <div class="layui-input-block">
            <input readonly id="birth" type="text" name="birth" placeholder="请选择生日日期" autocomplete="off" class="layui-input">
        </div>
    </div>
</form>
<script>
    layui.use(["laydate","form"],function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#birth', //指定元素
            format:'yyyy/MM/dd',
            value:'2012/12/12' //默认值
            // value:new Date() //默认值
        });
    });
</script>

4.3 分页

<div id="test1"></div>
<script>
    layui.use('laypage', function(){
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: 50 //数据总数，从服务端得到
            ,limit: 5 //每页显示的条数
            ,limits:[10, 20, 30, 40, 50] //每页条数的选择项
            ,layout:['prev', 'page', 'next','limit'] //count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）
            ,groups:10 //连续出现的页码个数
        });
    });
</script>

4.3 upload

上传按钮

<form class="layui-form layui-form-pane" action="#" method="post">
    <!-- layui-form-item 一个输入项-->
    <div class="layui-form-item">
        <label class="layui-form-label">username</label>
        <!-- layui-input-block 输入框会占满除文字外的整行 -->
        <div class="layui-input-block">
            <input id="birth" type="text" name="username" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
</form>
<script>
    layui.use(['upload','layer'], function(){
        var upload = layui.upload;
        //执行实例
        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>
<script>
    layui.use(['carousel'], function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
        });
    });
</script>

细节

LayUI 标识：id 和 lay-filter. id用来定位标签。 lay-filter用来定位事件源

洛依尘

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
layUI笔记

layUI笔记一、引言1.1 介绍官网：https://www.layui.com/在官网首页，可以很方便的下载LayUILayUI 是一款经典模块化前端 UI 框架，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。使得前端页面的制作变得更加简单。二、环境搭建2.1 下载在官网即可完成下载下载LayUI2.2 导入依赖下载的LayUI解压后，将其中的layui目录导入项目中解压后的 layui目录将layui目录放到项目的webapp目
复制链接

扫一扫

专栏目录