layui01

最新推荐文章于 2023-02-28 22:13:22 发布
最新推荐文章于 2023-02-28 22:13:22 发布
阅读量393 收藏 1
点赞数
分类专栏： 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40660787/article/details/106602386
版权

雷哥整理

 

 

概述

下载文件说明

css 样式

font:字体

image:图片

lay:

|--models

layui.all.js   包含了所有模块的js

layui.js   框架  如果要使用必须使用layui.use(["table","layer","laydate","form"],function(){})

 

学习的内容

  1. 图标
  2. 按钮
  3. 导航菜单
  4. 选项卡
  5. 进度条
  6. 面板+布局
  7. 徽章
  8. 时间线
  9. 动画
  10. 颜色选择器
  11. 滑块
  12. 评分
  13. 轮播
  14. 代码修饰器
  15. 时间和日期选择器
  16. 表单元素
    输入框
    密码框
    下拉列表
  17. 表单对象form
  18. 弹出层【重点】
  19. 数据表格【重点】
  20. 数据表格+弹出层的综合案例【重点】
  21. 文件上传
  22. 树形组件dtree

 

使用方法

创建项目并引入layui

 

图标

方法1 使用字符实体

相关样式

  • layui-icon   代表使用layui的图标处理样式去渲染

方法2 使用样式

相关图标样式可以去：https://www.layui.com/doc/element/icon.html

 

按钮

相关样式：

必要样式：layui-btn

主题样式

|-- layui-btn-primary   原始按钮
|-- layui-btn-normal  百搭按钮
|-- layui-btn-warm   暖色
|-- layui-btn-danger   警告
|-- layui-btn-disabled  禁用

大小样式

|-- layui-btn-lg  大型 按钮
|-- layui-btn-sm 小型按钮
|-- layui-btn-xs 微型按钮

图标结合

圆角样式：layui-btn-radius

按钮组：layui-btn-group

事件监听

和jquery的用法一样

 

导航菜单

相关样式

方向：水平 默认的

垂直：layui-nav-tree

其它样式

|--layui-nav  代表这个是导航菜单
     |-- layui-nav-item  代表这个导航菜单的一样子项
            |-- layui-nav-child  子项目的子项目
     |-- layui-this  当前选中的菜单项

 

选项卡

风格说明

默认风格 只用加layui-tab

简洁风格  layui-tab-brief

卡片风格   layui-tab-card

相关样式

|--layui-tab  代表一个选项卡
    |--layui-tab-title代表卡片的头
        |-- layui-this  启动选中
    |-- layui-tab-content  代表卡片的内容包装体
	|-- layui-tab-item  具体的卡片内容
	|-- layui-show  启动显示

相关属性

lay-allowclose是否启动关闭按钮

lay-filter="demo"  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.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>选项卡</title>
  <link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
             
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>默认风格的Tab</legend>
</fieldset>
 
<div class="layui-tab" id="demo" lay-filter="demo"  lay-allowclose="true">
  <ul class="layui-tab-title" >
    <li lay-id="1" class="mydemo">网站设置</li>
    <li lay-id="2" class="mydemo">用户管理</li>
