安下载编程开发

分类分类

layuiAdmin pro(layui后台管理模板系统)

layuiAdmin pro(layui后台管理模板系统)

v1.1.0 单页版

大小:0.57 MB 更新:2019/03/05

类别:编程工具系统:WinXP, Win7, Win8, Win10, WinAll

立即下载

  layuiAdmin pro是一款layui后台管理模板系统,该软件赢得大量客户的青睐,它前后台系统通吃的能力使得它可以在同行中遥遥领先,提供可编辑的前台页面,满足繁杂的后台功能需求,系统致力于让每一位开发者都能轻松搭建自己的后台,系统没有内置过多花俏的动画,但在许多交互元素中,却发挥着重要的作用,内置动画全部采用CSS3,因此不支持ie8,部分功能不支持ie9(即ie8/9无动画);用户在长时间的工作中会容易产生视觉疲劳,产生疲劳原因是由于对颜色过于丰富或单调而形成的麻木感,系统提供多种清新而深沉的颜色作为背景色,与其他相关界面相互柔合,让用户使用的Web界面更能让眼睛接受,软件提供以墨绿色为主的界面色调,它可以给用户一种视觉深沉感,再加上以浅黑色的作为陪衬,通过比较鲜艳的蓝色来弥补色觉疲劳,融合的不同颜色的背景可以让人感觉清新自然,愈发耐看,软件系统一直都不断的完善和维护,不断建设和提升社区服务,成为今天的layui最强劲的源动力,需要的用户可以下载体验

软件功能

  软件内置了七种背景色,以便你用于各种元素中,如:徽章、分割线、导航等等

  支持向任意HTML元素设定class="layui-btn",建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成更多种按钮风格

  支持在一个容器中设定 class="layui-form" 来标识一个表单元素块,通过规范好的HTML结构及CSS类,来组装成各式各样的表单元素,并通过内置的 form模块 来完成各种交互

  支持导航一般指页面引导性频道集合,多以菜单的形式呈现,可应用于头部和侧边,是整个网页画龙点晴般的存在。面包屑结构简单,支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的,但一些交互操作,如唿出二级菜单等,需借助element模块才能使用

  支持导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能。面包屑结构简单,支持自定义分隔符

  支持进度条可应用于许多业务场景,如任务完成进度、loading等等,是一种较为直观的表达元素

  支持一般的面板通常是指一个独立的容器,而折叠面板则能有效地节省页面的可视面积,非常适合应用于:QA说明、帮助文档等

  支持徽章是一个修饰性的元素,它们本身细小而并不显眼,但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬,而显得十分和谐

  支持将时间抽象到二维平面,垂直呈现一段从过去到现在的故事

