-
7 LayUI
介绍
开源模块化前端 UI 框架, 由职业前端倾情打造，面向全层次的前后端开发者，易上手开源免费的 Web UI 组件库,这个框架， 这个框架曾经非常流行，现在如果快速开发依然值得推荐，这个框架已经不维护，官网无法访问，访问到的都是基本上是被人对网站开放的一个镜像。作者建议大家拥抱 MVVM开发模式，也就是 VUE 类似的框架。
https://www.layuiweb.com/下载
快速上手
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入layui样式(提供这种类名，我们可以直接使用)--> <link href="assets/layui/css/layui.css" rel="stylesheet"> <!--引入layui js (提供了组件的功能)--> <script src="assets/layui/layui.js"></script> </head> <body> <!--自己的dom--> <button id="abc" class="layui-btn layui-btn-primary layui-border-blue" >按钮</button> <script> //layui加载模块,use( 数组 , 回调函数 ) 在数组中指定需要加载的模块，在回调函数中使用这些模块 layui.use(['layer','form','jquery'],function () { //从layui框架中获取 layer模块 let layer = layui.layer; //从layui框架中获取 jquery模块 let $ = layui.jquery; //从layui框架中获取 form 表单模块 let form = layui.form; //点击按钮 弹出层。 $("#abc").click(function () { layer.alert('你好LayUI'); }) }); </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
页面元素
-
页面规范
-
栅格和布局
理解： 类似于(网格|表格)把页面按照行列来布局，每一列默认12等份，可以可以使用样式来声明元素可使用的份数。
涉及样式：
layui-container 容器样式。
layui-row 行样式。
layui-col-mdN 列样式。
layui-col-xx-offsetN 列偏移。- 颜色
系统预制了各种主题颜色
- 图标
通常使用一个 标签来显示成一个图标，给这个标签添加样式
layui-icon 基础样式
layui-icon-xxx 具体的某个图片样式名(官网查询<button class="layui-btn layui-btn-normal"> <i class="layui-icon layui-icon-set">i> 设置button>- 1
- 2
- 按钮
系统预设了几种主题(颜色)按钮
layui-btn 基本样式
layui-btn-主题单词 [ primary normal warm danger disable ]
layui-border-颜色 [ blue red orange green black ]
layui-btn-大小 [ xs sm lg ]
layui-btn-fluid 让按钮适应容器宽度。
- 表单
接受用户输入，用于录入信息界面必备。需要掌握 1. 数据校验 2.数据收集
<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> layui.use('form', function(){ var form = layui.form; //监听提交 'submit(提交按钮的lay-filter)' 回调参数data 整个表单中的全部数据 data.field form.on('submit(formDemo)', function(data){ // 收集到全部数据后转成JSON字符串。 layer.alert(JSON.stringify(data.field)); return false; }); }); script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
导航
页面盛放一系列导航链接的
<ul class="layui-nav" lay-filter="abc"> <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> <li class="layui-nav-item"><a href="http://www.baidu.com">百度a>li> <li class="layui-nav-item"><a abc="java">helloa>li> ul>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
获得点击内容
<script> layui.use(['element'],function () { layui.element.on('nav(abc)', function(elem){ console.log(elem.attr("abc")); //得到当前点击的DOM对象 }); }) script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
菜单
整理层级显示功能列表的组件
<div style="width: 300px"> <div class="layui-panel"> <ul class="layui-menu" id="java"> <li lay-options="{id: 100}"> <div class="layui-menu-body-title">menu item 1div> li> <li lay-options="{id: 101}"> <div class="layui-menu-body-title"> <a href="#">menu item 2 <span class="layui-badge-dot">span>a> div> li> <li class="layui-menu-item-divider">li> <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}"> <div class="layui-menu-body-title"> menu item 3 group <i class="layui-icon layui-icon-up">i> div> <ul> <li lay-options="{id: 1031}">menu item 3-1li> <li lay-options="{id: 1032}"> <div class="layui-menu-body-title">menu item 3-2div> li> ul> li> <li class="layui-menu-item-divider">li> <li lay-options="{id: 104}"> <div class="layui-menu-body-title">menu item 4div> li> <li class="layui-menu-item-parent" lay-options="{type: 'parent'}"> <div class="layui-menu-body-title"> menu item 5 <i class="layui-icon layui-icon-right">i> div> <div class="layui-panel layui-menu-body-panel"> <ul> <li lay-options="{id: 1051}"> <div class="layui-menu-body-title">menu item 5-1div> li> <li lay-options="{id: 1051}"> <div class="layui-menu-body-title">menu item 5-2div> li> ul> div> li> <li lay-options="{id: 106,age:18}"> <div class="layui-menu-body-title">menu item 6div> li> ul> div> div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
获得点击的内容
<script> layui.use(['dropdown','jquery'], function(){ var dropdown = layui.dropdown; var $ =layui.jquery; //菜单点击事件，其中 docDemoMenu1 对应的是菜单结构上的 id 指 dropdown.on('click(java)', function(options){ var othis = $(this); //当前菜单列表的 DOM 对象 console.log(options.age); //菜单列表的 lay-options 中的参数 }); }); script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
选项卡
比如内容较多的时候，可以把内容分成多个部分显示
<div style="width: 800px"> <div class="layui-tab layui-tab-brief layui-bg-gray " lay-allowClose="true" lay-filter="abcd" > <ul class="layui-tab-title"> <li class="layui-this">网站设置0li> <li>用户管理1li> <li>权限分配2li> <li>商品管理3li> ul> <div class="layui-tab-content" style="height: 500px"> <div class="layui-tab-item">内容0div> <div class="layui-tab-item layui-show">内容1div> <div class="layui-tab-item">内容2div> <div class="layui-tab-item">内容3div> div> div> div> <button id="myadd">添加一个新的选项button>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
获得动态添加选项卡
<script> layui.use(['element','jquery'],function (){ let element = layui.element; let $ = layui.jquery; element.on('tab(abcd)', function(data){ // console.log(this); //当前Tab标题所在的原始DOM元素 console.log(data.index); //得到当前Tab的所在下标 console.log($(data.elem.find(".layui-tab-item").get(data.index)).text()); //得到当前的Tab大容器 }); $("#myadd").click(function () { element.tabAdd('abcd', { title: '千锋' ,content: '
' //支持传入html
,id: '选项卡标题的lay-id属性值'
});
});
});
script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
轮播
轮播首先满足 html 和 css 网页结构
<div class="layui-carousel" id="nb"> <div carousel-item > <div><img src="images/jt.jpg">div> <div><img src="images/ldh.jpg">div> <div><img src="images/zxy.jpg">div> <div><img src="images/xx.jpg">div> div> div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
通过js 渲染
<script> layui.use('carousel', function(){ var carousel = layui.carousel; //建造实例 carousel.render({ elem: '#nb' ,width: '100%' //设置容器宽度 ,arrow: 'always' //始终显示箭头 ,height: '400px' //,anim: 'updown' //切换动画方式 }); }); script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
日期组件
准备一个普通输入框 input
<div style="width: 300px;padding: 10px"> <input id="gg" type="text" class="layui-input" > div> <div style="width: 300px;padding: 10px"> <input id="mm" type="text" class="layui-input" > div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
使用js 渲染
<script> layui.use('laydate', function(){ var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ elem: '#gg', //指定元素 range:true }); //执行一个laydate实例 laydate.render({ elem: '#mm', //指定元素 type:'time' }); }); script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
弹出层
弹出层 主要涉及一下方法
<button id="btn1" class="layui-btn" >toast框button> <button id="btn2" class="layui-btn">信息框button> <button id="btn3" class="layui-btn">确认框button> <button id="btn4" class="layui-btn">open自定义框button>- 1
- 2
- 3
- 4
- 5
js 渲染
layui.use(['layer','jquery'],function () { let layer = layui.layer; let $ = layui.jquery; $("#btn1").click(function (){ layer.msg("加载成功",{icon: 3}) }); $("#btn2").click(function (){ layer.alert("保存成功",{icon: 1}) }); $("#btn3").click(function (){ layer.confirm("是否删除？",{icon: 3},function (){ layer.msg('你点的是确定') }) }); $("#btn4").click(function (){ layer.open({ type:1, title:"公告", content:'五一放假通知', area:['400px','500px'], closeBtn: 2 }); }); });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
数据表格
高频使用组件 ，用于显示表格数据，通常使用ajax加载后台数据
<table id="table" lay-filter="dataTable"> </table>- 1
使用js方法渲染
<script> layui.use(['jquery','table'],function (){ let table = layui.table; table.render({ url:'http://127.0.0.1/api/v3/tag/specialList?plat=0&page=1&tagid=12&pagesize=20&ugc=1&id=68&sort=2', elem: '#table' //指定原始表格元素选择器（推荐id选择器） ,height: 500 //容器高度 ,cols: [[ //设置表头,把json数据绑定到列上面 { title: "用户名", field: "username" }, { title: "介绍", field: 'specialname' }, { title: "封面图片", field: 'imgurl' } ]] ,parseData(res){ //解决后端数据和 需要数据格式不一致的问题。 let obj = { code: res.errcode, data: res.data.info, msg: "", count: res.data.info.length } return obj; } }); }); </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
-
相关阅读:
不可不知的USB2.0/USB3.0/HDMI静电防护方案
springboot+springsecurity+elementui博客系统-dsblog
排序概述笔记
网易面试总结——面试案例5~面试案例8
ElementUi Table行点击获取索引值
Python 全栈安全（四）
html2canvas将html代码生成canvas转换成图片，并且保存到本地
ArcGIS导出Excel中文乱码及shp添加字段3个字被截断
Python | eval、exec | NameError: name ‘XXX‘ is not defined`
SpringBoot电商实战Day8 冒泡排序 贪心算法
- 原文地址：https://blog.csdn.net/yc_Cabbage/article/details/126295380