最低0.47元/天 解锁文章
无区新手
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
LayUI中的基本元素之简单辅助元素
daimeijin的博客
08-13 1015
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 简单辅助元素 引用区块 目前内置了两种风格 <blockquote class="layui-elem-quote">引用区域的文字</blockquote> <blo
ceshi01
L_liujie______的博客
11-23 145
1：双肩背包的测试用例 2：椅子的测试用例 3:电梯的测试用例 4:保温杯的测试用例 双肩包的测试用例 功能测试： 可以装书 可以装水杯 可以装衣服 可以装生活用品。 界面测试： 双肩包的外观是否美观。 双肩包是什么颜色的。 双肩包图案大小是否合理。 图案是否美观。 性能测试： 可能装多少容量的书。 长时间背包，双肩包的包带是否会断裂。 长时间使用拉链，拉链是否会坏掉。 是否容易清理。 安全测试： 制作双肩包的材质是否含有害物质。 双肩包的背带是否容易断
Layui 字段集区块、面板和Tab选项卡
Charge8的博客
07-15 1314
一、字段集区块 两种：字段集区块 - 横线风格 和 字段集区块 - 默认风格 <fieldset class="layui-elem-field layui-field-title"> <legend>字段集区块 - 横线风格</legend> <div class="layui-field-box"&g...
layui的基本元素之一-----面板
water_java的博客
08-29 4978
layui的基本元素之一-----面板卡片面板折叠面板手风琴面板面板嵌套 卡片面板 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>卡片面板</legend> </fieldset> <!-- 卡片式...
Layui 栅格系统、常用表单和校验与监听
Charge8的博客
07-10 1712
一、栅格系统 1、栅格布局规则 1）采用 layui-row 来定义行，如：<div class="layui-row"></div> 2）采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。 3...
layui框架学习（13：辅助元素）
gc_2299的博客
02-28 658
学习layui中引用块、字段集区块、横线等辅助元素的样式设置
基于layui数据表格以及传数据的方式
10-18
"ztime": "2022-01-01", "zcontext": "作业内容", "zremarks": "备注信息" }, ... ] } ``` layui的表格组件会自动处理这个JSON响应，填充表格内容。`layui-table`会根据`data`数组中的对象动态生成行。 此外...
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
08-29
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数 Layui table 组件是一种常用的前端表格组件，能够轻松地实现表格的初始化加载、数据刷新、参数传递等功能。在本文中，我们将详细介绍 Layui table ...
SpringBoot+Layui后台管理系统.zip
最新发布
12-26
当然可以，以下是一份关于您的Java SpringBoot项目的简介描述： 探索Java的SpringBoot魔法 亲爱的开发者们，准备好一起踏上这次深入Java的SpringBoot之旅了吗？如果您正在寻找一个现代化、高效且易于扩展的开发...
LayUI之树形菜单的实现案例项目
07-11
压缩包中的“YX_layui01”可能是项目的源代码目录，包含了HTML、CSS、JavaScript文件以及可能的图片和其他资源。在实际开发中，你可以通过解压这个文件，查看其中的代码结构和实现细节，以进一步理解和学习LayUI树形...
基于VUE3+Layui从头搭建通用后台管理系统（前端篇）
12-25
基于VUE3+Layui从头搭建通用后台管理系统（前端篇）开发，提供源码。包括前端常用功能、基础框架等； 使用express实现模拟后端，提供前端功能接口； 使用echarts实现系统统计图表功能演示； 使用datav实现大屏监控...
layui-选项卡
OpenSource_的博客
08-08 1336
layui-选项卡 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡</title&...
layui按钮的使用
threelifeadv的博客
04-04 4205
<style type="text/css"> .site-demo-button { margin-bottom: 30px; } .site-demo-button div { margin: 20px 30px 10px; } .site-demo-button .layui-btn+.layui-btn { margin-left: 0; } .site-demo...
layui菜单的使用
threelifeadv的博客
04-04 4676
layUI的菜单分为两类：水平菜单和垂直菜单。 水平菜单： <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>水平导航菜单</legend> </fieldset> <ul class="layui-n...
LayUI部分基础介绍
qq_37708081的博客
01-03 3975
Layui 一、概述 1.下载 https://www.layui.com/ 2.下载文件的说明 Css 样式 Font 字体 Images 图片 Lay |-modules 内置模块 Layui.all.js 包含了所有模块的 js Layui.js 框架 如果要使用必须使用 layui.use([“table”,”laydate”,”layda”]),function() 二、学习内...
Layui布局总结：容器和栅格系统
YZSS17的博客
01-31 813
总览 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name=".
《layui宇宙版教程》：常用element元素操作
来吧，学习！
08-20 2502
《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入： 1.21 常用element元素操作 element组件包含导航，选项卡，进度条，面板。这些element功能的开启只需要加载element模块即会自动完成，不用跟其它模块一样为某一个功能而去调用一个方法。本章节介绍使用Layui提供的API操作element组件。 模块加载名称：element。 1.21.1 基本使用 测试代码如下： <!DOCT...
layUI使用elem绑定多个元素
热门推荐
Mr_Cat_的博客
08-24 1万+
根据class属性 //日期插件 $(&quot;.laydate&quot;).each(function(){ laydate.render({ elem: this, //指定元素 表示当前的元素 type: 'datetime', //date日期 time时间 year年 month月份 ...
记录使用layui小问题
weixin_45027592的博客
12-02 131
使用fieldset时分隔线换行的问题，去掉bootstrap.css 页面使用弹窗时不能用jquery-1.4.4.min.js，因为弹窗会再显示 layer.msg('有表情地提示抖动', {offset: '200px', anim: 6,icon:5}) ...
layui+fullcalendar
05-17
Layui 是一款简洁易用的前端 UI 框架，而 FullCalendar 是一个开源的日历插件，可以用来展示日历、日程安排等内容。使用 layui+fullcalendar 可以轻松实现一个美观、实用的日历组件。 具体实现方式如下： 1. 引入 layui 和 fullcalendar 的相关文件： ```html <link rel="stylesheet" href="layui/css/layui.css"> <link rel="stylesheet" href="fullcalendar/fullcalendar.css"> <script src="layui/layui.js"></script> <script src="fullcalendar/fullcalendar.js"></script> ``` 2. 创建一个容器用来展示日历： ```html <div id="calendar"></div> ``` 3. 初始化 fullcalendar： ```javascript layui.use('layer', function(){ var layer = layui.layer; // 初始化 fullcalendar $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: '2021-01-01', navLinks: true, // 可以点击日历中的日期/事件 editable: true, // 可以拖拽或缩放日历中的事件 eventLimit: true, // 限制每天能够显示的事件数量 events: [ { title: '测试事件', start: '2021-01-01T10:00:00', end: '2021-01-01T12:00:00' }, // 可以添加更多的事件 ], // 点击事件的回调函数 eventClick: function(event, jsEvent, view) { layer.msg(event.title + ' 被点击了'); }, // 拖拽事件的回调函数 eventDrop: function(event, delta, revertFunc) { layer.msg(event.title + ' 被拖拽了'); } }); }); ``` 以上代码可以初始化一个简单的日历，并添加一些测试事件、事件的回调函数等。 更详细的使用方式可以参考 fullcalendar 的官方文档：https://fullcalendar.io/docs。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值