软件特色

  layPage 致力于提供极致的分页逻辑,既可轻松胜任异步分页,也可作为页面刷新式分页。自 layui 2.0 开始,无论是从核心代码还是API设计,layPage 都完成了一次蜕变。清爽的UI、灵活的排版,极简的调用方式,这一切的优质元素,都将毫无违和感地镶嵌在你的页面之中

  laytpl 是 JavScript 模板引擎,在字符解析上有着比较出色的表现,欠缺之处在于异常调试上。由于传统意义的前端模板引擎已经变得不再流行,所以 laytpl 后续可能会进行重写,目前方向暂时还没有想好,预计会在layui比较稳定后开始实施

  为了丰富网页布局,简化 HTML/CSS 代码的耦合,并提升多终端的适配能力,layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分,预设了 4*12 种 CSS 排列类,它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

  响应式规则:栅格的响应式能力,得益于CSS3媒体查询(Media Queries)的强力支持,从而针对四类不同尺寸的屏幕,进行相应的适配处理

  布局容器:将栅格放入一个带有 class="layui-container" 的特定的容器中,以便在小屏幕以上的设备中固定宽度,让列可控

  table 模块是我们的又一走心之作,在 layui 2.0 的版本中全新推出,是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头,支持单元格的自定义模板,支持对表格重载(比如搜索、条件筛选等),支持复选框,支持分页,支持单元格编辑等等一些列功能。尽管如此,我们仍将对其进行完善,在控制代码量和性能的前提下,不定期增加更多人性化功能。table 模块也将是 layui 重点维护的项目之一

  寄托在原始表单元素上的属性设定,及其全自动的初始渲染,和基于事件驱动的接口书写方式,会让你觉得,传统模式下的组件调用形式,也可以是那样的优雅、简单。然而文字的陈述始终是苍白的

  上传模块自 layui 2.0 的版本开始,进行了全面重写,这使得它不再那么单一,它所包含的不仅是更为强劲的功能,还有灵活的UI。任何元素都可以作为上传组件来调用,譬如按钮、图片、普通的DIV等等,而不再是一个单调的file文件域

  页面中有许多元素需要自动去完成一些处理,譬如导航菜单的小滑块、Tab的切换等操作,他们往往不需要去单独调用一个方法来开启一项功能,而页面上恰恰有太多这样的小交互,所以我们统一归类为element组件。跟表单一样,基于元素属性和事件驱动的接口书写方式

  在主题定制的应用场景中,自然离不开颜色的自定义。而你往往需要的是关于它的直观选择,于是 colorpicker 模块姗姗来迟,它支持 hex、rgb、rgba 三类色彩模式,在代码中简单的调用后,便可在你的网页系统中自由拖拽去选择你中意的颜色

  作为一个拖拽式的交互性组件,滑块往往能给产品带来更好的操作体验。layui 深以为然,slider 模块包含了你能想到的大部分功能,尽管它可以作为一个独立的个体

  主要适用于跑马灯/轮播等交互场景。它并非单纯地为焦点图而生,准确地说,它可以满足任何类型内容的轮播式切换操作,更可以胜任 FullPage (全屏上下轮播)的需求,简洁而不失强劲,灵活而优雅

  支持可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中,那么宽度将不会固定,而是 100% 适应

  通过“列间距”的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距。列间距在保证排版美观的同时,还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距,预设了 12 种不同尺寸的边距

  列偏移:对列追加 类似 layui-col-md-offset* 的预设类,从而让列向右偏移。其中 * 号代表的是偏移占据的列数,可选中为 1 - 12。

  页面中的一些简单辅助元素,如:引用块、字段集区块、横线等等,这些元素都无需依赖任何模块

使用方法

  1、您可以在我们的 官网首页 下载到 layui 的最新版,它经过了自动化构建,更适合用于生产环境。目录结构如下:


  2、你也可以通过 GitHub 或 码云 得到 layui 的完整开发包,以便于你进行二次开发,或者 Fork layui 为我们贡献方案

  3、根据使用方法提示安装npm,输入进行安装npm 安装

  4、获得 layui 后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:

  5、不用去管其它任何文件。因为他们(比如各模块)都是在最终使用的时候才会自动加载。这是一个基本的入门页面:

  6、如果你想采用非模块化方式(即所有模块一次性加载,尽管我们并不推荐你这么做),你也可以按照下面的方式使用:

  7、这恰是符合当下国内绝大多数程序员从旧时代过渡到未来新标准的最佳指引。所以 layui 本身也并不是完全遵循于AMD时代

  8、遵循 layui 的模块规范建立一个入口文件,并通过 layui.use() 方式来加载该入口文件,如下所示:

  9、上述的 index 即为你 /res/js/modules/ 目录下的 index.js,它的内容应该如下:

  10、如果你并不喜欢 layui 的模块化组织方式,你完全可以毅然采用“一次性加载”的方式

