您的位置:首页 > 产品设计 > UI/UE

Layui 2.0.0 正式发布:潜心之作,开箱即用的前端UI框架(确实很多内容)

2017-08-21 20:44 691 查看
Hi,久违了。处暑逼近之际,潜水半年的 layui 是时候出来透透气了。我们带来的是全新的 2.0 版本,一次被我们定义为“破茧重生”的倾情之作。如果你已曾用过 layui,你将真正感受到一次因小而大、因弱而强的成长。在前端MVVM野蛮生长的时代,layui 这样一个近乎有些不随潮流的UI解决方案,依旧在守望它的执念。它所呈现的不仅仅是一项项信手拈来的元素,更多是关于UI设计理念的表达。不骄不躁,亲和而富有生命力。返璞归真,却非逆道而行。

2.0 是 layui 的一次里程碑式版本,它的意义并不只是那几项肤浅的更新,而是自此开始,layui 进入一段复活之旅。

更新日志

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 Fix

修复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 的存档,最好按需升级。

完整更新日志

快速上手
http://www.oschina.net/news/87927/layui-2-0-0-released
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: