1_Layui

一. 引言
二. 环境搭建
- 2.1 下载
- 2.2 导入依赖
三. 页面元素
- 3.1 布局
- 3.2 字体图标
- 3.3 按钮
- 3.4 表单
- 3.5 数据表格
  - 3.5.1 动态表格
  - 3.5.2 分页参数
  - 3.5.3 显示工具栏
  - 3.5.4 操作按钮
  - 3.5.5 操作按钮回调
- 3.6 导航
- 3.7 动画
四. 内置模块
- 4.1 layer
  - 4.1.1 弹窗方法
  - 4.1.2 弹窗属性
- 4.2 layDate
- 4.3 upload
- 4.4 carousel

一. 引言

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

二. 环境搭建

2.1 下载

在官网即可完成下载

2.2 导入依赖

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

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

3.5 数据表格

3.5.1 动态表格

数据格式如下
- 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: '←'//上一页显示内容,默认显示< >
	 ,next: ''
	 ,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可以定义在页面中的任何位置--%>

3.5.5 操作按钮回调

按钮的单击事件

3.6 导航

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


    最新活动
    产品
    大数据
    
        解决方案
         
            移动模块
            后台模版
            电商平台
        
    
    社区

3.7 动画

Layui提供了动画支持

其中 layui-anim 是必须的，后面跟着的即是不同的动画类

 
循环动画，追加：layui-anim-loop

四. 内置模块

4.1 layer

4.1.1 弹窗方法

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

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

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

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

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的不同而不同。譬如：



    hello world!

4.2 layDate

日期程


     
        生日

4.3 upload

上传按钮

4.4 carousel

轮播图

UI框架

1_Layui

一. 引言

二. 环境搭建

2.1 下载

2.2 导入依赖

3.5 数据表格

3.5.1 动态表格

3.5.2 分页参数

3.5.3 显示工具栏

3.5.4 操作按钮

3.5.5 操作按钮回调

3.6 导航

3.7 动画

四. 内置模块

4.1 layer

4.1.1 弹窗方法

4.1.2 弹窗属性

4.2 layDate

4.3 upload

4.4 carousel

相关

layui框架各种小结

前端UI框架

标签

1_Layui

一. 引言

二. 环境搭建

2.1 下载

2.2 导入依赖

3.5 数据表格

3.5.1 动态表格

3.5.2 分页参数

3.5.3 显示工具栏

3.5.4 操作按钮

3.5.5 操作按钮回调

3.6 导航

3.7 动画

四. 内置模块

4.1 layer

4.1.1 弹窗方法

4.1.2 弹窗属性

4.2 layDate

4.3 upload

4.4 carousel

相关

layui框架 各种小结

前端UI框架

标签

layui框架各种小结