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

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

  1. Asp.Net Core 2.0 项目实战(3)NCMVC角色权限管理前端UI预览及下载

    Asp.Net Core 2.0 项目实战(1) NCMVC开源下载了 Asp.Net Core 2.0 项目实战(2)NCMVC一个基于Net Core2.0搭建的角色权限管理开发框架 Asp.Ne ...

  2. Layui 是一款采用自身模块规范编写的国产前端UI框架(5600个Star)

    采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写形式,极低门槛,拿来即用. http://www.layui.com Layui 是一款采用自身模块规范编写的国产前端UI框架, ...

  3. layui经典模块化前端UI框架初识

    layui产生背景 layui相对于vue来说确实稍有逊色,但是官网提供的入门文档以及完善的框架结构,使的很多人开始用layui来开发前端页面,那么什么人会去使用layui呢? 针对后端开发人员,在对 ...

  4. 前端UI框架之layUI学习

    用layUI框架来进行我们的页面速写,还是非常不错的,虽然2016年诞生,在我使用的过程中,觉得比bootstrap更轻盈点,总结下用的最多的组件. form表单下拉框: <!DOCTYPE h ...

  5. 简述layui前端ui框架的使用

    官方网址:https://www.layui.com/demo/upload.html

  6. layui 前端UI框架

    1.获取点击行的索引

  7. Spring Cloud 2020.0.0 正式发布,全新颠覆性版本!

    Spring Cloud 2020.0.0 没错,Spring Cloud 2020.0.0 正式发布了: 感谢Java技术栈群友通知,想入群的在公众号Java技术栈后台回复:wx,正在使用 Spri ...

  8. Brn系列商城3.0测试版正式发布,欢迎大家下载测试

    BrnShop商城3.0测试版和BrnMall商城3.0测试版正式发布,欢迎大家下载测试(点击下载).测试结束后将会发布正式版和MySQL版本. 测试过程中发现bug欢迎大家给我们反馈,反馈邮箱:br ...

  9. 微信小程序商城开源项目,Weixin-App-Shop 1.0 版本正式发布!!!

    微信小程序商城开源项目,Weixin-App-Shop 1.0 版本正式发布 Weixin-App-Shop 是捷微团队开发的微信小程序商城开源项目,涵盖了微信商城的全部功能,能够快速发布简单易用的小 ...

随机推荐

  1. [转载]Ocelot简易教程(三)之主要特性及路由详解

    上篇<Ocelot简易教程(二)之快速开始2>教大家如何快速跑起来一个ocelot实例项目,也只是简单的对Ocelot进行了配置,这篇文章会给大家详细的介绍一下Ocelot的配置信息.希望 ...

  2. js实现计时功能

    原文链接:https://blog.csdn.net/qq_37936542/article/details/78912786 一:计时器功能 <!DOCTYPE html> <ht ...

  3. [Vue] Use Vue.js Component Computed Properties

    You can add computed properties to a component to calculate a property on the fly. The benefit of th ...

  4. 【????】最短路(short)

    问题描述: 给出N个点,M条无向边的简单图,问所有点对之间的最短路. 数据输入: 第1行两个正整数N,M(N<=100,M<=5000) 下面M行,每行3个正整数x, y, w,为一条连接 ...

  5. [Angular] Create a simple *ngFor

    In this post, we are going to create our own structure directive *ngFor. What it should looks like i ...

  6. 嵌入式project师考试知识点总结 微内核结构

    在操作系统的结构设计中,微内核结构表示的是 A)  总体式结构 B)  层次结构 C)  分布式结构 D)  客户机/server结构    微内核是指把操作系统结构中的内存管理.设备管理.文件系统等 ...

  7. 【19.27%】【codeforces 618D】Hamiltonian Spanning Tree

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  8. 利用navicat写mysql的存储过程

    最近项目经理让我给新的活动的预留一个插入红包和查看详情的sql,方便在项目出问题的做一些紧急操作,我想了下这里面还涉及到挺多逻辑和挺多表的一句句查也不方便啊,干脆写到存储过程里,于是开始在navica ...

  9. UWP 在 WebView 中执行 JavaScript 代码(用于模拟用户输入等) - walterlv

    原文:UWP 在 WebView 中执行 JavaScript 代码(用于模拟用户输入等) - walterlv UWP 在 WebView 中执行 JavaScript 代码(用于模拟用户输入等) ...

  10. 存储用es,消息队列用redis

    自动化确实方便,做微服务再合适不过了,单一jar包部署和管理都非常方便.只要系统架构设计合理,大型项目也能用.最近做的项目,统计中心和推荐系统,collector.calculator.recomme ...