Layui 2.0.0发布!业界最容易使用的前端UI解决方案

Layui 2

简介

Layui是由职业前端倾情打造,面向所有层次的前后端程序猿,业界最容易使用的前端UI解决方案。

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

Layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为后台系统与前台界面的速成开发方案。

关于2.0

里程碑式版本。核心机制未变,更多是对 1.x 的扩充和完善。它的意义并不只是那几项更新,而是自此开始,layui 进入一段重生之旅。 

因该版本改动较大,为避免代码冗余,特不兼容 1.x,请勿覆盖升级,你也可以阅读:1.x升2.0注意事项

宇润从laydate到layer,再到用layui 1.x,觉得Layui作者@贤心 开发的这些组件和框架使用起来太方便了。用来开发后台管理系统简直逆天的方便,后端程序员不用再关心页面样式问题,毕竟很多小公司后端程序员还得负责前端,解决了一个大问题。

功能列表

Layui 2功能列表

Layui官方网站

官网地址:http://www.layui.com/

文档地址:http://www.layui.com/doc/

更新内容

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 elemenet = layui.elemenet() 改为:var elemenet = layui.elemenet

layui.all.js 的目录调整到跟 layui.js 的同级目录,如有使用到 layui.all.js,请注意修改路径

由于改动较大,2.0其实并不兼容1.x,强烈不推荐覆盖升级。官网仍会保留 1.x 的存档,最好按需升级。

  • 标签
  • 发表评论
当前用户:
  • 评论列表
  • 最新文章
  • 最新评论