LayUI笔记

最新推荐文章于 2024-08-20 15:50:34 发布

七夜LaNotte

最新推荐文章于 2024-08-20 15:50:34 发布

阅读量286

点赞数

分类专栏：前端文章标签： LayUI LayUI使用方法

本文链接：https://blog.csdn.net/Nanaya_AMV/article/details/100602768

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

LayUI

简介

LayUI与EasyUI类似，都封装了JQuery和一套完整的组件样式。它是国产的一个前端框架，使用起来门槛更低，上手更快

布局

类似BootStrap的栅格布局，支持响应式

使用步骤

第一步：引入LayUI相关的JS、CSS

<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>

第二步：添加样式、或者引入JS模块

LayUI中的组件分为两种：

一种不要引入单独的模块，直接给原生的DOM添加class样式即可，比如按钮、小图标（印章）
另一张需要引入LayUI相关的模块，比如layer

组件分类

需要引入LayUI相关模块才能使用的

只添加class样式就可以使用的

后台开发常用组件

表格组件

Tab标签页

面板

弹出层

树形组件

轮播图

导航菜单

表单相关组件

面包屑导航条

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

七夜LaNotte

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

学习layui笔记

fqfq123456的专栏

09-04

170

layui是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这.

Layui学习笔记

计算机源码之家的博客

10-05

403

Layui目录 Layui目录Layui目录一、概述1. 下载2.下载文件说明二、内容1. 图标2. 按钮3. 导航菜单4. 选项卡5. 进度条6. 面板+布局7. 徽章8. 时间线9. 动画10. 颜色选择器11. 滑块12. 评分13. 轮播14. 代码修饰器15. 时间和日期选择器16. 表单元素17. 表单对象form18. 弹出层【重点】19. 数据表格【重点】20. 数据表格+弹出层的综合案例【重点】21. 文件上传22. 树形组件dtree三、使用方法3.1图标3.2按钮3.3事件监听3.4导

参与评论您还未登录，请先登录后发表或查看评论

Layui的笔记

qq_61576523的博客

03-17

1076

当大家进入layui的时候，看文档的第一眼，就是如何使用layui，首先要想使用layui的话，要先导如layui的文件，这个文件可以在layui的界面中下载，这里就不提供了。要想引入文件的话，首先要写标签，当然还要引入jquery的jar包，这个更不能忘记，他们都是关联的。我的layui和jquery都放在一个名为js的文件下面。 layui导入： <script type="text/javascrpt" src="js/jquery-1.8.3.js"></script&

LayUI 笔记

普通还不自信的程序员

08-20

350

文章目录一、引言1.1 介绍二、环境搭建2.1 下载2.2 导入依赖三、页面元素3.1 布局3.2 字体图标3.3 按钮3.4 表单3.5 数据表格3.5.1 动态表格3.5.2 分页参数3.5.3 显示工具栏3.5.4 操作按钮3.5.5 操作按钮回调3.6 导航3.7 动画四、内置模块4.1 layer4.1.1 弹窗方法4.1.2 弹窗属性4.2 layDate4.3 upload4.4 carousel细节细节一、引言 1.1 介绍官网：https://www.layui.com/ 在官网首

Layui：一款强大的前端UI框架

最新发布

m0_46413639的博客

08-20

2059

在这些框架中，Layui凭借其优雅的设计、灵活的组件和丰富的功能，受到了广大开发者的喜爱。通过引入Layui的CSS和JavaScript文件，开发者可以方便地使用Layui提供的丰富组件，如按钮、表格、表单。灵活定制：Layui的组件具有很强的可定制性，开发者可以根据自己的需求修改组件的样式、颜色、大小等属性，使得组件能够更好地适应不同的网页应用场景。组件丰富：Layui提供了丰富的Web界面组件，如表格、表单、按钮、选项卡、弹出层等，可以满足大部分网页应用的开发需求。二、Layui的使用。

layui 笔记

cool_soup29的博客

09-28

257

layui form select 取值异常如果设置中的option选项的ID值出现一致的情况，则会导致取值混乱 HTML:基础知识，ID唯一 // 根据ID值进行 selected 的option 的文本值 $("#QC-data-device-id option:selected").text() layui table 的even事件 table.render({ ... elem:'#table_id' , even:true ..

layui笔记

qq_38964133的博客

07-15

274

在使用的时候使用 layui.use 可以进行模块化的加载 AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。 CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。 AMD:提前执行（异步加载：依赖先执行）+延迟执行 CMD:延迟执行（运行到需加载，根据顺序执行）页面元素 #####布局 offset4 向右偏移和bootstrap里面的布局差不多都是使...

layui笔记.docx

08-06

layui学习笔记 layui是一个基于JavaScript的前端框架，提供了一系列的UI组件和插件，帮助开发者快速构建Web应用程序。layui的栅格系统是其核心组件之一，提供了灵活的布局方式，能够满足不同屏幕大小和设备的需求...

Layui2.x讲义代码笔记.zip

03-25

这份“Layui2.x讲义代码笔记”很可能是对这个框架的深入讲解和实例代码集合，旨在帮助开发者更好地理解和使用Layui。在Layui2.x中，主要知识点包括： 1. **模块化设计**：Layui采用了模块化的开发方式，将各个...

layui——笔记

hai_man_的博客

02-17

214

layui——笔记

Layui 学习笔记

weixin_36944798的博客

04-23

304

https://www.layui.com/doc/modules/element.html 网站设置商品管理订单管理内容1 内容2 内容3 layui.use(‘element’, function(){ var element = layui.element; //一些事件监听 element.on(‘tab(d...

layui学习笔记

Crush_kylin的博客

04-19

430

文章目录1、获取用户输入 1、获取用户输入 //获取用户输入 $(this)表示当前对象 $("#name") var con = $(this).val(); <script> $(function(){ $("#name").blur(function(){ //创建正则 var reg = /^\d{6,20}$/; //获取用户输入 var con = $(this).val(); //用正则匹配内容 var re

LayUi学习笔记

dingcai12003的博客

06-26

487

layui简介 layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是...

"前端框架LayUI学习笔记总结与实践指南

《学习笔记》前端框架LayUI.pdf是一本介绍LayUI前端框架的学习笔记。LayUI是一个全新的前端UI框架，它结合了HTML、CSS和JS等技术，旨在简化前端开发过程，提高效率。本文总结了LayUI的基本概念、使用方法和常用功能...