目录
v2.6.3/4 2021-04-05 / 2021-04-06
[新增] dropdown 通用下拉菜单组件 #文档 #示例
一、开始使用 - 入门指南
layui(谐音:类 UI) 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。其风格简约轻盈,而组件优雅丰盈,从源代码到使用方法的每一处细节都经过精心雕琢,非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,它更多是面向后端开发者,你无需涉足前端各种工具,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。 ——前端网页框架
layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 Web 界面速成开发方案。
1. 官网首页下载
你可以在我们的 官网首页 下载到 layui 的最新版,它经过了自动化构建,更适合用于生产环境。目录结构如下:
</>code
├─css //css目录
│ │─modules //模块 css 目录(一般如果模块相对较大,我们会单独提取,如下:)
│ │ ├─laydate
│ │ └─layer
│ └─layui.css //核心样式文件
├─font //字体图标目录
└─layui.js //核心库
2. Git 仓库下载
你也可以通过 GitHub 或 码云 得到 layui 的完整开发包,以便于你进行二次开发,或者 Fork layui 为我们贡献方案
3. npm 下载
</>code
npm i layui
4. 第三方 CDN 方式引入:
UNPKG 和 CDNJS 均为第三方开源免费的 CDN,通过 NPM/GitHub 实时同步。另外还有 LayuiCDN。
UNPKG 引入示例code
<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js">
如果你将 layui 下载到了本地,那么可将其完整地放置到你的项目目录(或静态资源服务器),这是一个基本的入门页面:
</>HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用 layui</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<!-- 你的 HTML 代码 -->
<script src="./layui/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
</script>
</body>
</html>
layui 定义为「经典模块化」,并非是自吹她自身有多优秀,而是有意避开当下 JS 社区的主流方案,试图以尽可能简单的方式去诠释高效!她的所谓经典,是在于对返璞归真的执念,她以当前浏览器普通认可的方式去组织模块!我们认为,这恰是符合当下国内绝大多数程序员从旧时代过渡到未来新标准的绝佳指引。所以 layui 本身也并不是完全遵循于 AMD 时代,准确地说,她试图建立自己的模式:
</>code
//layui 模块的定义(新 js 文件)
layui.define([mods], function(exports){
//……
exports('mod', api);
});
//layui 模块的使用
layui.use(['mod1', 'mod2'], function(args){
var mod = layui.mod1;
//……
});
没错,她具备早前 AMD 的影子,又并非受限于 CommonJS 的那些条条框框,layui 认为这种轻量的组织方式,比WebPack更符合绝大多数场景。所以她坚持采用经典模块化,也正是能让人避开工具的复杂配置,回归简单,安静高效地编织原生态的 HTML/CSS/JS。
但是 layui 又并非是 RequireJS 那样的模块加载器,而是一款 UI 解决方案,与 BootStrap 的不同又在于:layui 糅合了自身对经典模块化的理解。这使得你可以在 layui 组织的框架之内,以更具可维护性的代码、去更好的编织丰富的用户界面。
您可以遵循 layui 的模块规范建立一个入口文件,并通过 layui.use() 方式来加载该入口文件,如下所示:
</>code
<!-- 你引入的 layui.js 建议是通过官网首页下载的。当然也可以由 github 或 gitee clone -->
<script src="./layui/layui.js"></script>
<script>
layui.config({
base: '/res/js/modules/' //你存放新模块的目录,注意,不是 layui 的模块目录
}).use('index'); //加载入口
</script>
上述的 index 即为你 /res/js/modules/ 目录下的 index.js,它的内容应该如下:
</>code
/**
index.js 项目 JS 主入口
以依赖 layui 的 layer 和 form 模块为例
**/
layui.define(['layer', 'form'], function(exports){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
exports('index', {}); //注意,这里是模块输出的核心,模块名必须和 use 时的模块名一致
});
从 layui 2.6 开始,如果你引入的是构建后的 layui.js
,里面即包含了 layui 所有的内置模块,无需再指定内置模块。如:
</>code
/**
index.js 项目 JS 主入口
**/
layui.define(function(){ // 需确保您的 layui.js 是引入的构建后的版本(即官网下载或 git 平台的发行版)
//直接可得到各种内置模块
var layer = layui.layer
,form = layui.form
,table = layui.table;
//…
layer.msg('Hello World');
exports('index', {}); //注意,这里是模块输出的核心,模块名必须和 use 时的模块名一致
});
除了使用 layui 的内置模块,必不可少也需要加载扩展模块(可以简单理解为符合 layui 模块规范的 JS 文件)。我们假设你的项目中存放了很多个扩展模块,如下所举:
</>code
//mod1.js
layui.define('layer', function(exports){
//…
exports(mod1, {});
});
//mod2.js,假设依赖 mod1 和 form
layui.define(['mod1', 'form'], function(exports){
//…
exports(mod2, {});
});
//mod3.js
//…
//main.js 主入口模块
layui.define('mod2', function(exports){
//…
exports('main', {});
});
在经过了一定的模块依赖关系后,同样可以合并为一个文件来加载。我们可以借助 Gulp 将上述的 mod1、mod2、mod3、main
等扩展模块构建合并到一个模块文件中:main.js
,此时你只需要加载它即可:
</>code
<script src="./layui/layui.js"></script>
<script>
layui.config({
base: '/res/js/modules/' //你的扩展模块所在目录
}).use('main'); //这里的 main 模块包含了 mod1、mod2、mod3 等等扩展模块
</script>
可以看到,这样我们最多只需要加载两个 JS 文件:layui.js、main.js
。这将大幅度减少静态资源的请求。
二、底层方法
本篇主要介绍基础库所发挥的作用,其中过滤了大部分在外部不常用的方法,侧重罗列了基础框架支撑。
方法:layui.config(options)
你可以在使用模块之前,全局化配置一些参数,尽管大部分时候它不是必须的。所以我们目前提供的全局配置项非常少,这也是为了减少一些不必要的工作,尽可能让使用变得更简单。目前支持的全局配置项如下:
</>code
layui.config({
dir: '/res/layui/' //layui.js 所在目录(如果是 script 单独引入 layui.js,无需设定该参数)一般可无视
,version: false //一般用于更新模块缓存,默认不开启。设为 true 即让浏览器不缓存。也可以设为一个固定的值,如:201610
,debug: false //用于开启调试模式,默认 false,如果设为 true,则JS模块的节点会保留在页面
,base: '' //设定扩展的 layui 模块的所在目录,一般用于外部模块扩展
});
如果你对 layui.js 本身进行了动态加载等其他特殊场景,那么上述layui.config
所设定的dir
参数会因此失效,它会在部分组件的依赖文件(css)加载后才执行,此时你可以在动态加载 layui.js
之前预先定义一个我们约定好的全局对象:
</>code
<script>
var LAYUI_GLOBAL = {
dir: '/res/layui/' //layui.js 所在目录(layui 2.6.6 开始新增)
};
</script>
提示:以上 dir 参数的目录设定仅针对特殊场景,如是采用 script 标签正常引入 layui 的,可以无视该 dir 参数。
方法:layui.define([mods], callback)
通过该方法可在新的 JS 文件中定义一个 layui 模块。参数 mods 是可选的,用于声明该模块所依赖的模块。callback 即为模块加载完毕的回调函数,它返回一个 exports 参数,用于输出该模块的接口。
</>code
/** demo.js **/
layui.define(function(exports){
//do something
exports('demo', {
msg: 'Hello Demo'
});
});
跟 RequireJS 最大不同的地方在于接口输出,exports 是一个函数,它接受两个参数,第1个参数为模块名,第2个参数为模块接口。
当你声明了上述的一个模块后,你就可以在外部使用了,demo 就会注册到 layui 对象下,即可通过 var demo = layui.demo
去得到该模块接口。你也可以在定义一个模块的时候,声明该模块所需的依赖,如:
</>code
/** demo.js **/
layui.define(['layer', 'laypage', 'mod1'], function(exports){ //此处 mod1 为你的任意扩展模块
//do something
exports('demo', {
msg: 'Hello Demo'
});
});
上述的 layer、laypage
都是 layui 的内置模块。
方法:layui.use([mods], callback)
- 参数 mods:如果填写,必须是一个 layui 合法的模块名(不能包含目录)。
从 layui 2.6 开始,若 mods 不填,只传一个 callback 参数,则表示引用所有内置模块。 - 参数 callback:即为模块加载完毕的回调函数。
从 layui 2.6 开始,该回调会在 html 文档加载完毕后再执行,确保你的代码在任何地方都能对元素进行操作。
</>code
//引用指定模块
layui.use(['layer', 'laydate'], function(){
var layer = layui.layer
,laydate = layui.laydate;
//do something
});
//引用所有模块(layui 2.6 开始支持)
layui.use(function(){
var layer = layui.layer
,laydate = layui.laydate
,table = layui.table;
//…
//do something
});
你还可以通过回调函数得到模块对象,如
</>code
- //通过回调的参数得到模块对象
layui.use(['layer', 'laydate', 'table'], function(layer, laydate, table){ //使用 layer layer.msg('test'); //使用 laydate laydate.render({}); //使用 table table.render({}) });
方法:layui.link(href)
href 即为 css 路径。注意:该方法并非是你使用 layui 所必须的,它一般只是用于动态加载你的外部 CSS 文件。
本地存储是对 localStorage 和 sessionStorage 的友好封装,可更方便地管理本地数据。
- localStorage 持久化存储:layui.data(table, settings),数据会永久存在,除非物理删除。
- sessionStorage 会话性存储:layui.sessionData(table, settings),页面关闭后即失效。注:layui 2.2.5 新增
上述两个方法的使用方式是完全一样的。其中参数 table 为表名,settings是一个对象,用于设置 key、value。下面以 layui.data 方法为例:
</>code
//【增】:向 test 表插入一个 nickname 字段,如果该表不存在,则自动建立。
layui.data('test', {
key: 'nickname'
,value: '贤心'
});
//【删】:删除 test 表的 nickname 字段
layui.data('test', {
key: 'nickname'
,remove: true
});
layui.data('test', null); //删除test表
//【改】:同【增】,会覆盖已经存储的数据
//【查】:向 test 表读取全部的数据
var localTest = layui.data('test');
console.log(localTest.nickname); //获得“贤心”
方法:layui.device(key),参数 key 是可选的
由于 layui 的一些功能进行了兼容性处理和响应式支持,因此该方法同样发挥了至关重要的作用。其返回的信息如下:
</>code
var device = layui.device();
//device 即可根据不同的设备返回下述不同的信息
</>code
{
os: "windows" //当前浏览器所在的底层操作系统,如:Windows、Linux、Mac 等
,ie: false //当前浏览器是否为 ie6-11 的版本,如果不是 ie 浏览器,则为 false
,weixin: false //当前浏览器是否为微信 App 环境
,android: false //当前浏览器是否为安卓系统环境
,ios: false //当前浏览器是否为 IOS 系统环境
,mobile: false //当前浏览器是否为移动设备环境(v2.5.7 新增)
}
有时你的 App 可能会对 userAgent 插入一段特定的标识,譬如:
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 myapp/1.8.6 Safari/537.36
你要验证当前的 WebView 是否在你的 App 环境,即可通过上述的myapp(即为 Native 给 Webview 插入的标识,可以随意定义)来判断。
</>code
var device = layui.device('myapp');
if(device.myapp){
alert('在我的App环境');
}
除上述介绍的方法外,layui 内部还提供了许多底层引擎,他们同样是整个 layui 框架的有力支撑,在日常应用中通常也会用到:
方法/属性 | 描述 |
---|---|
layui.cache | 静态属性。获得一些配置及临时的缓存信息 |
layui.extend(options) | 拓展一个模块别名,如:layui.extend({test: '/res/js/test'}) |
layui.each(obj, fn) | 对象(Array、Object、DOM 对象等)遍历,可用于取代 for 语句 |
layui._typeof(operand) | 获取详细数据类型(基本数据类型和各类常见引用类型)如:
|
layui._isArray(obj) | 对象是否为泛数组结构。如 Array、NodeList、jQuery 对象等等。
|
layui.getStyle(node, name) | 获得一个原始 DOM 节点的 style 属性值,如:layui.getStyle(document.body, 'font-size') |
layui.img(url, callback, error) | 图片预加载 |
layui.sort(obj, key, desc) | 将数组中的对象按某个成员重新对该数组排序,如:layui.sort([{a: 3},{a: 1},{a: 5}], 'a') |
layui.router() | 获得 location.hash 路由结构,一般在单页面应用中发挥作用。 |
layui.url(href) | 用于将一段 URL 链接中的 pathname、search、hash 属性值进行对象化处理 参数: href 可选。若不传,则自动读取当前页面的 url(即:location.href) |
layui.hint() | 向控制台打印一些异常信息,目前只返回了 error 方法:layui.hint().error('出错啦'); |
layui.stope(e) | 阻止事件冒泡 |
layui.onevent(modName, events, callback) | 增加自定义模块事件。有兴趣的同学可以阅读 layui.js 源码以及 form 模块 |
layui.event(modName, events, params) | 执行自定义模块事件,搭配 onevent 使用 |
layui.off(events, modName) | 用于移除模块相关事件的监听(v2.5.7 新增) 如: |
layui.factory(modName) | 用于获取模块对应的 define 回调函数 |
layui 部分模块依赖 jQuery(比如 layer),但是你并不用去额外加载 jQuery。layui 已经将 jQuery 最稳定的一个版本改为 layui 的内部模块,当你去使用 layer 之类的模块时,它会首先判断你的页面是否已经引入了 jQuery,如果没有,则加载内部的 jQuery 模块,如果有,则不会加载。
另外,我们的图标取材于阿里巴巴矢量图标库(iconfont),构建工具采用 Gulp 。除此之外,不依赖于任何第三方工具。
三、页面元素规范与说明
layui 提倡返璞归真,遵循于原生态的元素书写规则,所以通常而言,你仍然是在写基本的 HTML 和 CSS 代码,不同的是,在 HTML 结构上及 CSS 定义上需要小小遵循一定的规范。
CSS命名规范
class命名前缀:layui,连接符:-,如:class="layui-form"
命名格式一般分为两种:一:layui-模块名-状态或类型,二:layui-状态或类型。因为有些类并非是某个模块所特有,他们通常会是一些公共类。如:一(定义按钮的原始风格):class="layui-btn layui-btn-primary"、二(定义内联块状元素):class="layui-inline"
大致记住这些简单的规则,会让你在填充HTML的时候显得更加得心应手。另外,如果你是开发Layui拓展(模块),你最好也要遵循于类似的规则,并且请勿占用Layui已经命名好的类,假设你是在帮Layui开发一个markdown编辑器,你的css书写规则应该如下:
CSScode
.layui-markdown{border: 1px solid #e2e2e2;}
.layui-markdown-tools{}
.layui-markdown-text{}
Layui在解析HTML元素时,必须充分确保其结构是被支持的。以Tab选项卡为例:
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">标题一</li>
<li>标题二</li>
<li>标题三</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
</div>
</div>
HTMLcode
你如果改变了结构,极有可能会导致Tab功能失效。所以在嵌套HTML的时候,你应该细读各个元素模块的相关文档(如果你不是拿来主义)
很多时候,元素的基本交互行为,都是由模块自动开启。但不同的区域可能需要触发不同的动作,这就需要你设定我们所支持的自定义属性来作为区分。如下面的 lay-submit、lay-filter即为公共属性(即以 lay- 作为前缀的自定义属性):
</>code
<button class="layui-btn" lay-submit lay-filter="login">登入</button>
目前我们的公共属性如下所示(即普遍运用于所有元素上的属性)
属性 | 描述 |
---|---|
lay-skin=" " | 定义相同元素的不同风格,如checkbox的开关风格 |
lay-filter=" " | 事件过滤器。你可能会在很多地方看到他,他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器 |
lay-submit | 定义一个触发表单提交的button,不用填写值 |
四、模块规范
layui 定义了一套更轻量的模块规范。并且这种方式在经过了大量的实践后,成为 layui 最核心的模块加载引擎。
layui 通过 use 方法加载模块。当你的 JS 需要用到 layui 模块的时候,且避免到处写 layui.use() 的麻烦。你应该在最外层如此定义:
</>code
layui.use(['form', 'upload'], function(){ //如果只加载一个模块,可以不填数组。如:layui.use('form')
var form = layui.form //获取form模块
,upload = layui.upload; //获取upload模块
//监听提交按钮
form.on('submit(test)', function(data){
console.log(data);
});
//实例化一个上传控件
upload({
url: '上传接口url'
,success: function(data){
console.log(data);
}
})
});
layui 的模块对象会绑定在 layui 对象下,内部由 layui.define() 方法来完成。每个模块都有一个特定命名,且无法被占用。所以你无需担心模块的空间被污染,除非你主动 delete layui['模块名']。调用模块可通过 layui.use() 来实现,再通过 layui 对象获得模块对象。如:
</>code
layui.use(['layer', 'laypage', 'laydate'], function(){
var layer = layui.layer //获得 layer 模块
,laypage = layui.laypage //获得 laypage 模块
,laydate = layui.laydate; //获得 laydate 模块
//使用模块
});
我们推荐你将所有的业务代码都写在一个大的 use 回调中,而不是将模块接口暴露给全局,比如下面的方式我们是极不推荐的:
</>code
//强烈不推荐下面的做法
var laypage, laydate;
layui.use(['laypage', 'laydate'], function(){
laypage = layui.laypage;
laydate = layui.laydate;
});
你之所以想使用上面的错误方式,是想其它地方使用不在执行一次 layui.use?但这种理解本身是存在问题的。因为如果一旦你的业务代码是在模块加载完毕之前执行,你的全局对象将获取不到模块接口,因此这样用不仅不符合规范,还存在报错风险。建议在你的 js 文件中,在最外层写一个 layui.use 来加载所依赖的模块,并将业务代码写在回调中,这样还可以确保 html 文档加载完毕再执行回调代码。
layui 官方提供的模块有时可能还无法满足你,或者你试图按照layer的模块规范来扩展一个模块。那么你有必要认识layui.define()方法,相信你在文档左侧的“底层方法”中已有所阅读。下面就让我们一起扩展一个 layui 模块吧:
第一步:确认模块名,假设为:mymod,然后新建一个mymod.js 文件放入项目任意目录下(注意:不用放入layui目录)
第二步:编写 mymod.js 如下:
</>code
/**
扩展一个 mymod 模块
**/
layui.define(function(exports){ //提示:模块也可以依赖其它模块,如:layui.define('mod1', callback);
var obj = {
hello: function(str){
alert('Hello '+ (str||'mymod'));
}
};
//输出 mymod 接口
exports('mymod', obj);
});
第三步:设定扩展模块所在的目录,然后就可以在别的JS文件中使用了
</>code
//config的设置是全局的
layui.config({
base: '/res/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
mymod: 'mymod' //如果 mymod.js 是在根目录,也可以不用设定别名
,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});
//你也可以忽略 base 设定的根目录,直接在 extend 指定路径(主要:该功能为 layui 2.2.0 新增)
layui.extend({
mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径,即不跟随 base 路径
})
//使用拓展模块
layui.use(['mymod', 'mod1'], function(){
var mymod = layui.mymod
,mod1 = layui.mod1
,mod2 = layui.mod2;
mymod.hello('World!'); //弹出 Hello World!
});
五、常见问题
本篇将主要讲解使用过程中普遍遇到的“问题”,并非是 BUG,通常是需要我们自己去注意的一些点。(持续补充)
之所以在下载包里没有提供未压缩的源代码,是为了方便直接用于生产环境。layui 源代码可通过以下平台获取:
应该如何加载模块?
JScode
layui.use(['layer', 'form', 'element'], function(){
var layer = layui.layer
,form = layui.form
,element = layui.element
//……
//你的代码都应该写在这里面
});
当你使用表单时,layui 会对 select、checkbox、radio 等原始元素隐藏,从而进行美化修饰处理。但如果您的表单元素是动态添加的,那么在组件初始加载的时候是无法读取到的,这是你只需执行一个视图渲染的实例即可。#详见说明
JavaScriptcode
layui.use('form', function(){
var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
//……
//如果你的 HTML 是动态生成的,自动渲染就会失效
//因此你需要在相应的地方,执行下述方法来进行渲染
form.render();
});
同理的还有 element 模块
遇到各种问题怎么办?
求助 Gitee 开发者社区: Issues
六、各大版本更新日志
-
2.6.x
-
v2.6.8 2021-05-30
- [重写] sort 方法,以便对数字、非数字及混合类等所有内容的排序进行支持
- [新增] dropdown 组件的 align 参数,用于控制下拉菜单水平对齐方式(支持 left、center、right),默认 left
- [新增] table 组件的 escape 参数,用于是否开启 xss 字符过滤(默认 false)
- [加强] table 组件的自定义模板功能,返回 LAY_COL 字段,可得到当前列的表头配置信息
- [加强] form 组件对验证不通过的表单项自动定位到可视区域,不再是只对输入框自动获焦定位 #I3O5TC
- [加强] form 组件对 url 的验证
- [修复] form 相关 css 的 layui-checkbox-disabled 书写错误(之前为 disbaled) #I1NGDC
- [修复] form 组件的 select option 内容出现换行时的样式异常问题 #I3T5ZC
- [修复] colorpicker 颜色选择组件在 Firefox 下选择颜色时的若干兼容问题 #I3POP2
- [加强] colorpicker 组件的坐标定位计算方式
- [修复] 低版本 ie 若干报错问题
-
v2.6.7 2021-05-18
- [新增] layui._typeof(operand) / layui._isArray(obj) 两个基础方法,分别为"获取详细数据类型"、"对象是否为泛数组"
- [重写] layui.each() 基础方法,以兼容各种对象遍历
- [修复] layui.sort(obj) 基础方法,在比较某些值相等时出现排序异常的问题
- [修复] form 组件当 layui-form 元素出现层级嵌套,其提交的表单未按当前层级的问题
- [修复] layer.photos 层在 iframe 页面中通过 parent 无法弹出的历史弥久问题
- [修复] table 组件当数据存在 length 字段并为 0 时,未被显示的问题
- [修复] laydate 组件范围选择的若干问题
- [优化] upload 组件 before 回调,若 return false,则表明阻止上传 #pull!55
- [优化] element nav 鼠标移至滑动块致其闪动的问题
- [优化] 若干样式细节
-
v2.6.6 2021-05-08
- [优化] layer 组件容器构建的核心代码,以解决自 2.6.0 以来在特殊场景下存在的某些异常问题
- [优化] layer 组件当点击最小化时,让遮罩消失,窗口还原时恢复遮罩
- [新增] layer 组件的 minStack 参数,用于控制最小化后是否默认堆叠在左下角
- [新增] element nav 组件水平导航的子级菜单的两种对齐方式:右对齐,居中对齐 #文档
- [新增] element nav 组件的 lay-bar="disabled" 属性,用于禁用滑块跟随功能
- [优化] element nav 组件各种样式细节,其中包括下拉图标、子菜单等
- [优化] element nav 组件在垂直导航场景时的滑块跟随功能
- [优化] element tab 组件 tabAdd 方法,可将任意额外参数 {key} 组成 lay-{key}="{value}" 属性
- [优化] element tab 组件当标题栏包含 a 标签时,点击 tab 切换,但未触发 a 标签跳转的问题
- [新增] laydate 组件的 isPreview 参数,用于控制是否显示当前选择值的预览(默认 true) #文档
- [优化] laydate 组件的日期范围选择,因左右日期面板独立,固取消范围区间标注,增加开始-结束文本预览
- [优化] laydate 组件的 range 参数,可支持传入数组,用于分别指定开始日期和结束日期的选择器 #文档 #示例
- [优化] laydate 组件的时间范围选择,初始结束时间为 23:59:59
- [优化] laydate 组件的当前日期不在设定的最小(min)和最大(max)日期内,则自动校正面板可选的初始日期
- [优化] laydate 组件的选中完毕的赋值逻辑,对非 input 元素,如果存在子元素,则不进行默认赋值操作,由回调去处理
- [优化] laydate 组件之前版本一直存在的初始处全局事件重复绑定的问题
- [修复] laydate 组件当开启范围选择,未触发 change 回调的问题
- [修复] laydate 组件在 ie11 因 laydate-day-mark 的 height:100% 导致的异常
- [优化] upload 组件的多文件上传,可更好的对每个文件显示上传进度 #文档 #示例
- [优化] flow 组件的 flow.lazyimg() 方法,对图片懒加载支持占位图显示(占位图 src,预加载图 lay-src) #文档
- [优化] util 组件的 util.toDateString((msec, format) 方法,可对第一个参数进行自动纠正和毫秒数无效的提示
- [新增] 对名为 LAYUI_GLOBAL 的全局对象的识别,当对 layui.js 本身进行动态加载等特殊场景下,可通过该对象更好地解决部分组件依赖文件(css)的路径问题 #文档
- [优化] 底层 layui.each() 核心代码
- [优化] layout admin 大框架布局,可适配各个终端 #演示
- [提示] Google 在近期发布的 Chrome v90 第三个维护版本 Chrome 90.0.4430.93,修复了上两个版本因关闭打印窗口导致的浏览器卡顿问题(之前 layui table 的打印亦受此影响)
-
v2.6.5 2021-04-22
- [修复] layer 组件在 Ajax 等场景下,存在概率性无法关闭层的问题
- [优化] layer 组件的 close 和 closeAll 方法,第二个参数可传入回调,用于层被关闭后的操作
- [修复] layer 组件的 photos 层对动态生成的图片无法识别的问题
- [优化] layer 组件的 photos 相关样式,上下切换图标调整到页面左右边缘,图片描述和序号调整到页面底部
- [修复] form 组件的 name="arr[]" 在元素动态插入后出现序号异常的问题 #I3HY4U -Gitee
- [优化] laytpl 组件,支持解析复杂反斜杠 #780 -Github
- [修复] upload 组件当开启进度条且拖拽文件上传时出现报错问题
- [修复] table 组件当 cols 表头设置了 templet 为函数时,存在返回 {多余字段: "NaN"} 的问题
- [优化] table 组件的自动渲染
- [优化] 底层 layui.link() 方法
-
v2.6.3/4 2021-04-05 / 2021-04-06
- [优化] layui.use() 核心机制:1) 确保 html 文档被完全加载就绪再执行回调;2) 当第一个参数为 function 时,则表示加载所有内置模块,且执行的回调即为该 function 参数;(该优化是对 2.6 版本的一次真正巩固,确保了 2.6.0 推荐的「所有内置模块一次性加载」的可行性,可以说是里程碑式的改进,极大地纠正了开发者因不规范代码而造成的各种异常,且对之前版本采用的异步按需加载模块的代码,实现了无缝兼容) #文档
- [新增] all 内置模块,用于在开发模式(即引入源码的 src 目录)时加载所有内置模块
- [新增] table 组件对合计行自定义模板的支持,即当 totalRow 参数为 string 类型时可解析为动态模板。#文档
- [优化] layer 组件的 close 方法在对初始打开的弹层执行关闭时,可能存在的极少概率无法关闭的问题
- [优化] layDate 组件日期范围内的样式
-
v2.6.2 2021-04-02
v2.6.1 2021-03-31
- [新增] table 组件加载失败时的 error 回调
- [优化] 按钮的尺寸,纯背景色按钮与带边框的按钮,在同等字符长度下尺寸相同
- [优化] 时间线只有一条数据时仍然显示线的问题,并优化其他细节
- [优化] 管理系统大布局样式,滚动条采用 body 默认,而非之前的 layui-body 所在的元素
-
v2.6.0 2021-03-31
该版本重要提示:
- [调整] 将所有内置模块构建为一个文件,这意味着 当你引入的是从官网下载(或者开源平台下载的 dist 目录)的 layui.js,则不必再按需异步加载内置模块,直接即可使用 layui 所有组件库。该调整对模块化的写法不受影响。
但需注意以下几点:- 1) 如果之前引入了 layui.all.js 的,现在必须改成 layui.js
- 2) 如果元素存在动态插入,那么您需要执行元素所对应组件的 render() 方法,如 form.render()
- 3) 引入 layui.js 的 <script> 标签最好放置在 body 末尾。这是为了能对一些元素进行自动渲染。
-
[调整] table 组件的 table.reload(id, options, deep) 方法,可通过 deep 参数控制是否采用深度重载(即参数深度克隆,也就是重载时始终携带初始时及上一次重载时的参数),默认为浅重载。#说明
请注意:如果你之前已经习惯深度重载模式的,现在请在第三个参数中,加上 true,如:
table.reload(ID, options, true); //这样就跟 v2.5.7 及之前版本处理机制完全一样。
-
[新增] dropdown 通用下拉菜单组件 #文档 #示例
- 亦可作为「右键菜单组件」使用
- [支持] 无限层级嵌套
- [支持] 子级菜单的横和竖两种展示方式
- [支持] 局部或全局的自定义菜单列表模板,可给菜单列表添加任意元素(图片、图标等)
- [支持] 自定义事件,可通过 click、hover、contextmenu(鼠标右键)等等方式调出组件面板
- [支持] className、style 属性,用于对组件的样式重置
- [新增] 基础菜单(layui-menu)样式结构,可无限层级嵌套 #文档 #示例
- [新增] 常规面板(layui-panel)样式结构
- [优化] layer 组件的核心代码,当初始执行弹窗时,不必再套一层 layer.ready() 了
- [优化] layer 组件局部样式,以更贴近简约和百搭
- [优化] layDate 组件的日期范围选择,不再是之前一样左右联动的操作方式,而是左右保持完全独立的选择
- [优化] layDate 组件局部样式,及剔除多余 js 代码
- [修复] layDate 组件中当设为年/月选择器时,点击选择年/月数值时,面板未自动关闭的问题
- [修复] layDate 组件当 lang 设置为 'en' 时,部分提示内容未显示英文的问题
- [新增] table 组件的 table.getData(id) 方法,用于获取表格当前页的所有行数据(现在不必再通过 table.cache 获取)
- [修复] table 组件的 table.reload() 重载方法在多次执行时,会携带上一次执行时的参数的重大 BUG
- [新增] util 组件的 unescape(str) 方法,用于将转义后的 HTML 还原
- [优化] code 组件整体样式
- [优化] 整体边框/背景等色调,以及边距尺寸,以使得视觉搭配更加和谐自然
- [优化] 按钮部分样式细节,以及新增对边框按钮各种色系的更好支持 #示例
- [优化] hr 横线样式,以防止某些情况出现边框模糊的问题
- [新增] 新增 CSS3 从顶部往下滑入、微微往下滑入、平滑放小、弹簧式放小四种动画,并优化部分过度动画 #文档
- [新增] layui-font-* 样式,可定义常见字体大小和颜色 #文档
- [调整] 将所有内置模块构建为一个文件,这意味着 当你引入的是从官网下载(或者开源平台下载的 dist 目录)的 layui.js,则不必再按需异步加载内置模块,直接即可使用 layui 所有组件库。该调整对模块化的写法不受影响。
-
-
2.5.x
-
v2.5.7 2020-11-27
- [新增] layui.off(events, modName) 方法,用于移除模块相关事件的监听 #详见文档
- [优化] layui.device() 方法,加入 mobile 属性,用于识别是否是在移动设备中
- [优化] form 组件的 verify 方法,如果返回 true,则不自动弹出提示框
- [修复] table 组件无数据时且开启初始排序功能,未显示「无数据」提示文案的问题
- [优化] slider 组件多处细节样式以及数字输入框始终保持显示
- [修复] slider 组件在设置 setTips 自定义提示文本时,change 回调返回的 value 也随之改变问题
- [修复] slider 组件在点击数字输入框加减按钮时,起始值未按初始值进行计算的问题
- [修复] rate 组件的 value 大于 length 时的文本显示异常问题
- [修复] tree 等部分组件在低版本浏览器下的若干问题
-
v2.5.6 2020-01-15
- [优化] layui.use() 方法,以支持加载非内置模块的合并请求(如您在线上环境采用「非模块化加载」的方式,那么最多可以只加载两个文件,即:layui.all.js、main.js(你的扩展模块的合并文件)。这将大幅度减少文件请求) #详见文档
- [新增] layui.url() 底层方法,用于将 url 中的 pathname、search、hash 属性进行对象化获取 #详见文档
- [优化] 栅格的列间隔类 .layui-col-space,支持 1-30 区间所有双数间隔,并支持 1、5、15、25 单数间隔
- [优化] table 组件的合计行,若接口直接返回了合计行数据,则优先读取,否则由前端自动合计当前行数据 #详见文档
- [修复] upload 组件因上个版本的 progress(进度条) 功能导致的部分情况无法跨域上传的问题
- [优化] upload 组件 progress 回调,在第二个参数中返回了当前触发的元素对象
- [修复] form 模块的 select 组件在 lay-disabled 和 lay-search 共用时出现可编辑问题
- [修复] flow.load() 多次执行时的重复加载的问题
- [修复] util 组件的 event 方法重复绑定事件的问题
- [新增] 28 个字体图标 #详见文档
-
v2.5.5 2019-09-10
之前大家在《 2.5.x 问题集中收集》中反馈的内容,我已如数看到。其中有些被采纳在本次版本中,有些被规划到了 v2.6、v3.0 中。我深知之前反复的断更对 layui 带来的是怎样无可挽回的损失,然而 layui 终于还是不得不重新审视它所处的位置,行进的「前端河」分出了两条支流:一条是滚滚洪流,没有人能够逃脱它的流速,我们必须要在拥抱中重生;一条是波澜不惊,那是我们最初的方向,返璞归真、自诩的「经典」和不灭的执念。顺应潮流而不背离初心,layui 注定要同时流向这两条支流,虽千万里之行,亦愿独闯。
- [优化] form 组件的 val() 方法,除了之前版本的赋值,目前还可支持取值 #详见文档
- [新增] tree 组件的数据源参数 field,用于定义数据字段名
- [优化] tree 组件的节点删除前的提示功能
- [修复] tree 组件的数据源参数 checked 在父子节点同时设定时的异常问题
- [优化] table 组件的 defaultToolbar 参数,可以扩展头部工具栏右侧图标按钮 #详见文档
- [优化] table 组件的局部代码,减少重复的全局事件引发的卡顿问题
- [修复] table 组件的合计行未按照对应列显示自定义模板的问题
- [修复] table 组件导出数据时未包含合计行的问题
- [修复] transfer 组件的右侧面板在使用搜索转移数据后,无法再获取右侧数据的问题
- [新增] upload 组件的 progress 回调,用于监听文件的上传进度 #详见文档
-
v2.5.4 2019-06-06
- [修复] table 组件 reload 后的各种可能发生的异常问题
- [新增] tree 组件的 id 参数,用于定义实例的唯一索引
- [新增] tree 组件的 text 参数,用于定义一些默认文本
- [新增] tree 组件的数据源参数:spread、checked,以定义节点初始的:选中状态、展开状态
- [剔除] tree 组件的 spread、checked 参数,采用数据源中的 spread、checked 属性替代
- [剔除] tree 组件的 key 参数,因为多此一举
- [优化] tree 组件的 getChecked 方法,让其返回选中的数据,而非节点 DOM
- [优化] tree 组件中数据源 label 参数,改名为 title
- [优化] tree 组件的 defaultNodeName、emptyText 参数,将其移至到新增的 text 参数中
- [修复] transfer、tree 组件在 layui-form 中的样式异常问题
-
v2.5.2 / v2.5.3 2019-06-04
- [全面重写] transfer 组件,加强功能,并修复了已知的所有问题 #详见文档
- [回滚] table 组件 的 reload 方法在 2.5.0 的机制,因大量场景测试存在不可控异常,基于稳定考虑,特此恢复 2.5.0 之前机制
- [修复] table 组件已知的若干紧急小问题
- [修复] upload 组件 reload 重载时,如果传入 elem 出现报错的问题
-
v2.5.1 2019-06-03
- [修复] table 组件,当不开启分页且出现滚动条,底部出现无边框的问题
- [修复] table 组件,当 reload 仅重载 data 时的若干小问题
- [调整] tree 组件,如果子节点有任意一条选中,则父节点为选中状态
- [新增] tree 组件的 defaultNodeName 属性,用于定义节点的默认名称
- [优化] tree 组件的 renderContent 属性,改名为 edit,可自由配置“增改删”按钮的显示状态
- [优化] tree 组件的 expandClick 属性,改名为 onlyIconControl,用于表示“是否仅允许节点左侧图标控制展开收缩”,默认 false
- [优化] tree 组件方法命名:getCheck 改名为 getChecked、setCheck 改名为 setChecked
- [优化] tree 组件多处异常样式
- [修复] tree 组件的 click 回调的若干问题
- [新增] transfer 组件的 width、height 参数,用于设定左右穿梭框的宽高
- [修复] transfer 组件在 form 元素下,穿梭框中的按钮触发了提交的 bug
- [优化] transfer 组件方法命名:getValue 改名为 getData
-
v2.5.0 2019-05-31
此“更”时隔半载,其间个中缘由,尽在不言…
[新增] tree 组件
- [支持] 无限层级
- [支持] 自定义节点数据源:节点名称、勾选状态、禁用状态、拖拽禁止状态、新窗口跳转链接等
- [支持] 复选框勾选功能
- [支持] 层级连接线功能
- [支持] 节点的“增删改”内置操作
- [支持] 手风琴展开模式
- [支持] 设定默认展开的节点
- [提供] 节点被点击、复选框勾选、节点过滤、“增删改”等多种操作场景下的回调
- [提供] 设置指定的节点为勾选状态的方法
- [提供] 获取当前勾选的全部节点的方法
- [提供] 数据为空的自定义文本提示功能
-
[新增] transfer 穿梭组件
- [支持] 设定左右栏初始化数据
- [支持] 列表搜索功能
- [支持] 自定义左右栏标题
- [提供] 左右穿梭交互时的回调
- [提供] 获取选中数据(右侧列表)的方法
-
[加强] table 组件
- [优化] table.reload(id, options, type) 方法, 可通过设置 type 为 "data",只刷新数据部分(无抖动)(注:2.5.2 已取消)
- [优化] 打印功能,可包含“合计行”打印
- [修复] 导出表格时,如果内容出现逗号出现数据错位的问题
- [修复] 无法导出自定义模版(templet)中的数据,而是导出了原始数据的问题
- [优化] 多处核心代码
-
[加强] form 组件
- [新增] 元素属性 lay-reqText="",可用于自定义必填项(即设定了 lay-verify="required" 的表单)的提示文本
- [优化] form 组件的 val() 方法,以避免 radio 元素无法赋值数值型数字的问题
- [修复] form 中绑定了 layDate 组件的元素在验证 date 失败时,点击不弹出 layDate 组件的问题
-
[完善] upload 组件
- [增加] inst.reload(options) 方法,用于重置实例的属性值(比如动态改变 acceptMime 等)。inst 是 upload.render() 返回的实例
- [修复] 在回调中无法获取到 this.item 的问题
-
[完善] 其他
- [新增] util 模块的 util.event(attr, obj, eventType) 方法,用于更好地处理事件动作
- [修复] 在使用 layui.all.js 的情况下,use 一个依赖了非内置模块的自定义模块出现的回调异常问题
- [修复] carousel 轮播组件 interval 属性可能存在的异常问题
-
-
2.4.x
欢迎来到 layui 2.4。本次除了 table 组件较大幅度的加强,还特别添加了业界比较常见的两款新组件:colorpicker(颜色选择器) 和 slider(滑块)。依然没有看到 tree?多选框等等你想要的功能性组件?不必着急,我们推出了 layui 第三方扩展组件平台,它用于收集来自 layui 官方以外的组件,由贡献者自己维护,以群众之力共同完善 layui!
-
v2.4.5 2018-11-01
- [修复] table 组件中勾选全选后,再点击任意行复选框无法获取到值的问题
- [修复] table 组件的 toolbar: true 时,在高版本 jQuery 下出现的报错问题
- [修复] table 组件的固定列高在某些情况未能铺满的问题
- [优化] table 组件的单元格溢出下拉框,让其不触发行点击事件
- [修复] slider 组件在 max 参数设为某些数字(如 20)时,点击 input 增减按钮出现的异常问题
- [优化] slider 组件局部代码,以自动纠正某些异常参数值
- [修复] form 组件的 select 在空值状态下双击,导致赋值了空值提示文本的问题
-
v2.4.4 2018-10-29
-
v2.4.3 2018-09-03
- [修复] table 组件在设列有 hide: true 情况下的宽度自适应问题
- [修复] table 组件的多级表头,设置了 hide 的各种问题
- [修复] table 组件的合计行有值为 null、空字符、小数点等情况时未正确统计的问题
- [修复] table 组件设置为 size: 'sm' 时,行中 radio 单选框样式的不雅问题
- [优化] colorpicker 颜色面板拖动体验
-
v2.4.2 2018-08-30
- [修复] table 组件初始设定 hide 属性,表格未能正常显示的问题
- [修复] table 组件的多级表头下,点击筛选列出现的异常问题
- [修复] table 组件在隐藏列后,执行 table.reload() 方法重载后表头后的异常问题
- [修复] table 组件的 loading 参数设为 false 的异常问题
- [剔除] table 组件的 height 参数最小高度的判断,改回之前的自由设定
- [优化] table 组件局部代码,以适应复杂表头下的各种功能
- [优化] table 组件的打印,不包含非数据列
- [优化] slider 组件局部代码
- [修复] 2.4.1 改动的层级优先级导致的各种堆叠异常问题(尤其是对 layuiAdmin 的影响)
-
v2.4.1 2018-08-29
- [新增] table 组件的 defaultToolbar 参数,可自由配置头部工具栏右侧的图标 #详见文档
- [优化] table 组件的筛选下拉框在表格高度较短时被遮挡的问题
- [优化] table 组件的 toolbar 参数,可通过设置 "default" 值来显示内置图标
- [优化] table 组件的 height 参数,加入最小高度的判断,以保证任何情况都能良好展示
- [优化] 各组件、元素之间的 z-index 层级优先级
- [优化] 颜色选择器的状态可即时跟随面板中的输入框值改变而改变
- [优化] 颜色选择器的局部代码和外观
- [修复] 颜色选择器的 value 参数设置 hex 部分初始值时的报错问题
-
v2.4.0 2018-08-28
[加强] table 组件
- [新增] 工具栏区域,通过 toolbar 参数开启,可自定义工具按钮 #详见文档
- [新增] 列显示隐藏功能,位于工具栏右侧
- [新增] 表格导出功能,位于工具栏右侧。也可通过 table.exportFile() 方法导出
- [新增] 表格打印功能,位于工具栏右侧
- [新增] 合计行功能,通过 totalRow 参数开启
- [新增] 单选框列,通过 type:'radio' 开启
- [新增] 工具栏事件(toolbar)、行单击事件(row)、行双击事件(rowDouble)
- [新增] 数据预解析回调函数:parseData,用于将返回的任意数据格式解析成 table 组件规定的数据格式 #详见文档
- [新增] 数据初始时的 loading,并更换了风格
- [新增] title 参数,用于定义 table 的大标题(在文件导出等地方会用到)
- [新增] 表头参数 cols 的 hide 子参数,用于控制隐藏列
- [新增] 表头参数 cols 的 totalRow 子参数,用于开启该列的合计功能
- [新增] 表头参数 cols 的 totalRowText 子参数,用于显示自定义的合计文本
- [优化] 自动分配列宽导致无故出现横向滚动条的问题
- [优化] 自动分配的列宽可跟随浏览器窗体尺寸改变而重新适配
- [优化] 单元格溢出状态的展开体验
- [优化] 多处细节问题
- [修复] templet 为函数时,单元格编辑和 tool 事件的 update 均未执行模板解析的问题
- [修复] form 组件中的元素在 table 中一些不友好的显示问题
- [修复] 表格容器在隐藏区域时(如 Tabs 中),未能显示分页栏的问题
-
[新增] colorpicker 颜色选择器组件
- [支持] hex、rgb、rgba 三类色彩模式
- [支持] 自由拖拽设置
- [支持] 透明度拖拽设置,需配合 rgba 色值
- [支持] 预定义颜色列表,可自由配置
- [支持] 三种颜色框风格,可用于和不同尺寸的表单和按钮搭配
- [支持] 颜色被改变和选择完毕的回调
- [注意] colorpicker 组件不支持ie10以下版本,其它高级浏览器均支持
- #详见文档
-
[新增] slider 滑块组件
- [支持] 水平和垂直两种滑块类型
- [支持] 支持自定义滑块数值区间
- [支持] 开启滑块范围模式拖拽
- [支持] 开启输入框动态改变滑块数值
- [支持] 自定义滑块间隔长度
- [支持] 自定义数值提示文本
- [支持] 自定义主题色
- [支持] 滑块数值被改变的回调,以及动态改变滑块的外部方法
- #详见文档
-
[完善] form 组件
- [修复] checkox 组件的 primary 风格在文字很长的情况下出现的显示异常问题
- [修复] select 组件搜索后,上下快捷键选择失效的问题
-
其它
- [修复] layDate 组件在设置了非法 初始 value 时,点击空白处报错的问题
- [剔除] css 中备选字体 \5FAE\8F6F\96C5\9ED1(微软雅黑),以免版权问题。尽管它并不会优先使用
-
-
2.3.0
2018-05-25你好,layui 2.3。它除了包含许多久违的细节之更,更是新增了 rate 评分组件,
-
rate 评分
- 新增的全新组件,用于进行评分/星操作
- 支持是否开启半星
- 支持自定义星星个数
- 支持自定义星星主题色
- 支持自定义评级对应的说明,如:文本/图标等
- 支持初始值的设定
- 支持是否只读,即:只展示、不可点
- #详见文档
-
laypage 通用分页
- 对 layout 参数新增 refresh 支持,用于显示刷新当前页图标
-
laydate 日期与时间
- 新增 isInitValue 参数,用于控制是否自动向元素填充初始值(需配合 value 参数使用)(2.3.0 正式版改为默认 true)
-
form 表单
- 增加 form.val(filter, fields) 方法,用于给指定表单集合的元素初始赋值。#详见文档
- 对 select 组件新增上下键(↑ ↓)回车键(Enter)选择功能(2.3.0 正式版修复了滚动条不跟随的问题)。
- 优化 switch 开关组件,让其能根据文本自由伸缩宽
- 修复 checkbox 复选框组件在高分辨屏下出现的样式不雅问题
-
upload 文件上传
- 对 choose、before 回调返回的参数 obj 增加 resetFile 方法,可用于重命名文件名
- 修复开启 size 参数后,文件超出规定大小时,提示信息有误的问题
-
flow 流加载
- 修复开启 isLazyimg:true 后, 图片懒加载但是图片不存在的报错问题
-
其它改动
-
-
2.2.6
2018-04-03- 新增 table 的数据请求时的 headers 参数支持,用于添加请求头
- 新增 nav 垂直导航菜单的无限级子菜单功能(注意:水平导航菜单暂不支持无限极)
- 新增 nav 导航菜单基础属性 lay-shrink="all",用于开启:展开子菜单时,收缩兄弟节点已展开的子菜单
- 新增 upload 的数据请求时的 headers 参数支持,用于添加请求头
- 优化 upload 组件的 data 参数,支持方法写法,用于传递动态值。#详见文档
- 优化 element 的 nav 事件,并解决了之前存在的父菜单无法触发事件的问题
- 新增 upload 组件的 acceptMime 参数,规定打开文件选择框时,筛选显示的文件类型 #91
- layedit.build() 第一个参数支持 html 原始对象 #146
- Support post+json for table module #194
-
2.2.5
2018-01-032018年的第一个新版本
- 新增 table 的 templet 方法支持,即现在自定义模板可以采用方法的形式替代内容 #详见文档
- 新增 table 的 text 参数,用于自定义各种默认提示文本
- 新增 layui.factory(modName) 方法,用于获取模块对应的工厂,以便回收利用
- 新增 layui.sessionData(table, settings) 方法,用于存储本地会话性数据
- 新增用于定义按钮容器的 class 选择器:layui-btn-container
- 新增用于定义流体按钮的 class 选择器:layui-btn-fluid
- 优化 table 的分页栏,如果无数据则不显示
- 优化 layer 的 prompt 层,初始赋值 value 时的光标会出现在最后(之前版本会在最前)
- 优化 layui.event() 和 layui.onevent() 方法,处理自定义事件更加灵活
- 优化 layui.router() 方法,新增返回拼接后的 href
- 修复 table 的异步数据在 code 为非0时,未执行 done 回调的问题
- 修复 element.tabChange() 方法的 this 指向问题
-
2.2.4
2017-12-07该版本对之前存在的较多问题进行了一次清理,推荐升级。
- 新增 form 的 name 为数组格式( 如:name="arr[]" )的支持
- 修复 form 的 select/checkbox/radio 等元素设定 lay-verType="tips" 时的提示层定位问题
- 修复 table 的自适配列宽可能引发的报错:Cannot read property 'defaultView' of null
- 修复 table 中渲染已知数据时执行 reload 不会清除之前数据的问题
- 修复 upload 的 number 在 size 未设定时无效的问题
- 修复 upload 的 allDone 回调在 auto: false 时的异常问题
- 修复 upload 在 IE11 下设定 exts 的某些异常提示问题
- 鉴于大家对 table 在 2.2.0 中的边框线普遍反映太浅,特此加深,回归统一边框
- 2.2.45 (2017-12-08 补充):
- 进一步优化 form 的 name 数组支持
- 修复 2.2.4 对 table reload 造成错误影响的问题
-
2.2.3
2017-11-27- 新增 upload 模块的 number 参数,用于设定同时允许上传的文件数量(默认不限制) #详见文档
- 新增 util 模块的 util.toDateString(time, format) 方法,用于转化时间戳或日期对象为日期格式字符 #详见文档
- 新增 util 模块的 util.digit(num, length) 方法,用于对数字前置补零,如:6 ==> 06 #详见文档
- 修复 table 特殊情况出现的:'cssRules' of undefined 报错问题
- 修复 table 无数据时,点击列头的 checkbox 和排序出现的报错问题
- 修复 laydate 的 set 方法报错问题
- 恢复 form 的 lay-filter 在 layui 2.2.0 之前的验证规则,即:值为空也会触发内置的验证规则。选填项由开发者通过自定义验证来把控。
-
2.2.2
2017-11-17
- 优化 table 的列宽自动适配算法
- 修复 table 的重载后,分页总条数未更新的问题
- 修复 table 的删除行后,再点击全选,导致 table.checkStatus() 返回的数据异常问题
- 修复 table 的选择条数在 Firefox 浏览器下失效的问题
- 修复 table 的表头在同样的列宽下,Chrome 下正常,Firefox 和 ie 低版本下却出现省略号的差异性问题
- 修复 layDate 中选择 datetime 选择器的月份列表报错的问题(尽管之前的报错不影响正常使用)
- 去除 h1/h2/h3 的 14px 的重置样式
- 注意事项:
- 转换静态表格,请务必确保 table.init() 方法的 limit 参数(默认:10)是与你服务端限定的数据条数一致
- 覆盖升级后注意清除浏览器缓存
-
2.2.1
2017-11-16- 新增 table 的基础参数:cellMinWidth,用于全局定义所有常规单元格的最小宽度(默认 60) #详见文档
- 新增 table 的表头参数:minWidth,用于局部定义常规单元格的最小宽度(默认 60),优先级大于 cellMinWidth #详见文档
- 优化 table 内容超出单元格宽度时的一些小细节
- 优化 table 选中行样式
- 修复 table 的 page 参数传入 laypage 对象时的各种问题。这次可以真正做到分页的各种自定义,官网示例 页面中也有相关演示
- 修复 table 的表单元素模板在 lg 尺寸单元格中未垂直居中的问题(注意,sm 尺寸的表格不做相关兼容)
- 修复 table 的查看更多的单元格弹层在自定义模板的情况下,无效的问题
- 修复在 ie8 下路径计算异常导致的所有 layui 内置模块失效的严重 bug
- 覆盖升级后注意清除浏览器缓存
-
2.2.0
2017-11-15本次升级幅度较大,主要核心还是在 table 模块。无论是从代码,还是文档和示例的撰写上,都进行了大量调整。除此之外,form 以及其它的几项改进,也堪称良心之举,这应该是一次令人愉悦的更新吧。特别说明的是:原计划与 layuiAdmin 同时发布,由于用户群对 layui 2.2 的呼声太高,经投票最终还是决定先发布 layui 2.2。而 layuiAdmin 则顺延,请耐心等待!
-
table 改进
- 新增列宽自动适应功能,允许列宽设置百分比甚至不填写,内部自动分配
- 新增序号列支持(type:'numbers') #详见文档
- 新增表头的基础参数:type,用于定义列类型(normal/checkbox/space/numbers等)
- 优化 page 参数,支持传入一个对象,里面可包含 laypage 组件所有支持的参数(jump、elem除外)
- limit 改为默认 10
- 自定义模板中,可通过 undefined 获得序号
- 优化主题样式,风格更加清爽,进一步接近 layui 极简理念
- 优化单元格编辑样式(之前编辑时的样式不大明显)
- 修复单元格弹出的更多内容浮层的若干问题
- 修复 表单元素(如:复选框/开关/单选框) 在数据表格单元格中的样式异常问题
- 修复表格重载时的左右抖动问题
-
form 改进
- 设定 lay-verify 时,不再强制必填,除非同时设定了 required,如:lay-verify="phone|required" (注:2.2.3 已取消)
- 对表单元素新增 lay-verType="" 属性,用于定义异常提示层模式,可选值有:tips(吸附)、alert(对话框),msg(默认)#详见文档
- 搜索选择框匹配到相应选项时,如果未选择相应项,则失去焦点时清空内容(这样做的目的,是为了确保 select 是 option元素中定义的 value,而不是 text)
- 复选框禁用状态样式优化
-
其它改进
- carousel 轮播当只有一个条目时,不会再显示指示器
- 导航条允许设置 lay-unselect 属性,点击指定导航菜单标题时,将不会出现选中效果
- layui.extend() 方法支持拓展一个自定义路径的 js 模块(可加载远程文件)
- 优化 layDate 组件范围选择样式
- 修复 layui.data() 方法无法存储空字符的值的问题
-
注意事项
- 为了统一规范,定义按钮尺寸的 CSS 类:layui-btn-mini 改为 layui-btn-xs、layui-btn-small 改为 layui-btn-sm、layui-btn-big 改为 layui-btn-lg,升级版本时务必注意
- 覆盖升级后,注意清理浏览器缓存
-
-
2.1.7
2017-11-02- 新增 upload 组件的 allDone 回调,用于监听多文件上传完毕后的状态(如:总文件数、成功数、失败数)
- 新增 progress 进度条的分数设定(如:1/3)
- 修复 layDate 组件当前面板为 1 月时,上个月(12月)的最后一天显示为 30 的 bug
- 修复 layDate 组件输入一个非法值再点击其它同类控件,未校验上一个控件日期是否非法的问题
- 修复 progress 进度条的 lay-percent 设定百分比在某些情况下存在的 bug
- 优化 badge 徽章默认样式
-
2.1.6
2017-10-30- 新增 element.tab(options) 方法,用于绑定自定义 Tab 元素(即非 layui 自带的 tab 结构,#详见文档)
- 新增 tab 选项卡删除的事件监听 (tabDelete)
- 新增 laytpl 的忽略分隔符 {{! template !}},用于忽略指定区域的模板解析
- 新增用于替代 element.init 的 element.render() 方法,并增加了两个参数:type、filter,以便对元素进行局部初始化。#详见文档
- 为了编码统一,element.init() 方法可用 element.render() 方法替代。但 init 方法仍会兼容。
- 优化 util 模块的 util.timeAgo() 方法的返回字符
- 优化二级导航的箭头高度在移动设备偏下的问题
- 修复垂直导航的一级导航行高没居中的问题
- 修复 table 在列宽足够的情况下点击列可能会弹出 tips 的问题 #68
-
2.1.5
2017-09-20本次更新内容较少,主要对一些细节进行优化。
- 优化按钮样式,默认不再有 0.9 的透明度,因为这样看上去会更鲜艳些
- 优化 carousel 轮播逻辑,以使条目切换的衔接动画更加自然些
- 修复 carousel 模块的轮播在切换浏览器窗口后,出现空白 loading 的问题
- 修复 input/textarea 等表单元素在搜狗浏览器下的 placeholder 行高问题
- 修复 select 搜索框在 ios 设备和 safari 下无法输入的问题
- 解决 后台布局 中滑动顶部最右导航,引发水平滚动条的不良体验问题(需向 body 加入一段样式,#详见文档 )
-
2.1.4
2017-09-15- 优化原始按钮行高偏下问题
- 优化 table 多级表头并加强,使其真正做到无限级,且功能稳定。#见示例
- 修复 table 如果有一页空数据,导致所有分页都显示为空数据的问题
- 修复 table 的多级表头设定 checkbox 列后的异常问题
- 修复 table 的多级表头如果组合列后面还有列,表格主体与表头未对应上的问题
- 修复 table 中设置了 response 的 dataName,点击排序执行 table.reload() 方法后,无数据的问题
- 修复 layDate 在 requirejs 下使用的报错问题
- 如果 layDate 在 requirejs 下使用,需要通过 laydate.path = "" 来设定 laydate.js 所在目录 #见文档
-
2.1.3
2017-09-132.0 发布已经过去三周了,相比功能的继续丰富,也许更重要的是稳定,我们深知这一点。所以请尝试从“layui新版本存在许多问题”的错觉中清醒,事实上,当你真正适应了这一切,你会对 layui 有一个全新的认知。而今天更新的 2.1.3 主要还是力求稳定,但在下一个较大版本(2.2.0),你将会看到如你所愿的改进,也是社区呼声最高的存在,想象一下吧!
- 优化 内置动画,以避免在 Chrome 最新版(61.0.3163.79) 中出现的各种奇异现象
- 优化 layDate 的时间选择器(time)的范围选择体验,不再校验“结束时间超出开始时间”,以支持跨越凌晨的情况
- 优化 layDate 的控件关闭,以避免focus事件下出现的未关闭上一个控件的问题
- 优化 table 在行数据未填充满表格高度时,固定列仍然100%高度所形成的不雅感
- 修复 layDate 中自定义无符号分割的日期格式(如yyyyMM、yyyyMMdd),二次选择后控件存在的异常问题
- 修复 layDate 中的日期时间选择器(datetime)开启范围选择时,选择当天未校验“结束时间超出开始时间”的问题
- 修复 table 中开启单元格编辑,在执行 update 方法后,值未同步编辑框的问题
- 修复 table 中转换多级表头的静态表格有数据未展示的问题
- 修复 layer 在最新版 Chrome(61.0.3163.79)下的遮罩层出现的奇异花屏现象
- 修复 form 中设定 lay-verify="number" 不能验证负数和小数的问题
-
2.1.2
2017-09-03感谢来自百度MIP团队的 前端小武 提供自动化测试,目前已正式邀请其成为 layui collaborator
- 【layDate】修复 value 传入日期对象时,初始的input值异常问题
- 【layDate】修复设置了min/max,年月列表的确定不可点击问题
- 【table】优化 loading,改为显示在表格容器的正中位置
- 【table】修复右侧固定列在部分设备(如手机/Mac)无效的问题
- 【table】修复切换分页,未关闭上一个“查看全部”的提示层的问题
- 【form】修复 input 输入框的 placeholder 在部分浏览器(如:Safari)下行高问题
- 【底层】修复 layui.sort() 方法处理负数排序的问题 #57
-
2.1.1
2017-09-01-
功能新增
-
完善与优化
- [layDate] 如果设置了 value,则默认给被绑定的元素(如 input)赋值
-
Bug Fixes
- [layDate] 修复年列表的 disabled 小问题
- [layPage] 修复在某些情况下,选择不同每页条数时,分页结构存在的小问题
- [table] 修复 table sort 事件在执行 table.reload() 死循环的问题
- [table] 修复多级表头开启复选框或设置左右固定列时的主体与表头未对齐问题
- [upload] 修复多文件模式下,设置 size,出现重复请求的问题
-
-
2.1.0
2017-08-30在过去一周对 2.0 的反馈收集中,我很惊诧地看到关于数据表格的多种吐槽。layui 向来以易用著称,但这次,大家普遍对 layui table 的态度却似乎并不是这样。这让我一度懊恼与不解,尽管可能的答案是:layui 的使用群体正在变得更加广泛。但我更多的是在反思。于是,在这个版本中,一半坚持原有的理念,一半妥协,默默并努力改造成我和你们都希望的样子。而这,仅仅只是开始…
-
功能新增
- [table] 新增 table.reload() 方法,以便对自动渲染的表格完成重载 #见文档
- [table] 新增 height 最大化减去差值的自动换算功能(语法:full-差值),以让容器始终适应屏幕高度 #见文档
- [table] 新增 response 参数,用于对返回的数据格式的自定义支持 #见文档
- [table] 新增 request 参数,用于对分页请求的参数:page/limit的自定义名称支持 #见文档
- [table] 新增sort事件,用于监听排序动作 #见文档
- [upload] 开始支持直接在元素上配置基础参数
- [upload] 回调中可通过 this.item 读取到当前触发上传的元素,一般用于 elem 绑定 class 的情况
-
完善与优化
- [响应式] 平板设备的临界值改为以iPad为准(768px)
- [table] 去除选中的数据中的临时字段:LAY_CHECKED
- [table] 优化局部代码
- [tab选项卡] 点击 target="_blank" 类型的a标签时,不会对该项标记下标
-
Bug Fixes
- [底层] 修复 layui.sort() 方法在个别特殊情况排序异常的问题
- [table] 修复编辑单元格或删除行后,对列进行排序出现刚初始时的数据的Bug
- [table] 修复在无数据的情况下开启 toolbar 且固定在右侧,出现重复的问题
- [layDate] 修复点击时间选择器的标题区域,出现报错的问题
- [layDate] 修复限制可选日期时,年列表和月列表存在的小问题
- [tab选项卡] 修复执行添加tabs时,当出现下拉,再删除最后面几个tabs出现的Bug
-
-
2.0.2
2017-08-24跟上个版本一样,重心还是放在 layDate 和 table 上
-
layDate 日期时间选择器
- 增加开始日期超出结束日期时点击确定出现的提示
- 修复回车事件影响其它元素(如 textarea)正常回车的失误性 bug
- 修复:选择日期范围确定后,再重新打开并选择开始日期(却未点结束日期),再点击空白区域关闭,又重新打开,并选择更小一点的日期所出现的异常问题(卧槽,这个 bug 描述起来好累!你们读懂了吗?至少我都被自己说晕了。发现这个 bug 的同学心细如夸克)
- 修复时间选择器在“360极(keng)速(die)浏览器”下因显示隐藏滚动条导致的样式异常问题
-
Table 表格
- 增加对工具条模板的自定义 JS 脚本支持
- 新增列“空隙”类型,以定义一个 15px 宽度无任何内容的列
- 优化右固定列的左侧边框线、数据还未获取造成的分页落差感等细节问题
- 去除在首列值为 null 或 undefined 时的自动加序号功能
- 修复工具条,只有设置了 fixed 参数才会显示的 bug
- 修复列单元格设置居中时,点击超出文本,未弹出查看更多的浮层的问题
-
其它
- 新增用于在不同设备下显示和隐藏的响应式公共类(见文档)
- 优化导航样式
- 修复富文本编辑器多次上传图片的覆盖问题
-
-
2.0.1
2017-08-22尽管昨天发布了大版本,但是有 Bug 还是得速修
-
layDate 日期时间选择器
- 日期时间选择器改为只能点确定关闭(以便选择时间)
- 修复选择了当月的最后一天(比如29/31),再切换年月出现日期值超出的bug
- 修复ready回调返回的月份值没有加1的问题
-
Table 表格
- 修复Java端的异步接口未指定json类型,前端无法获取到数据的问题
- 修复字符型数字排序异常的bug
- 修复如果数字为0,单元格未显示0的bug
- 修复勾选行,再删除行后,仍然可以获取该选中行数据的bug
-
其它
- 修复 Upload模块 正常返回了JSON,仍然抛出提示“请对上传接口返回有效JSON”的bug
- 修复 富文本上传图片异常的BUG
- 修复 layui.sort(obj, key, desc) 方法对字符型数字排序异常的bug
-
-
2.0.0
2017-08-21里程碑式版本。核心机制未变,更多是对 1.x 的扩充和完善。它的意义并不只是那几项更新,而是自此开始,layui 进入一段高光之旅。 因该版本改动较大,为避免代码冗余,特不兼容 1.x,请勿覆盖升级,你也可以阅读: 1.x升2.0注意事项
-
Table 表格
- 新增的全新模块,用于对表格进行一些列功能和动态数据操作
- 支持固定表头、固定行、固定列左/列右
- 支持拖拽改变列宽度
- 支持多级表头
- 支持大表格、小表格、默认表格的任意尺寸设定
- 支持多种表格风格设定
- 支持“Ajax接口获取”、“直接赋值数据”、“转化现有表格”三种初始化渲染方式
- 支持单元格的自定义模板
- 支持对表格重载(比如搜索、条件筛选等)
- 内置checkbox复选框功能
- 内置自定义工具条及相关操作功能
- 内置分页功能
- 内置字段排序功能
- 内置单元格编辑功能
- 内置显示单元格更多内容功能
-
Carousel 轮播
- 新增的全新模块,用于处理页面轮播逻辑
- 支持图片、文字列表等任意内容的切换
- 支持普通轮播和全屏轮播(FullPage)的设定
- 支持多种切换动画的设定
- 支持是否自动切换、自动切换的时间间隔的设定
- 支持初始开始的条目索引的设定
- 支持箭头和指示器的风格和位置设定
-
Layout 布局
- 新增栅格布局系统
- 栅格采用12等分,内置移动设备、平板、桌面中等和大型屏幕的响应式处理
- 栅格支持分栏间隔、列偏移、嵌套,流体布局等
- 栅格最低能支持到ie8
- 新增后台大框架布局现成方案
-
layDate 日期时间选择器
- 全面重写,可作为独立组件(版本直接跃升为 5.0)
- 依旧采用原生JavaScript编写,零依赖,可在layui中作为模块使用,也可作为独立组件使用
- 支持单独显示年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器
- 支持双控件,用于选择年/年月/日期/时间/日期时间五种类型选择器的范围(可顺时、逆时)
- 支持日期格式的自定义
- 支持日期是否合法的自动校验
- 支持有效日期范围的设定
- 支持内置事件(可自定义)、外部事件、直接显示等多种调用方式
- 支持中文版和国际版的语言设定
- 支持开启公历节日和标记重要日期
- 支持直接嵌套在页面的某个容器中
- 支持底部按钮的任意顺序排版
- 支持智能显示在最佳可视坐标
- 支持回车快捷键选择
- 支持多种内置主题的设定,支持自定义主题色,且可单独定制主题
-
Upload 上传
- 全面重写
- 可指定任意元素(如按钮、普通div等)来触发上传
- 支持选择后自动上传和手工上传两种模式
- 支持附加参数、支持自定义文件name等
- 支持多文件上传(ie8/9除外)
- 支持拖拽文件上传(ie8/9除外)
- 支持文件大小限制,单位kb(ie8/9除外)
- 支持图片上传前预览(ie8/9除外)
- 支持文件跨域上传(ie8/9除外)
-
layPage 分页
- 核心代码和接口重写
- 新增“数据总数”、“每页条数”显示区域
- 支持自定义排版
- 新增count参数,用于得到数据总数,并剔除了pages参数(分页总数)
- 新增limits参数,用于设定每页条数的选择项
- 新增limit参数,用于设定每页条数的默认项
- 优化跳页框在输入非数字时的校验
- 总页数低于2时,仍然输出分页结构(前面版本不会显示)
- 尾页文本默认显示为总页数
- 跳页框如果输入的页码大于最大页数,则自动跳到最大页
- 样式优化
-
Form 表单集合
- select组件增加自动上下判断,用于显示在最佳可视区域
- select组件允许出现“请选择”的空值选项
- form.render(type, filter)方法增加第二个参数,用于指定某个区域进行局部渲染
- 优化复选框样式,以更友好地用于非form场景中
- form.on方法支持链式写法
-
Layer 弹层
- 同步到最新的 layer v3.1.0
- 增加maxHeight参数,用于设定弹层的最大高度
- 对默认按钮颜色、Tips层、Prompt层、Tab层等进行了样式微调,以便更显大气,且更符合layui风格
-
Element 页面元素
- 新增时间轴元素
- 新增徽章元素
- 新增动画CSS类文档
- 导航UI细节优化,并新增三种主题色支持:墨绿/藏青/蓝
- 导航支持加入图片
- 分割线新增可支持的颜色:赤/橙/墨绿/藏青/蓝/黑/灰
- Tab选项卡UI微调
- element模块输出的接口由先前的函数改为对象
-
Util 工具集
- 新增倒计时方法:util.countdown()
- 新增用于得到“某个时间在当前时间的多久前”的方法:util.timeAgo()
- [固定块] 新增 showHeight 参数,用于控制出现TOP按钮的滚动条高度临界值
-
底层方法
- 新增 layui.sort(obj, key, desc) 方法,用于将数组中的对象按某个成员重新对该数组排序
- 改写layui.router()方法,以更好地解析location.hash的单页URL规则
-
其它更改
- 新增28个字体图标
- 剔除全局滚动条样式
- 获取内置的jQuery接口,可通过 var $ = layui.$; 得到,之前的 layui.jquery仍然可用
- layui.css大量样式结构优化
-
Bug fixes
- 修复select组件在没有任何option的情况下报错的问题
- 修复导航多个排列在一起时,hover出现异常的问题
- 修复layui.device()方法在Chrome设备模式无法识别ios环境的问题
- 修复IE下,多次执行layui.use加载同一个模块时,控制台出现多条重复请求的问题(实际上不是真实请求)
-
1.x 升 2.0 特别注意事项
- layDate日期模块、layPage分页模块、Upload上传模块等等,均已完全重写,请按照最新文档修改
- 获取 Form 模块接口,由之前的 var form = layui.form() 改为:var form = layui.form
- 获取 Element 模块接口,由之前的 var element = layui.element() 改为:var element = layui.element
- layui.all.js 的目录调整到跟 layui.js 的同级目录,如有使用到 layui.all.js,请注意修改路径
- 由于改动较大,2.0其实并不兼容1.x,强烈不推荐覆盖升级。官网仍会保留 1.x 的存档,最好按需升级。
-
-
1.0.1 到 1.0.9
2016-10-18 - 2017-02-28 -
1.0.0
2016-10-14首个正式版本出蛋 -
孵化