按钮设置功能

  布局 / 容器

  layui-main用于设置一个宽度为 1140px 的水平居中块(无响应式)

  layui-inline用于将标签设为内联块状元素

  layui-box用于排除一些UI框架(如Bootstrap)强制将全部元素设为box-sizing: border-box所引发的尺寸偏差

  layui-clear用于消除浮动(一般不怎么常用,因为layui几乎没用到浮动)

  layui-btn-container用于定义按钮的父容器。(layui 2.2.5 新增)

  layui-btn-fluid用于定义流体按钮。即宽度最大化适应。(layui 2.2.5 新增)

  辅助

  layui-icon用于图标

  layui-elip用于单行文本溢出省略

  layui-unselect用于屏蔽选中

  layui-disabled用于设置元素不可点击状态

  layui-circle用于设置元素为圆形

  layui-show用于显示块状元素

  layui-hide用于隐藏元素

  文本

  layui-text定义一段文本区域(如文章),该区域内的特殊标签(如a、li、em等)将会进行相应处理

  layui-word-aux灰色标注性文字,左右会有间隔

  背景色

  layui-bg-red用于设置元素赤色背景

  layui-bg-orange用于设置元素橙色背景

  layui-bg-green用于设置元素墨绿色背景(主色调)

  layui-bg-cyan用于设置元素藏青色背景

  layui-bg-blue用于设置元素蓝色背景

  layui-bg-black用于设置元素经典黑色背景

  layui-bg-gray用于设置元素经典灰色背景

预先加载

  Layui的模块加载采用核心的 layui.use(mods, callback)方法,当你的JS 需要用到Layui模块的时候,我们更推荐你采用预先加载,因为这样可以避免到处写layui.use的麻烦。你应该在最外层如此定义:

  按需加载(不推荐)

  如果你有强迫症,你对网站的性能有极致的要求,你并不想预先加载所需要的模块,而是在触发一个动作的时候,才去加载模块,那么,这是允许的。你不用在你的JS最外层去包裹一个大大的 layui.use,你只需要:

  注意:如果你的 JS 中需要大量用到模块,我们并不推荐你采用这种加载方式,因为这意味着你要写很多 layui.use(),代码可维护性不高。

  建议还是采用:预先加载。即一个JS文件中,写一个use即可。

模块命名空间

  layui 的模块接口会绑定在 layui 对象下,内部由 layui.define() 方法来完成。每一个模块都会一个特有的名字,并且无法被占用。所以你无需担心模块的空间被污染,除非你主动 delete layui.{模块名}。调用模块可通过 layui.use 方法来实现,然后再通过 layui 对象获得模块接口。如:

  我们推荐你将所有的业务代码都写在一个大的 use 回调中,而不是将模块接口暴露给全局,比如下面的方式我们是极不推荐的:

  你之所以想使用上面的错误方式,是想其它地方使用不在执行一次 layui.use?但这种理解本身是存在问题的。因为如果一旦你的业务代码是在模块加载完毕之前执行,你的全局对象将获取不到模块接口,因此这样用不仅不符合规范,还存在报错风险。建议在你的 js 文件中,在最外层写一个 layui.use 来加载所依赖的模块,并将业务代码写在回调中,见:预先加载。

  事实上,如果你不想采用layui.use,你可以引入layui.all.js 来替代 layui.js,见:非模块化用法

  扩展一个layui模块

  layui 官方提供的模块有时可能还无法满足你,或者你试图按照layer的模块规范来扩展一个模块。那么你有必要认识layui.define()方法,相信你在文档左侧的“底层方法”中已有所阅读。下面就就让我们一起扩展一个Layui模块吧:

  第一步:确认模块名,假设为:mymod,然后新建一个mymod.js 文件放入项目任意目录下(注意:不用放入layui目录)

  第二步:编写test.js 如下:

  第三步:设定扩展模块所在的目录,然后就可以在别的JS文件中使用了

  大体上来说,layui 的模块定义很类似 Require.js 和 Sea.js,但跟他们又有着明显的不同,譬如在接口输出等地方。

  其实关于模块的核心,就是 layui.js 的两个底层方法:一个用于定义模块的 layui.define(),一个加载模块的 layui.use()。

