![](https://img-blog.csdnimg.cn/20190927151026427.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Layui宇宙版教程
Layui宇宙版教程
立志做一个佳娃~
立志做一个佳娃~
展开
-
《layui宇宙版教程》:扫描二维码加2000人QQ群交流学习
Layui宇宙版教程 version1.6《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:任职公司中大部分的软件后台都在使用Layui,的确像Layui作者“贤心”所说:该框架是专为后端服务员量身定做,无需接触过多的前端技术即可完成后台界面的开发,快速实现业务逻辑,而且界面美观,组件丰富。十分赞成贤心的总结,而且我还相信一句话:不管是什么技术,提高生产力才是有力量的!学习Layui的成本非常低,以致于看看.原创 2020-08-16 10:34:41 · 566 阅读 · 0 评论 -
《layui宇宙版教程》:Layui介绍
1.1 Layui介绍Layui是经典的模块化前端框架,由职业前端资深工程师倾情打造,面向全层次的前后端开发者和低门槛开箱即用的前端UI解决方案。Layui是采用模块化规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,学习门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻巧,组件丰富,从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发。Layui首个版本发布于2016年金秋,她更多是为服务端程序员量身定做,无需涉足各种前端工具的复杂配置,只需面对浏原创 2020-08-16 10:36:27 · 520 阅读 · 0 评论 -
《layui宇宙版教程》:搭建Layui开发环境与两种使用方式
1.2 搭建Layui开发环境与两种使用方式搭建Layui开发环境与两种使用方式。1.2.1 搭建Layui开发环境Layui官方网址如下:https://www.layui.com/ 当前最新版本为2.5.6,如图1-xx所示。图1-xx下载量已经达到1653422次,足以见证Layui的流行。Layui是开源的项目,github和gitee地址如下:https://github.com/sentsin/layui/https://gitee....原创 2020-08-16 10:38:55 · 954 阅读 · 0 评论 -
《layui宇宙版教程》:布局
1.3 布局在Layui2.0的版本中加入了强劲的栅格系统和后台布局方案,这意味着终于可以着手采用Layui排版响应式网站和后台系统了。Layui的栅格系统采用业界比较常见的12等分规则,内置:(1)移动设备(2)平板(3)桌面中等屏幕(4)大型屏幕多终端适配处理,最低能支持到IE8。1.3.1 栅格系统为了丰富网页布局,简化HTML/CSS代码的耦合,并提升多终端的适配能力,Layui在2.0的版本中引进了自己的一套具备响应式能力的栅格系统。对容器进行了12等分,预设了原创 2020-08-16 10:41:26 · 924 阅读 · 0 评论 -
《layui宇宙版教程》:颜色
1.4 颜色视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感,而Layui提供的颜色不仅清新而且不乏深沉,互相中和,不过分刺激视觉神经,形成越久越耐看的微妙影像,使Web平台的用户界面看上去更为融洽。1.4.1 常用主色 常用主色如图1-xx所示。Layui主要是以象征包容的墨绿色作为主色调,由于它给人以深沉感,所以通常会以浅黑色作为其陪衬,又会以蓝色这种比较鲜艳的色调来弥补它的色觉疲劳,整体让人清新自然,愈发耐看。测试代码如下:<!DOCTYPE h...原创 2020-08-16 10:42:19 · 565 阅读 · 0 评论 -
《layui宇宙版教程》:字体图标
1.5 字体图标Layui的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。因此可以把一个icon看作是一个普通的文字,这意味着直接用css控制文字属性,如color、font-size就可以改变图标的颜色和大小。可以通过font-class来定义不同的图标。1.5.1 使用方式通过对一个内联元素(一般推荐使用<i>标签)设置class="layui-icon"样式来定义一个图标,然后对元素加上图标对应的font-class即可显示出想要的图标,测试代码如下:原创 2020-08-16 10:43:24 · 918 阅读 · 0 评论 -
《layui宇宙版教程》:CSS3动画类
1.6 CSS3动画类在以实用的前提下,Layui并没有内置过多花俏的动画。而他们同样在Layui的许多交互元素中发挥着重要的作用。Layui的动画全部采用CSS3实现,因此不支持ie8和部分不支持ie9(即在ie8/9中无动画效果)。1.6.1 使用方式动画的使用非常简单,直接对元素赋值动画特定的class类名即可。测试代码如下:<!DOCTYPE html><html> <head> <meta charset=...原创 2020-08-16 10:44:21 · 341 阅读 · 0 评论 -
《layui宇宙版教程》:按钮
1.7 按钮向任意HTML元素设置class="layui-btn"来创建一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成多种按钮风格。1.7.1 用法 测试代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title><...原创 2020-08-16 10:45:29 · 607 阅读 · 0 评论 -
《layui宇宙版教程》:表单
1.8 表单在一个容器中设置class="layui-form"来标识一个表单元素块,通过规范好的HTML结构及CSS类来组装成各式各样的表单元素,并通过内置的form模块来完成各种交互。必须要加载form模块。请注意:如果使用layui.js并且不加载form模块,则select、checkbox、radio等组件将无法显示,呈隐藏状态,并且无法使用form相关功能,可以使用如下代码加载form模块: <script> layui.use('form', fu...原创 2020-08-16 10:46:25 · 368 阅读 · 0 评论 -
《layui宇宙版教程》:导航
1.9 导航导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边。面包屑结构简单,支持自定义分隔符。注意:千万不要忘了加载element模块。虽然大部分行为都是在加载完该模块后自动完成的,但一些交互操作,如弹出二级菜单等,需借助element模块才能使用。1.9.1 水平导航测试代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8">...原创 2020-08-16 10:51:31 · 373 阅读 · 0 评论 -
《layui宇宙版教程》:选项卡
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.10 选项卡Tab选项卡提供多种风格,支持响应式,支持对选项卡进行动态CURD操作等功能。依赖加载组件:element。请注意:必须加载element模块,相关功能才能正常使用。1.10.1 默认Tab选项卡 测试代码如下:<!DOCTYPE html><html> <head>...原创 2020-08-19 10:31:51 · 216 阅读 · 0 评论 -
《layui宇宙版教程》:进度条
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.11 进度条进度条可应用于许多业务场景,如任务完成进度、loading进度等等,是一种较为直观的表达元素。依赖加载组件:element。1.11.1 常规用法 测试代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"...原创 2020-08-19 10:33:08 · 341 阅读 · 0 评论 -
《layui宇宙版教程》:面板
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.12 面板面板通常是指一个独立的容器,而折叠面板则能有效地节省页面的可视面积,非常适合应用于QA说明、帮助文档等等。依赖加载组件:element。1.12.1 卡片面板 测试代码如下:<!DOCTYPE html><html> <head> <meta charset="u...原创 2020-08-19 10:34:04 · 267 阅读 · 0 评论 -
《layui宇宙版教程》:表格
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.13 表格可以通过内置的自定义属性对Table表格进行风格的多样化设置。1.13.1 常规用法 测试代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport"...原创 2020-08-19 10:35:00 · 183 阅读 · 0 评论 -
《layui宇宙版教程》:徽章
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.14 徽章徽章是一个修饰性的元素,它们本身细小而并不显眼,但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬,而显得十分和谐和精致。1.14.1 快速使用 测试代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"&...原创 2020-08-19 10:35:59 · 354 阅读 · 0 评论 -
《layui宇宙版教程》:时间线
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.15 时间线将时间抽象到二维平面,垂直呈现一段从过去到现在的故事。 示例代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="...原创 2020-08-19 10:36:54 · 352 阅读 · 0 评论 -
《layui宇宙版教程》:辅助
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.16 辅助本篇主要集中罗列页面中的一些简单辅助元素,如:引用块、字段集区块、横线等等,这些元素都无需依赖任何模块。1.16.1 引用区块 示例代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...原创 2020-08-19 10:37:41 · 265 阅读 · 0 评论 -
《layui宇宙版教程》:后台布局整合表格
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.17 后台布局整合表格 参考代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial...原创 2020-08-19 10:38:41 · 207 阅读 · 0 评论 -
《layui宇宙版教程》:弹出层-1
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:原创 2020-08-19 10:47:48 · 408 阅读 · 0 评论 -
《layui宇宙版教程》:弹出层-2
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.18.9 icon图标(信息框和加载层的私有参数)类型:Number。信息框的默认值是-1,加载层的默认值是0。信息框默认不显示图标,当想显示图标时,默认皮肤可以传入0-6。如果是加载层,可以传入0-2。1.18.9.1 测试信息框icon: 0 测试代码如下:<!DOCTYPE html><html>...原创 2020-08-19 10:49:14 · 277 阅读 · 0 评论 -
《layui宇宙版教程》:弹出层-3
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.18.21 resize是否允许拉伸类型:Boolean,默认值true。默认情况下,可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能,设置 false即可。该参数对loading、tips层无效。 测试代码如下:<!DOCTYPE html><html> <head>...原创 2020-08-20 08:47:39 · 344 阅读 · 0 评论 -
《layui宇宙版教程》:弹出层-4
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.18.31 tipsMore是否允许同时显示多个tips类型:Boolean,默认值false。允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启 测试代码如下:<!DOCTYPE html><html> <head> <meta charset...原创 2020-08-20 08:49:47 · 317 阅读 · 0 评论 -
《layui宇宙版教程》:弹出层-5
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.18.44 layer.closeAll(type)关闭所有层如果不想获取index而实现关闭弹层时,可以使用closeAll方法。如果不指定层类型的话,它会销毁当前页面中所有的layer层。当然,如果只想关闭某个类型的层,那么可以使用如下代码:layer.closeAll(); //疯狂模式,关闭所有层layer.closeAll('dialog'); /.原创 2020-08-20 08:50:47 · 292 阅读 · 0 评论 -
《layui宇宙版教程》:日期和时间组件laydate
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.19 日期和时间组件laydate主要以年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器,这五种类型的选择方式为基本核心使用方式,并且均支持范围选择(即双控件)。内置强劲的自定义日期格式解析和合法校正机制,含中文版和国际版,主题简约却又不失灵活多样。由于内部采用的是零依赖的原生JavaScript编写,因此又可作为独立组件使用。模块加载名称:layd.原创 2020-08-20 08:52:14 · 1923 阅读 · 0 评论 -
《layui宇宙版教程》:分页组件laypage
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.20 分页组件laypagelayPage致力于提供极致的分页逻辑,既可轻松胜任异步分页,也可作为页面刷新式分页。模块加载名称:laypage。1.20.1 快速使用laypage的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染 测试代码如下:<!DOCTYPE html><...原创 2020-08-20 08:53:30 · 1493 阅读 · 0 评论 -
《layui宇宙版教程》:常用element元素操作
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.21 常用element元素操作element组件包含导航,选项卡,进度条,面板。这些element功能的开启只需要加载element模块即会自动完成,不用跟其它模块一样为某一个功能而去调用一个方法。本章节介绍使用Layui提供的API操作element组件。模块加载名称:element。1.21.1 基本使用 测试代码如下:<!DOCT...原创 2020-08-20 08:54:42 · 2492 阅读 · 0 评论 -
《layui宇宙版教程》:模板引擎laytpl
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.22 模板引擎laytpllaytpl是JavaScript模板引擎,在字符解析上有着比较出色的表现,欠缺之处在于异常调试上。模块加载名称:laytpl。在线调试:http://www.layui.com/demo/laytpl.html1.22.1 模板的快速使用与一般的字符拼接不同的是,laytpl模板可与数据分离,集中把逻辑处理放在View.原创 2020-08-20 08:55:40 · 1143 阅读 · 0 评论 -
《layui宇宙版教程》:数据表格table-1
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.23 数据表格table 注意:根据使用上的经验,建议不要把数据表格做为服务端分页的”前端复杂界面设计”的解决方案。当对数据表格进行自定义定制时,由于Layui框架中table模块可定制性不良的原因,也就是过度封装,有可能在复杂界面的实现上并不是太方便,还得自己添加javascript和css代码,建议使用普通table表格结合自写代码来实现分页,这样的高度可...原创 2020-08-20 08:56:58 · 432 阅读 · 0 评论 -
《layui宇宙版教程》:数据表格table-2
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.23.3 基础参数一览表基础参数并非所有都要出现,有必选也有可选,结合实际需求自由设置即可。基础参数一般出现在以下三种场景中。(1)场景一是在方法渲染中使用,如图1-xx所示。(2)场景二是在自动渲染中使用,如图1-xx所示。(3)场景三是在重加载reload中使用,如图1-xx所示。图1-xx所示是目前table模块所...原创 2020-08-20 08:59:39 · 383 阅读 · 0 评论 -
《layui宇宙版教程》:数据表格table-3
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.23.4 异步数据接口 数据的异步请求由图1-xx所示的参数组成。 使用示例代码如下://“方法级渲染”配置方式table.render({ //其它参数在此省略 url: '/api/data/' //where: {token: 'sasasas', id: 123} //如果无需传递额外参数,可不加该参数...原创 2020-08-20 09:00:39 · 278 阅读 · 0 评论 -
《layui宇宙版教程》:数据表格table-4
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.23.5 cols表头参数一览表cols表头参数如图1-xx所示。1.23.5.1 widthwidth值类型Number/String。设定列宽,若不填写则自动分配;若填写,则支持值为:数字、百分比 测试代码如下:<!DOCTYPE html><html> <head>...原创 2020-08-21 00:05:04 · 342 阅读 · 2 评论 -
《layui宇宙版教程》:数据表格table-5
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.23.6 基础方法基础用法是table模块的关键组成部分,目前所开放的所有方法如图1-xx所示。 后面的章节会对常用的方法进行案例演示。1.23.7 获取行中checkbox状态可获取到表格所有的选中行相关数据。语法:table.checkStatus('ID');其中ID为基础参数id对应的值,示例代码如下:【自动化渲染】...原创 2020-08-21 00:06:02 · 773 阅读 · 0 评论 -
《layui宇宙版教程》:表单模块form
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.24 表单模块form模块加载名称:form。1.24.1 表单基本使用 Layui针对各种表单元素做了较为全面的UI支持,无需去书写那些UI结构,只需要写HTML原始的input、select、textarea等等这些基本的标签即可。在UI上的渲染只要求一点:必须给表单体系所在的父元素加上class="layui-form",一切的工作都会在加载完for.原创 2020-08-21 00:06:24 · 839 阅读 · 0 评论 -
《layui宇宙版教程》:上传upload
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.25 上传upload上传模块自Layui2.0的版本开始,进行了全面重写,这使得它的功能不再那么单一,它所包含的不仅是更为强劲的功能,还有灵活的UI。任何元素都可以作为上传组件来调用,譬如按钮、图片、普通的DIV等等,而不再是一个单调的file文件域。模块加载名称:upload。1.25.1 前端界面效果 测试代码如下:<!DOCTYPE .原创 2020-08-21 00:06:38 · 1458 阅读 · 0 评论 -
《layui宇宙版教程》:穿梭框组件transfer
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.26 穿梭框组件transfer模块加载名称:transfer。1.26.1 快速使用transfer组件可以进行数据的交互筛选。 测试代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8">...原创 2020-08-21 00:07:02 · 1815 阅读 · 0 评论 -
《layui宇宙版教程》:颜色选择器colorpicker
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.27 颜色选择器colorpicker在主题定制的应用场景中,自然离不开颜色的自定义,而往往需要的是关于它的直观选择,colorpicker支持hex、rgb、rgba三类色彩模式,在代码中简单的调用后,便可在网页系统中自由拖拽去选择中意的颜色。模块加载名称:colorpicker。1.27.1 快速使用 测试代码如下:<!DOCTYPE h.原创 2020-08-21 00:07:06 · 1402 阅读 · 0 评论 -
《layui宇宙版教程》:滑块slider
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.28 滑块slider作为一个拖拽式的交互性组件,滑块往往能给产品带来更好的操作体验。模块加载名称:slider。1.28.1 快速使用通过对slider模块的使用,可以在页面构建出可拖动的滑动元素,如下代码是一个最基本的用法。 测试代码如下:<!DOCTYPE html><html> <hea...原创 2020-08-21 00:07:34 · 1755 阅读 · 0 评论 -
《layui宇宙版教程》:评分组件rate
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.29 评分组件raterate评分组件在电商和O2O平台尤为常见,一般用于对商家进行服务满意度评价。模块加载名称:rate。1.29.1 快速使用rate组件可以用来进行展示或评价,只需要通过更改参数设定来开启想要的功能。 测试代码如下:<!DOCTYPE html><html> <head&g...原创 2020-08-21 00:07:38 · 920 阅读 · 0 评论 -
《layui宇宙版教程》:轮播组件carousel
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.30 轮播组件carouselcarousel主要适用于跑马灯/轮播等交互场景。模块加载名称:carousel。1.30.1 快速使用 测试代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...原创 2020-08-21 00:07:43 · 4025 阅读 · 0 评论 -
《layui宇宙版教程》:工具集util
《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:1.31 工具集util将一些工具性元素放入util模块中,以供选择性使用。其内部由多个小工具组件组成,他们也许不是必须的,但很多时候却能为页面提供良好的辅助作用。模块加载名称:util。1.31.1 固定块固定块通常会出现在固定位置,由两个可选的bar和一个默认必选的TopBar组成。语法:util.fixbar(options),其中参数option.原创 2020-08-21 00:08:05 · 1251 阅读 · 0 评论