layui ui框架笔记

使用
1．概述
4． 图标

容器标签 加上class



第二种使用方式

5 按钮
原始按钮
默认按钮
百搭按钮
暖色按钮
警告按钮
禁用按钮

大型按钮 默认按钮 小型按钮 迷你按钮

图标
图标

还可以是圆角按钮 按钮组

包裹一个容器

事件监听
需要引入use
// jquery的引用

layui.use([‘jquery’],function () {

var $=layui.jquery;
$(".layui-btn").click(function () {

    alert($(this).html())
})

})

6导航菜单

如果使用的是  layui.js

需要进入包
layui.use([“element”],function () {

})
水平的是默认
垂直 layui-nav-tree
基本样式 代表这是一个导航
layui-nav

layui-nav-item 代表这个是导航菜单的一个子项
layui-this 默认光标指向

layui-nav-child 选项下的子项

7选项卡
风格分类
默认风格layui-tab 代表是一个选项卡
简介风格layui-tab layui-tab-brief
卡片风格layui-tab layui-tab-card

layui-this 默认指向光标
layui-tab-title 头部
layui-tab-content 代表卡片的内容包装体
layui-tab-item 代表卡片相应的内容区

layui-tab-item layui-show 默认显示

lay-allowclose=“true” tab关闭功能

lay-filter
事件过滤器（公用属性），主要用于事件的精确匹配，跟选择器是比较类似的。

8进度条
依赖加载组件：element
layui-progress 代表进度条
layui-progress-bar 代表里面的那条线
lay-percent 代表默认进度条长度
layui-bg-blue 添加 修饰颜色
layui-progress-big 变大
lay-showPercent="true"显示比例数字 父盒子上

9面板和布局
卡片面板

layui-row 代表一行
layui-col-space15 列与列之间的距离 0-30
layui-row 代表列 1-12列 12沾满整行

layui-collapse 父盒子类名 表示这是一个折叠框
layui-colla-item 子项
layui-colla-title 子项的标题
layui-colla-content 子项的内容 layui-show 默认展开项

lay-filter=“test” 组件的名字
监听面板

手风琴折叠
lay-accordion 写在父盒子上控制每次只展开一个

折叠面板 默认折叠 手风琴折叠

10. 12格栅布局	
    

6/12

6/12

layui-row 行
layui-col-xs3 列 1-12
移动设备、平板、桌面端的复杂组合响应式展现

移动：4/12 | 平板：5/12 | 桌面：4/12

layui-col-xs4 移动设备 layui-col-sm5 平板设备 layui-col-md4 桌面设备 媒体查询

11 徽章

layui-badge-dot 表示小圆点
layui-bg-orange 表示颜色


常规弧形徽章：
6 layui-badge 表示徽章
蓝 layui-bg-blue 表示颜色

边框徽章：
6

查看消息1
直接进行标签嵌套

12 时间轴

常规时间线

• 代表时间线
• 子项 

  8月18日

  layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
  不枉近百个日日夜夜与之为伴。因小而大，因弱而强。

• layui-timeline-content layui-text时间向里的内容 h3 标题 p 内容

简约时间线

• 
  2018年，layui 5.0 发布。并发展成为中国最受欢迎的前端UI框架（期望）

简约版就是只留下title

没有区分标题和内容

13 动画

• 从最底部往上滑入
  layui-anim-up
• 引入

site-doc-icon site-doc-anim 动画 一个是js使用
layui-anim 动画
layui-anim-up 动画方式

14 组件-颜色拾取器

原理： 页面生命元素 再使用js去渲染

15 组件- 滑块 *
模块加载名称：slider

16 评分

模块加载名称：rate

layui.use(‘rate’, function(){
var rate = layui.rate;
//渲染
var ins1 = rate.render({
elem: ‘#test1’ //绑定元素
text:true,
length:9

});

});

Length放置几颗星星
看参数表， 配置项按要求放进去就可以了。

17 轮播
模块加载名称：carousel

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

});

});
自行添加配置项。 图片大小也可以自己写样式

18 代码修饰器

layui.use(‘code’, function(){ //加载code模块
layui.code(); //引用code方法
});

19.时间和日期选择器
Elem:板顶的页面input标签的id
Type：指定选择器的类型
年 year
年月 month
年月日 data 默认的
时间 time
年月日时间 datatime

注意点：
引入Js, css 挂载点 layuse引入， 实例 参数下载实例中。

<input type="text" id="test1">

20.表单元素
注意点 ：引入form模块
使用

包裹
下拉框涉及重新渲染问题。
输入框
密码框
下拉框 【重新渲染的】 注意引入模块
lay-search="" 可以检索功能

验证手机

l

单行选择框【重新渲染的】

单行选择框

写作 阅读 游戏 音乐 旅行

复选框【重新渲染的】

原始复选框

lay-skin="primary" 原始样式 控制语句 开关【重新渲染的】 type="checkbox" lay-skin="switch" 控制 开关

开关-默认关

文本域

富文本编辑器
隐藏的一个模块。 图片上传需要一个借口

加到参数里
//创建一个编辑器
var editIndex = layedit.build(‘LAY_demo_editor’);

1. layui.use(‘form’, function(){
2. var form = layui.form;

21.表单对象form
layui-form-pane 样式控制 如下

输入框
lay-verify=“required” 控制必填项 写在input 中

输入框

lay-verify=“required|phone” 验证非空 验证手机号

监听提交事件

2监听下拉框改变事件

// select中添加一个项目
$(’#add’).click(function () {
var jg = $(’#aihao’);
console.log(jg.html())
jg.append(‘阅读’)
console.log(jg.html())
form.render(‘select’); //添加之后渲染一遍
注意引入模块
layui.use([‘form’, ‘layedit’, ‘jquery’], function () {
var form = layui.form;
var layedit = layui.layedit; //编辑
var $ = layui.jquery;
3监听复选框改变事件

复选框

Js部分
form.on(‘checkbox(fuxuan)’, function(data){
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //是否被选中，true或者false
console.log(data.value); //复选框value值，也可以通过data.elem.value得到 给个value值， 他会显示出来。 没有显示on

console.log(data.othis); //得到美化后的DOM对象

});

下面是 ，复选框，初始化自定义 的代码。
初始化渲染中，因为中文逗号， 引起的split失效。

3. 监听开关改变事件
4. 是否在职

// 监听switch开关
form.on(‘switch(kaiguan)’, function(data){
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //开关是否开启，true或者false
console.log(data.value); //开关value值，也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
});

5.监听单选改变事件

单选框

Js部分
// 监听radio单选
form.on(‘radio(danxuan)’, function(data){
console.log(data.elem); //得到radio原始DOM对象
console.log(data.value); //被点击的radio的value值
});

表单验证
lay-verify=“required|phone” 必填 手机验证
required 非空验证
number 数值验证
url链接地址验证 http://
22.弹出层-重点
var layer=layui.layer; 模块

layer.alert(‘回调’,function(index) {
// alert(index)
layer.close(index) //控制弹出后，可以关闭
})

数据表格
24.弹出层和数据表格案例
25.文件上传

26树形组件 第三方

下载

基本使用

数据格式
标准格式

layui风格数据格式（dataStyle）

事件监听
多选树的处理

辅助元素

穿梭框
组件实例 颜色选择器
音量条

表单 元素
表单对象 输入框 密码框
弹出层
数据表格
综合案例
文件上传
树形组件

使用方法

创建项目 并引入 js css文件

Layuicms