【前端目录贴】
参考视频:LayUI
参考笔记:https://blog.csdn.net/qq_61313896/category_12432291.html
1.介绍
官网:http://layui.apixx.net/index.html
国人16年开发的框架,拿来即用,门槛低
…
2. LayUi的安装及使用
Layui 是一套开源的 Web UI 组件库,采用自身轻量级模块化规范,遵循原生态的 HTML/CSS/JavaScript 开发模式,极易上手,拿来即用。其风格简约轻盈,而内在雅致丰盈,甚至包括文档在内的每一处细节都经过精心雕琢,非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架,却并非逆道而行,而是信奉返璞归真之道。确切地说,它更多是面向于追求简单的务实主义者,即无需涉足各类构建工具,只需面向浏览器本身,便可将页面所需呈现的元素与交互信手拈来,常用来当做后台管理系统的框架
2.1 LayUi的特点
- 原生态开发
- 轻量级模块化
- 外简内丰
- 开箱即用
2.2 安装和使用
官网下载,本地引入核心css和核心js
测试html如下
开始使用 layui
3. 页面元素
3.1 布局
3.1.1 布局容器
3.1.1.1 固定宽度
固定宽度
3.1.1.2 完整宽度
完整宽度
3.1.2 栅格系统
为了丰富网页布局,简化 HTML/CSS 代码的耦合,并提升多终端的适配能力,layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分,预设了 4*12 种 CSS 排列类,它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。
3.1.2.1 栅格布局规则:
3.1.2.2 响应式规则
栅格会根据屏幕的分辨率选择对应的样式效果
3.1.2.3 列间距
通过“列间距”的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距。列间距在保证排版美观的同时,还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距,预设了 12 种不同尺寸的边距,分别是:
layui-col-space1 layui-col-space2 layui-col-space4 layui-col-space5 layui-col-space6 layui-col-space8 layui-col-space10 layui-col-space12 layui-col-space14 layui-col-space15 layui-col-space16 layui-col-space18 layui-col-space20 layui-col-space22 layui-col-space24 layui-col-space25 layui-col-space26 layui-col-space28 layui-col-space30 layui-col-space32即:支持列之间为 1px-32px 区间的所有双数间隔,以及 1px、5px、15px、25px 的单数间隔
·如果需要的间距高于30px(一般不常见),请采用偏移,下文继续讲解·
3.1.2.4 列偏移
对列追加 类似 layui-col-md-offset* 的预设类,从而让列向右偏移。其中 * 号代表的是偏移占据的列数,可选中为 1 - 12。
3.1.2.5 列嵌套
理论上,你可以对栅格进行无穷层次的嵌套,这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素(layui-col-md*)中插入一个行元素(layui-row),即可完成嵌套。下面是一个简单的例子
布局容器 内容5/12内容7/12内容4/12内容4/12内容5/12
xs:6/12 | sm:6/12 | md:4/12xs:6/12 | sm:6/12 | md:4/12xs:4/12 | sm:12/12 | md:4/12xs:4/12 | sm:7/12 | md:8/12xs:4/12 | sm:5/12 | md:4/12
列间距
1/31/31/3列偏移
4/124/12
列嵌套
内容4/12内容4/12内容5/12
3.2 基本元素
3.2.1 按钮
向任意HTML元素设定,建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成更多种按钮风格。
3.2.1.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” |
3.2.1.2 尺寸
尺寸 | 组合 |
---|---|
大型 | class=“layui-btn layui-btn-lg” |
默认 | class=“layui-btn” |
小型 | class=“layui-btn layui-btn-sm” |
迷你 | class=“layui-btn layui-btn-xs” |
3.2.1.3 圆角
主题 | 组合 |
---|---|
原始 | 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.2.1.4 图标
温馨提示:各种图标字体请移步(**官网**)文档左侧【页面元素 - 图标】阅览
布局容器 一个可跳转的按钮一个按钮
3.2.2 导航
导航一般指页面引导性频道集合,多以菜单的形式呈现,可用于头部和侧边,面包屑结构简单,支持自定义分隔符
依赖加载模块: element
- 实现步骤
- 引入资源
- 依赖加载模块
3.2.2.1 水平导航
水平导航: layui-nav
当前被选中项: layui-this
二级菜单: layui-nav-child
3.2.2.2 垂直/侧边导航
垂直导航: layui-nav layui-nav-tree
侧边导航: layui-nav layui-nav-tree layui-nav-side
3.2.2.3 导航主题
颜色:layui-bg-cyan(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)
徽章:
3.2.2.4 面包屑
面包屑导航: layui-breadcrumb
自定义分隔符: lay-separator="-"
布局容器 面包屑导航
3.2.3 选项卡
导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能。面包屑结构简单,支持自定义分隔符。
依赖加载组件:element (请注意:必须加载element模块,相关功能才能正常使用,详见:内置组件 - 常用元素操作)
- 实现步骤
- 引入资源
- 依赖加载模块
3.2.3.1 默认Tab选项卡
默认Tab选项卡: layui-tab
选项卡内容: layui-tab-content
3.2.3.2 Tab简洁风格
Tab简洁风格: layui-tab layui-tab-brief
3.2.3.3 Tab卡片风格
Tab卡片风格: layui-tab layui-tab-card
3.2.3.4 带删除的Tab
以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除
3.2.4 表格
3.2.4.1 静态表格
layui-table
3.2.4.2 基础属性
布局容器 昵称 加入时间 签名 贤心 2016-11-29 人生就像是一场修行 许闲心 2016-11-28 于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里… 昵称 加入时间 签名 贤心 2016-11-29 人生就像是一场修行 许闲心 2016-11-28 于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里… 贤心 2016-11-29 人生就像是一场修行 许闲心 2016-11-28 于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里… 贤心 2016-11-29 人生就像是一场修行 许闲心 2016-11-28 于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里… 3.2.5 表单
在一个容器中设定 class=“layui-form” 来标识一个表单元素块,通过规范好的HTML结构及CSS类,来组装成各式各样的表单元素,并通过内置的 form模块 来完成各种交互。
依赖加载模块:form (请注意:如果不加载form模块,select、checkbox、radio等将无法显示,并且无法使用form相关功能)
layui-form
3.2.5.1 基本结构
原始表单元素区域常用属性
required:注册浏览器所规定的必填字段
lay-verify:注册form模块需要验证的类型
layui-input-block 占据整行宽度
layui-input-inline 不会占据部分宽度
3.2.5.2 文本框
autocomplete是否自动填充(当浏览器缓存中存在相同的name属性时,会填充)
placeholder 为空时,默认显示的文本信息
:layui.css提供的通用CSS类
3.2.5.3 下拉选择框
optgroup 标签给select分组
通过selected属性设置默认选中项
disabled禁用该选择:可可以设置select和option标签(禁用下拉框和禁用下拉选项)
lay-search 来开启搜索匹配功能
3.2.5.3 复选框
属性title可自定义文本(温馨提示:如果只想显示复选框,可以不用设置title)
属性checked可设定默认选中
属性lay-skin可设置复选框的风格
设置value="1"可自定义值,否则选中时返回的就是默认的on+
3.2.5.5 开关
其实就是checkbox复选框的“变种”,通过设定 lay-skin="switch" 形成了开关风格
属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本
设置value="1"可自定义值,否则选中时返回的就是默认的on
3.2.5.6 单选框
属性title可自定义文本
属性disabled开启禁用
设置value="xxx"可自定义值,否则选中时返回的就是默认的on
3.2.5.7 文本域
:layui.css提供的通用CSS类
3.2.5.8 组装行内表单
class=“layui-inline”:定义外层行内
class=“layui-input-inline”:定义内层行内
-3.2.5.9 忽略美化渲染
对表单元素增加属性 lay-ignore 设置后,将不会对该标签进行美化渲染,即保留系统风格
3.2.5.10 表单方框风格
追加 layui-form-pane 的class,来设定表单的方框风格
3.3 组件示例
3.3.1 弹层组
3.3.1.1 作为独立组件使用(未下载到独立版本)
引入jQuery1.8以上的任意版本,
引入layer.js
引入layer.css
3.3.1.2 layui 模块化使用
引入layui.css
引入layui.js
layui.use('form', function () { var layer = layui.layer; layer.msg('hello'); });
3.3.1.3 内置方法
layer.open
layer.msg
3.3.1.4 type-基本层类型
类型:Number,默认:0
layer提供了5种层类型。可传入的值有:
0(信息框,默认)
1(页面层)
2(iframe层)
3(加载层)
4(tips层)
若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)
3.3.1.5 title-标题
类型:String/Array/Boolean,默认:‘信息’
title支持三种类型的值,若你传入的是普通的字符串,如title :‘我是标题’,那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: ['文本', 'font-size:18px;'],数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false
总结:
title :'我是标题'
title: ['文本', 'font-size:18px;']
title: false
3.3.1.6 content-内容
类型:String/DOM/Array,默认:‘’
content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同
/!* 如果是页面层 */ layer.open({ type: 1, content: '传入任意的文本或html' //这里content是一个普通的String }); layer.open({ type: 1, content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响 }); //Ajax获取 $.post('url', {}, function(str){ layer.open({ type: 1, content: str //注意,如果str是object,那么需要字符拼接。 }); }); /!* 如果是iframe层 */ layer.open({ type: 2, content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no'] }); /!* 如果是用layer.open执行tips层 */ layer.open({ type: 4, content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM });
3.3.1.7 area - 宽高
类型:String/Array,默认:‘auto’
在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area: ‘500px’,高度仍然是自适应的。当你宽高都要定义时,你可以area: [‘500px’, ‘300px’]
3.3.1.8 icon - 图标
信息框和加载层的私有参数
类型:Number,默认:-1(信息框)/0(加载层)
信息框默认不显示图标。当你想显示图标时,默认皮肤可以传入0-6如果是加载层,可以传入0-2
3.3.2 日期与时间选择
3.3.2.1 作为独立组件使用(未下载到独立版本)
3.3.2.2 在 layui 模块中使用
layui.use('form', function () { var laydate = layui.laydate; });
3.3.1.4 基础参数选项
通过核心方法:laydate.render(options) 来设置基础参数,也可以通过方法:laydate.set(options) 来设定全局基础参数.
laydate.render({ elem: '#test1' //指定元素 });
3.3.1.5 elem - 绑定元素
类型:String/DOM,默认值:无
必填项,用于绑定执行日期渲染的元素,值一般为选择器,或DOM对象
laydate.render({ elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等 });
3.3.1.6 type - 控件选择类型
类型:String,默认值:date
用于单独提供不同的选择器类型
type可选值 名称 用途 year 年选择器 只提供年列表选 month 年月选择器 只提供年、月选择 date 日期选择器 可选择:年、月、日。type默认值,一般可不填 time 时间选择器 只提供时、分、秒选择 datetime 日期时间选择器 可选择:年、月、日、时、分、秒 //日期范围选择 laydate.render({ elem: '#test' ,range: true //或 range: '~' 来自定义分割字符 }); //日期时间范围选择 laydate.render({ elem: '#test' ,type: 'datetime' ,range: true }); //时间范围选择 laydate.render({ elem: '#test' ,type: 'time' ,range: true }); //年范围选择 laydate.render({ elem: '#test' ,type: 'year' ,range: true }); //年月范围选择 laydate.render({ elem: '#test' ,type: 'month' ,range: true });
3.3.1.7 format - 自定义格式
类型:String,默认值:yyyy-MM-dd
通过日期时间各自的格式符和长度,来设定一个你所需要的日期格式。layDate 支持的格式如下
格式符 说明 yyyy 年份,至少四位数。如果不足四位,则前面补零 y 年份,不限制位数,即不管年份多少位,前面均不补零 MM 月份,至少两位数。如果不足两位,则前面补零。 M 月份,允许一位数。 dd 日期,至少两位数。如果不足两位,则前面补零。 d 日期,允许一位数。 HH 小时,至少两位数。如果不足两位,则前面补零。 H 小时,允许一位数。 mm 分钟,至少两位数。如果不足两位,则前面补零。 m 秒数,至少两位数。如果不足两位,则前面补零。 s 秒数,允许一位数。 laydate.render({ elem: '#test6' , format: 'yyyy年MM月dd日' //可任意组合 });
3.3.1.8 value - 初始值
类型:String,默认值:new Date()
支持传入符合format参数设定的日期格式字符,或者 new Date()
//传入符合format格式的字符给初始值 laydate.render({ elem: '#test' ,value: '2018-08-18' //必须遵循format参数设定的格式 }); //传入Date对象给初始值 laydate.render({ elem: '#test' ,value: new Date(1534766888000) //参数即为:2018-08-20 20:08:08 的时间戳 });
3.3.3 分页
模块加载名称:laypage
3.3.3.1 基础参数选项
通过核心方法:laypage.render(options) 来设置基础参数。由于使用非常简单,本篇直接罗列核心接口的参数选项
3.3.3.2 jump - 切换分页的回调
当分页被切换时触发,函数返回两个参数:obj(当前分页的所有选项值)、first(是否首次,一般用于初始加载的判断)
laypage.render({ elem: 'test1' ,count: 70 //数据总数,从服务端得到 ,jump: function(obj, first){ //obj包含了当前分页的所有参数,比如: console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。 console.log(obj.limit); //得到每页显示的条数 //首次不执行 if(!first){ //do something } } });
3.3.4 数据表格
模块加载名称:table
3.3.4.1 快速使用
js数据格式
{ "code": 0, "msg": "", "count": 50, "data": [{ "singer_name": "周杰伦", "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R150x150M0000025NhlN2yWrP4.webp", "other_name": "Jay Chou", "singer_id": 4558, "id": 1 }, { "singer_name": "林俊杰", "singer_pic": "http://y.gtimg.cn/music/photo_new/T001R150x150M000001BLpXF2DyJe2.webp", "other_name": "JJ Lin", "singer_id": 4286, "id": 2 } ] }
3.3.4.2 三种初始化渲染方式
默认方式是方法渲染
3.3.4.3 方法渲染
// 方法渲染 table.render({ elem: '#demo2' , height: 312 , url: 'singers.json' //数据接口 , page: true //开启分页 , cols: [[ //表头 {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'} , {field: 'singer_name', title: '歌手名称', width: 150} , {field: 'singer_pic', title: '歌手图片', width: 80, sort: true} , {field: 'other_name', title: '别称', width: 80} , {field: 'singer_id', title: '歌手id', width: 177,sort: true} ]] });
3.3.4.4 自动渲染
所谓的自动渲染,即:在一段 table 容器中配置好相应的参数,由 table 模块内部自动对其完成渲染,而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点:
- 带有 class=“layui-table” 的
标签。
- 对标签设置属性 lay-data=“” 用于配置一些基础参数
- 在
标签中设置属性lay-data=""用于配置表头信息 ID 歌手名称 歌手图片 别称 歌手id 3.3.4.5 转换静态表格
页面已经存在了一段有内容的表格,它由原始的table标签组成,这时你需要赋予它一些动态元素
昵称 积分 签名 贤心1 66 人生就像是一场修行a 贤心2 88 人生就像是一场修行b 贤心3 33 人生就像是一场修行c //转换静态表格 table.init('demo4', { height: 315 //设置高度 ,limit: 10 //注意:请务必确保 limit 参数(默认:10)是与你服务端限定的数据条数一致 //支持所有基础参数 });
3.3.4.6 基础参数使用的场景
基础参数使用场景
场景一:下述方法中的键值即为基础参数项 table.render({ height: 300 ,url: '/api/data' }); 场景二:下述 lay-data 里面的内容即为基础参数项,切记:值要用单引号
……
更多场景:下述 options 即为含有基础参数项的对象 > table.init('filter', options); //转化静态表格 > var tableObj = table.render({}); tableObj.reload(options); //重载表格参考:http://layui.apixx.net/doc/modules/table.html#option
3.3.4.7 开启分页
page: true //开启分页
3.3.4.8 开启头部工具栏&行工具栏
绑定表格工具栏:toolbar:'#toolbarDemo'
绑定表头工具栏: {toolbar: '#barDemo'}
3.3.4.9 事件监听
- 头工具事件
//test 为容器的lay-filter=""属性值 table.on('toolbar(test)', function(obj){ var checkStatus = table.checkStatus(obj.config.id); switch(obj.event){ case 'add': layer.msg('添加'); break; case 'delete': layer.msg('删除'); break; case 'update': layer.msg('编辑'); break; }; });
- 行工具事件
table.on('tool(test)', function (obj) { console.log(1) // var checkStatus = table.checkStatus(obj.config.id); //获取当前事件名 var tr = obj.data;//当前行数据 var event = obj.event; console.log(event) switch (obj.event) { case 'delete': layer.confirm('确认要删除吗?', function (index) { //删除指定tr obj.del();删除对应行(tr)的DOM结构,并更新缓存 console.log('删除了') //关闭弹出层,(index是当前弹出层的下标) layer.close(index); //...//向服务端发送删除指令 }); break; case 'edit': layer.prompt({ //表单元素的类型 0=文本框, 1=密码框, 2=文本域 formType: 0, value: tr.singer_name //设置输入框的值 }, function (value, index) { //修改指定单元格的值 //value表示修改后输入的值 obj.update({ singer_name:value }) layer.close(index); }); break; } });
3.3.4.10 开启单元格编辑
单元格编辑类型(默认不开启)目前只支持:text(输入框)
{field: 'singer_name', title: '歌手名称', width: 150,edit:'text'}
- 监听单元格编辑事件
//监听单元格编辑事件 table.on('edit(test)', function (obj) { console.log(obj) //修改后得值 var value=obj.value; //得到当前修改的tr对象 var data=obj.data; //得到修改后的字段 var field = obj.field; layer.alert('id:'+data.id+'的'+field+'字段值修改为:'+value); });
3.3.4.11 数据表格的重载
3.3.5 LayUIMini
基于Layui编写的一套最简洁、易用的后台框架模板
官网地址:http://layuimini.99php.cn/
3.3.5.1 LayUIMini使用
…
按钮在这里
相关推荐
- 监听单元格编辑事件
- 行工具事件