![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
layui
zhouzhou_98
所谓的焦虑就是书读的太少,而想的又太多
展开
-
layui初体验
首先从官方下载资料: http://layer.layui.com/首先在页面中引入JQ文件,后导入layer文件夹进项目中,最后引入layer.js详细代码如下<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="vi...原创 2019-09-26 12:18:33 · 138 阅读 · 0 评论 -
layui颜色选择器
颜色选择器 相关代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:...原创 2019-10-02 15:36:34 · 4099 阅读 · 0 评论 -
layui滑块
滑块 相关属性elem :绑定页面元素value 设置初始值min 最小值max 最大值step 设置步长setTips 滑动时是否显示tips文本change 监听改变事件<%--Created by IntelliJ IDEA.User: LenovoDate: 2019/10/2Time: 15:3...原创 2019-10-02 15:57:24 · 3248 阅读 · 0 评论 -
layui评分
评分 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3....原创 2019-10-02 16:15:24 · 2020 阅读 · 0 评论 -
layui对象及相关事件
表单元素 输入框密码框下拉列表【重新渲染】是加入layui-form 引入form模块lay-search="" 是否支持下拉输入过滤单选框【重新渲染】是加入layui-form 引入form模块复选框【重新渲染】是加入layui-form 引入form模块lay-skin="primary" 使用原...原创 2019-10-03 14:22:01 · 2039 阅读 · 0 评论 -
layui弹出层
弹出层【重点】 layer.alert layer.confirm layer.prompt layer.tab layer.photos(options) json要求 { "title": "相册标题", "id": 123, "start": 0, "da...原创 2019-10-03 19:02:27 · 1598 阅读 · 0 评论 -
layui表格的使用
数据表格【重点】 基本使用 准备json { "code": 0, "msg": "", "count": 101, "data": [ { "id": "10001", "username": "杜甫", ...原创 2019-10-04 13:10:23 · 766 阅读 · 0 评论 -
layUI数据表格和弹出层综合案例
数据表格+弹出层的综合案例【重点】 json准备 { "code": 0, "msg": "", "count": 101, "data": [ { "id": "10001", "username"...原创 2019-10-04 16:34:18 · 4357 阅读 · 1 评论 -
动画
动画 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org...原创 2019-10-02 14:44:09 · 211 阅读 · 0 评论 -
layui时间线
时间线 常规时间线相关样式layui-timeline 代表一个时间线|-- layui-timeline-item 代表一个时间节点|-- layui-timeline-axis 代表左边的竖线|-- layui-timeline-content 时间线的内容...原创 2019-10-02 14:31:12 · 5362 阅读 · 0 评论 -
layui徽章
徽章 相关样式layui-badge-dot 小圆点layui-badge 弧形徽章layui-badge-rim 边框徽章组合使用详细代码<%--Created by IntelliJ IDEA.User: LenovoDate: 2019/10/2Time: 14:15To change this tem...原创 2019-10-02 14:23:53 · 1706 阅读 · 0 评论 -
layDate组件
进入官网: https://www.layui.com/laydate/复制layDate文件夹到目录中,引入layDate文件中的laydate.js详细项目组成:项目源码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">&...原创 2019-09-29 15:17:37 · 92 阅读 · 0 评论 -
layui的基本使用
首先进入官网: https://www.layui.com/,下载相应的文件查看官方文档: https://www.layui.com/doc(书读百遍,其义自见)具体使用声明所需要使用的模块和回调函数代码如下图:<!DOCTYPE html><html lang="en"><head><meta...原创 2019-10-01 16:56:20 · 1074 阅读 · 1 评论 -
layui图标的学习
首先,引入layui文件在项目中引入layui.css和layui.js使用图标的具体方式:方法1 使用字符实体 &相关样式layui-icon 代表使用layui的图标处理样式去渲染方法2 使用样式相关图标样式可以去https://www.layui.com/doc/elemen...原创 2019-10-01 19:19:35 · 5468 阅读 · 0 评论 -
layui之按钮的学习
学习网址:https://www.bilibili.com/video/av59813890?p=3相关样式1,必要样式 layui-btn2,主题样式|-- layui-btn-primary 原始按钮|-- layui-btn-normal 百搭按钮...原创 2019-10-01 20:09:16 · 1531 阅读 · 0 评论 -
layui导航学习
相关样式方向:水平 默认的 垂直 layui-nav-tree其它样式 |--layui-nav 代表这个是导航菜单 |-- layui-nav-item 代表这个导航菜单的一样子项...原创 2019-10-01 20:42:19 · 280 阅读 · 0 评论 -
layui选项卡的使用
风格说明 默认风格 只用加layui-tab简洁风格 layui-tab-brief卡片风格 layui-tab-card 相关样式 |--layui-tab 代表一个选项卡|--layui-tab-title代表卡片的头...原创 2019-10-02 12:43:02 · 7953 阅读 · 0 评论 -
layui进度条
进度条 相关样式layui-progress 代表一个进度条|-- layui-progress-bar 代表进度条里面的进度layui-progress-big 变粗了相关属性lay-percent 代表进度值lay-showpercent="true" 是否显示进度值代码如下图:<%--Crea...原创 2019-10-02 13:15:29 · 10364 阅读 · 0 评论 -
layui面板
卡片面板 相关样式layui-row 代表一行layui-col-space15 space0-space30 代表卡片之间的间距|-- layui-col-md6 代表一列 md1-md12 代表当前卡片占整行的X/12|-- layui-card 代表一个卡片...原创 2019-10-02 13:50:20 · 1665 阅读 · 0 评论 -
layui布局
布局 相关样式layui-row|-- layui-col-xs6移动设备占比|-- layui-col-sm6平板设备占比|-- layui-col-md6桌面设置占比详细代码:<%--Created by IntelliJ IDEA.User: LenovoDate:...原创 2019-10-02 14:12:31 · 1326 阅读 · 0 评论 -
树形组件
树形组件dtree 下载 https://gitee.com/miniwatermelon/DTreeHelper 基本使用 创建json { "status":{"code":200,"message":"操作成功"}, "data":[{ "id":"001", ...原创 2019-10-05 11:34:22 · 2573 阅读 · 0 评论