常见问题

  事实上我们在模块规范已经有明确地说明,你可以采用预先加载和按需加载两种模式,但后者我们并不推荐(文档也解释原因了)。因此我们强烈推荐的方式是:你应该在你js文件的代码最外层,就把需要用到的模块 layui.use以 一下,如

  如何使用内部jQuery?

  由于Layui部分内置模块依赖jQuery,所以我们将jQuery1.11最稳定的一个版本作为一个内置的DOM模块(唯一的一个第三方模块)。只有你所使用的模块有依赖到它,它才会加载,并且如果你的页面已经script引入了jquery,它并不会重复加载。内置的jquery模块去除了全局的$和jQuery,是一个符合layui规范的标准模块。所以你必须通过以下方式得到

  为什么表单不显示?

  当你使用表单时,Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理(它们需依赖 element 模块)

  哪里有 layui 未压缩源代码?

  我们的全部代码托管在GitHub(你可以通过首页的Star进入)和码云。之所以在下载包里没有提供未压缩的源代码,是为了避免一些猿的使用混淆,因为之前有遇到过部分可爱到极致的猿,居然同时引入了压缩过和未压缩过的layui.js,虽然文档在“开始使用”中有相关的明确说明,但这种问题仍然不是个例,使得我欲哭无泪啊啊啊,但毕竟我们要做“中国最容易使用的UI框架”,因此才决定只对下载包提供我们构建后的代码,并且,由于是经过了压缩、合并等处理,所以更适合用于生产环境。

  layui的 GitHub 地址(点击下述 Star 进入)

  还是遇到困难咋办?

  可以继续看看这个:layui 常见问题的处理和实用干货集锦

  但我还是不会用怎么办?我还是遇到困难怎么办?

  首先,多看文档啊亲!那可是作者一个字节一个字节撸出来的,求珍惜。你抽出一定时间仔细阅读文档,后面只会节省更多时间!

  其次,实在无解,就请在社区反馈吧。你也可以自己组织QQ群,在社区神马的地方拉一些 layui 的小伙伴,相互交流噢

更新日志

  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[新增] table 组件的 autoSort 参数,用于控制是否在前端自动排序。若 false,则需自己(服务端)返回排序后的数据

  [新增] table 组件的 resize 方法,用于重置表格尺寸等视图结构(该优化来自“layui 社区之光” @岁月小偷)

  [优化] table 组件合计行浮点型数据精度

  [优化] table 组件列筛选弹出框的高度问题,限制最大高度为表格高度

  [修复] table 组件的隐藏列未能同步“合计行”状态的问题

  [修复] form 组件的 val() 方法没找到相关表单出现报错的问题

  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 中备选字体 FAE8F6F96C59ED1(微软雅黑),以免版权问题。尽管它并不会优先使用

  2.3.0 2018-05-25你好,layui 2.3。它除了包含许多久违的细节之更,更是新增了 rate 评分组件,这是 layui 团队新成员 @star1029 的第一款组件。

  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 后, 图片懒加载但是图片不存在的报错问题

  其它改动

  新增 21 个字体图标

  字体图标开始支持规范化的 font-class 命名方式 #详见文档

  新增 卡片面板 class="layui-card" 元素结构(需配合“非白”背景凸显效果)#详见文档

  util 模块新增 escape 方法,用于转义 xss 字符

  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 和 Fly社区模板3.0,都将陆续推出,请耐心等待!

  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] 对 mark 参数增加 0-0-date 支持,以标记每月的某天 #见文档

  [table] 新增 initSort 参数,用于初始设置排序字段与状态 #见文档

  完善与优化

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

精品推荐
同类推荐
相关下载
  • 最新排行
  • 最热排行
  • 评分最高
编程开发排行榜
实时热词