layui学习
关注
分享
扫一扫
文章平均质量分 64
自由与束缚JavaJavaScript
这个作者很懒，什么都没留下…
展开
-
032-element模块
1. 页面中有许多元素需要自动去完成一些处理, 譬如导航菜单的点击、Tab的切换、进度条的动态改变、面板的展开或收缩等操作, 他们往往不需要去单独调用一个方法来开启一项功能, 而页面上恰恰有太多这样的小交互, 所以我们统一归类为element组件。2. 基础方法 2.1. 基础方法允许你在外部主动对元素发操作, 目前element模块提供的方法如下:3. 更新渲染3.1. 很多时候你的页面元素可能是动态生成的, 这时element的相关功能将不会对其有效, 你必须手工执行element.原创 2021-01-25 01:09:58 · 744 阅读 · 0 评论 -
031-表单元素
1. 在一个容器中设定class="layui-form"来标识一个表单元素块, 通过规范好的html结构及CSS类, 来组装成各式各样的表单元素, 并通过内置的form模块来完成各种交互。2. 表单元素依赖form模块。(请注意: 如果不加载form模块, select、checkbox、radio等将无法显示, 并且无法使用form相关功能)。3. 表单容器 3.1. form元素添加class="layui-form"属性, 作为layui的表单容器:<form class="原创 2021-01-25 01:04:50 · 724 阅读 · 0 评论 -
030-数据表格二
8. 基础参数一览表 8.1. 下面是目前table模块所支持的全部参数一览表:9. cols - 表头参数一览表 10. templet - 自定义列模板 10.1. 类型: String, 默认值: 无。10.2. 在默认情况下, 单元格的内容是完全按照数据接口返回的content原样输出的, 如果你想对某列的单元格添加链接等其它元素, 你可以借助该参数来轻松实现。这是一个非常实用且强大的功能, 你的表格内容会因此而丰富多样。10.3. templet 提供了三种使用方式原创 2021-01-25 01:04:43 · 312 阅读 · 0 评论 -
029-数据表格一
1. table模块是layui最核心的组成之一。它用于对表格进行一系列功能和动态化数据操作, 涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右, 支持拖拽改变列宽度, 支持排序, 支持多级表头, 支持单元格的自定义模板, 支持对表格搜索、条件筛选等, 支持复选框, 支持分页, 支持单元格编辑等等一系列功能。2. 模块加载名称: table。3. 三种初始化渲染方式 3.1. 为了满足各种情况下的需求, layui对table模块做了三种初始化的支持, 你可按照个人喜好和原创 2021-01-21 22:08:16 · 151 阅读 · 0 评论 -
028-静态表格
1. 使用基础属性1.1. 静态表格支持以下基础属性, 可定义不同风格/尺寸的表格样式:2. 例子 2.1. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>静态表格 - layui</title> <link rel="stylesheet" href="layui/css/layui.css"> <原创 2021-01-25 01:04:18 · 309 阅读 · 0 评论 -
027-日期和时间组件
1. layDate其中主要以: 年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器五种类型的选择方式为基本核心, 并且均支持范围选择(即双控件)。内置强劲的自定义日期格式解析和合法校正机制, 含中文版和国际版, 主题简约却又不失灵活多样。由于内部采用的是零依赖的原生JavaScript编写, 因此又可作为独立组件使用。2. 模块加载名称: laydate。3. 基础参数选项 3.1. 通过核心方法: laydate.render(options)来设置基础参数。也可以通过方法: la原创 2021-01-25 01:04:15 · 634 阅读 · 0 评论 -
026-弹层组件
1. 弹层组件加载名称: layer。2. layer至今仍作为layui的代表作, 甚至让很多人都误以为layui = layer ui, 所以再次强调layer只是作为layui的一个弹层模块, 由于其用户基数较大, 所以至今仍把她作为独立组件来维护。3. 使用场景3.1. 由于layer可以独立使用, 也可以通过Layui模块化使用。 场景 用前准备 调用方式 1. 作为独立组件使用 如果你只是原创 2021-01-25 01:04:13 · 1348 阅读 · 0 评论 -
025-页面元素
1. CSS内置公共基础类2. CSS命名规范2.1. class命名前缀: layui; 连接符: -。如: class="layui-form"。2.2. 命名格式一般分为两种: layui-状态或类型和layui-模块名-状态或类型。因为有些类并非是某个模块所特有, 他们通常会是一些公共类。如: 定义内联块状元素: class="layui-inline"; 定义按钮的原始风格: class="layui-btn layui-btn-primary"。3. 常用公共属性3.1.原创 2021-01-25 01:04:07 · 116 阅读 · 0 评论 -
024-底层方法
1. 全局配置1.1. 方法: layui.config(options)。1.2. 你可以在使用模块之前, 全局化配置一些参数, 尽管大部分时候它不是必须的。目前支持的全局配置项如下:layui.config({ dir: '/res/layui/' // layui.js所在路径(注意, 如果是script单独引入layui.js, 无需设定该参数。), 一般情况下可以无视。 ,version: false // 一般用于更新模块缓存, 默认不开启。设为true即让浏览器不原创 2021-01-24 09:35:58 · 147 阅读 · 0 评论 -
023-流加载
1. 流加载包含信息流加载和图片懒加载两大核心支持, 无论是对服务端、还是前端体验, 都有非常大的性能帮助。2. 模块加载名称: flow。3. flow模块包含两个核心方法3.1. flow模块包含两个核心方法: 信息流和图片懒加载:layui.use('flow', function(){ var flow = layui.flow; // 信息流 flow.load(options); // 图片懒加载 flow.lazyimg(options);}原创 2021-01-24 09:35:54 · 614 阅读 · 0 评论 -
022-轮播
1. 模块加载名称: carousel。2. 基础参数选项2.1. 通过核心方法: carousel.render(options)来对轮播设置基础参数。也可以通过方法: carousel.set(options)来设定全局基础参数。3. 指示器位置3.1. 外层元素的class="layui-carousel"用来标识为一个轮播容器。3.2. 内层元素的属性carousel-item用来标识条目。4. 切换事件 4.1. 轮播的每一次切换时触发, 回调函数返回一个objec原创 2021-01-24 09:35:51 · 182 阅读 · 0 评论 -
021-评分
1. rate评分组件在电商和O2O平台尤为常见, 一般用于对商家进行服务满意度评价。2. 模块加载名称: rate。3. 基础参数3.1. 目前rate组件提供了以下基础参数, 你可根据实际场景进行相应的设置:4. 分数设置 4.1. 关闭半星功能:4.1.1. 小数值大于0.5, 分数向上取整, 如: 3.6分, 则系统自动更改为4分。4.1.2. 小数值小于等于0.5, 分数向下取整, 如: 3.2分, 则系统自动更改为3分。4.1.3. 如果在关闭半星功能的情况下原创 2021-01-24 09:35:44 · 226 阅读 · 0 评论 -
020-滑块
1. 作为一个拖拽式的交互性组件, 滑块往往能给产品带来更好的操作体验。slider模块包含了你能想到的大部分功能, 尽管它可以作为一个独立的个体, 但很多时候它往往会出现form元素中。2. 模块加载名称：slider。3. 基础参数3.1. slider组件支持以下参数:4. 自定义提示文本方法 - setTips 4.1. 当鼠标放在圆点和滑块拖拽时均会触发提示层。其默认显示的文本是它的对应数值, 你也可以自定义提示内容:<script type="text/jav原创 2021-01-24 09:35:39 · 263 阅读 · 0 评论 -
019-工具集
1. layui将一些工具性元素放入util模块中, 以供选择性使用。其内部由多个小工具组件组成, 他们也许不是必须的, 但很多时候却能为你的页面提供良好的辅助作用。2. 模块加载名称: util。3. 固定块 3.1. 页面右下角的那个包含top的bar, 它通常会出现在那个固定位置, 由两个可选的bar和一个默认必选的TopBar组成。3.2. 语法: util.fixbar(options)。3.3. 其中参数options是一个对象, 可支持的key如下表:4. 倒计时原创 2021-01-24 09:35:36 · 251 阅读 · 0 评论 -
018-树形组件
1. 模块加载名称: tree。2. 核心方法2.1. 通过tree.render(options)方法指定一个元素, 便可快速创建一个tree实例。3. 基础参数3.1. 目前tree组件提供以下基础参数, 可根据需要进行相应的设置:4. 数据源属性选项 4.1. 我们将data参数称之为数据源, 其内部支持设定以下选项:5. 节点被点击的回调 - click5.1. 在节点被点击后触发, 返回的参数如下:<script type="text/javas原创 2021-01-24 09:35:33 · 544 阅读 · 0 评论 -
017-颜色选择器
1. 在主题定制的应用场景中, 自然离不开颜色的自定义。而你往往需要的是关于它的直观选择, 于是colorpicker模块姗姗来迟, 它支持hex、rgb、rgba 三类色彩模式, 在代码中简单的调用后, 便可在你的网页系统中自由拖拽去选择你中意的颜色。2. 模块加载名称：colorpicker。3. 基础参数3.1. colorpicker组件目前支持以下参数:4. 预定义颜色 4.1. 预定义颜色, 可以被认为是提供的参考色, 因此除了我们默认的预定义颜色之外, 你还可以自己定义原创 2021-01-24 09:34:17 · 287 阅读 · 0 评论 -
016-穿梭框
1. transfer组件可以进行数据的交互筛选。模块加载名称: transfer。2. 基础参数2.1. 目前transfer组件提供以下基础参数, 可根据需要进行相应的设置:3. 数据源格式解析的回调函数 - parseData3.1. 用于将任意数据格式解析成transfer组件规定的数据格式, 以下是合法的数据格式如下:[ {"value": "1", "title": "李白", "disabled": "", "checked": ""} ,{"value": "2原创 2021-01-24 09:34:12 · 483 阅读 · 0 评论 -
015-图片文件上传
1. 通常情况下, 我们上传文件是借助type="file"的input标签来完成的。layui图片/文件上传, 它所包含的强劲的功能, 还有灵活的UI。任何元素都可以作为上传组件来调用, 譬如: 按钮、图片、普通的DIV等等, 而不再是一个单调的file文件域。2. 模块加载名称: upload。3. 核心方法与基础参数选项3.1. 使用upload模块必须与upload.render(options)方法打交道, 其中的options即为基础参数, 它是一个对象。4. options参数原创 2021-01-24 09:33:26 · 708 阅读 · 0 评论 -
014-模板引擎
1. laytpl是JavScript模板引擎。与一般的字符拼接不同的是, laytpl的模板可与数据分离, 集中把逻辑处理放在View层, 提升代码可维护性, 尤其是针对大量模板渲染的情况。2. 模块加载名称: laytpl。3. 模版语法4. 分隔符4.1. 如果模版默认的{{ }}分隔符与你的其它模板存在冲突, 你也可以重新定义分隔符:laytpl.config({ open: '<%', close: '%>'}); // 分割符将必须采用上述定义的原创 2021-01-23 11:01:41 · 241 阅读 · 0 评论 -
013-分页模块
1. layPage致力于提供极致的分页逻辑, 既可轻松胜任异步分页, 也可作为页面刷新式分页。2. 基础参数选项 2.1. 通过核心方法: laypage.render(options)来设置基础参数。3. 快速使用3.1. laypage的使用非常简单, 指向一个用于存放分页的容器, 通过服务端得到一些初始值, 即可完成分页渲染:<div id="test1"></div><script type="text/javascript">原创 2021-01-23 10:57:09 · 330 阅读 · 0 评论 -
012-简单辅助元素
1. 本篇主要集中罗列页面中的一些简单辅助元素, 如: 引用块、字段集区块、横线等等, 这些元素都无需依赖任何模块。2. 引用区块2.1. layui目前内置了上述两种风格引用区块:<blockquote class="layui-elem-quote">引用区域的文字</blockquote><blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote>3.原创 2021-01-23 10:51:23 · 179 阅读 · 0 评论 -
011-时间线
1. 将时间抽象到二维平面, 垂直呈现一段从过去到现在的故事。2. 时间线2.1. 时间线使用 名称 组合 时间线 class="layui-timeline" 时间线项目 class="layui-timeline-item" 时间线图标 class="layui-icon layui-timeline-axis" 时间线原创 2021-01-23 10:47:40 · 123 阅读 · 0 评论 -
010-徽章
1. 徽章是一个修饰性的元素, 它们本身细小而并不显眼, 但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬, 而显得十分和谐。2. 徽章具有三种不同的风格类型: 小圆点、椭圆体、边框体。3. 使用3.1. 小圆点, 通过layui-badge-dot来定义。里面不能加文字。3.2. 椭圆体, 通过layui-badge来定义。事实上我们把这个视作为主要使用方式。3.3. 边框体, 通过layui-badge-rim来定义。3.4. 实例小圆点<span clas原创 2021-01-23 10:44:01 · 763 阅读 · 0 评论 -
009-面板
1. 一般的面板通常是指一个独立的容器, 而折叠面板则能有效地节省页面的可视面积, 非常适合应用于: QA说明、帮助文档等。2. 面板依赖加载组件: element。3. 卡片面板3.1. 卡片面板使用 名称 组合 卡片面板容器 class="layui-card" 卡片面板头部 class="layui-card-header" 卡片面板内容原创 2021-01-23 10:38:54 · 110 阅读 · 0 评论 -
008-进度条
1. 进度条可应用于许多业务场景, 如任务完成进度、loading等等, 是一种较为直观的表达元素。2. 进度条依赖加载组件: element。3. 进度条使用 名称 组合 进度条容器 class="layui-progress" 进度条 class="layui-progress-bar" 4. 进度条尺寸和百分比4.1. 进度条提供了两种尺寸及多种颜色的显示风格,原创 2021-01-23 10:33:13 · 170 阅读 · 0 评论 -
007-选项卡
1. Tab选项卡广泛应用于Web页面, 因此我们也对其进行了良好的支持。Layui内置多种Tab风格, 支持删除选项卡、并提供响应式支持。2. 选项卡依赖加载组件: element。3. 选项卡使用 名称 组合 默认 class="layui-tab" 选项卡标题容器 class="layui-tab-title" 指向当前选项卡标题 cla原创 2021-01-23 10:20:13 · 365 阅读 · 0 评论 -
006-导航相关
1. 导航一般指页面引导性频道集合, 多以菜单的形式呈现, 可应用于头部和侧边, 是整个网页画龙点晴般的存在。面包屑结构简单, 支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的, 但一些交互操作, 如呼出二级菜单等, 需借助element模块才能使用。2. 导航依赖加载模块: element。3. 导航使用 名称 组合 水平导航 class="layui-nav"原创 2021-01-23 09:51:16 · 126 阅读 · 0 评论 -
005-按钮
1. 向任意HTML元素设定class="layui-btn", 建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合, 从而形成更多种按钮风格。2. 用法<button type="button" class="layui-btn">一个标准的按钮</button><a href="#" class="layui-btn">一个可跳转的按钮</a>3. 主题原创 2021-01-23 09:46:49 · 414 阅读 · 0 评论 -
004-CSS3动画类
1. 在实用价值的前提之下, layui并没有内置过多花俏的动画。而他们同样在layui的许多交互元素中, 发挥着重要的作用。layui的动画全部采用CSS3。2. 使用方式2.1. 动画的使用非常简单, 直接对元素赋值动画特定的class类名即可。如:// 其中layui-anim是必须的, 后面跟着的即是不同的动画类<div class="layui-anim layui-anim-up"></div> // 循环动画, 追加: layui-anim-原创 2021-01-22 23:51:01 · 161 阅读 · 0 评论 -
003-字体图标
1. layui的所有图标全部采用字体形式, 取材于阿里巴巴矢量图标库(iconfont)。因此你可以把一个icon看作是一个普通的文字, 这意味着你直接用css控制文字属性, 如color、font-size, 就可以改变图标的颜色和大小。你可以通过font-class或unicode来定义不同的图标。2. 通过对一个内联元素(一般推荐用i标签)设定class="layui-icon", 来定义一个图标, 然后对元素加上图标对应的font-class(注意: layui 2.3.0之前只支持采用uni原创 2021-01-22 23:46:20 · 336 阅读 · 0 评论 -
002-layui颜色
1. 常用主色1.1. layui主要是以象征包容的墨绿作为主色调, 由于它给人以深沉感, 所以通常会以浅黑色的作为其陪衬, 又会以蓝色这种比较鲜艳的色调来弥补它的色觉疲劳, 整体让人清新自然, 愈发耐看。2. 场景色2.1. 事实上, layui并非不敢去尝试一些亮丽的颜色, 但许多情况下一个它可能并不是那么合适, 所以我们把这些颜色归为"场景色", 即按照实际场景来呈现对应的颜色, 比如你想给人以警觉感, 可以尝试用上面的红色。他们一般会出现在layui的按钮、提示和修饰性元素, 以及一原创 2021-01-22 23:41:34 · 1142 阅读 · 0 评论 -
001-引入layui和layui.code方法
1. layui官方网址: https://www.layui.com/。2. 点击立即下载按钮, 下载最新版的layui。3. 下载完成layui-v2.5.7.zip。4. 解压缩layui-v2.5.7.zip, 查看layui目录。5. layui目录说明。6. 引入layui6.1. 将解压后完整的layui目录部署到你的项目目录, 你只需要引入下述两个文件:<link rel="stylesheet" type="text/css" hre原创 2021-01-17 19:51:53 · 862 阅读 · 0 评论