Layui插件的使用

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

这个插件我们可以在Layui 官网首页 下载到 layui 的最新版，下载好了之后解压找到Layui文件夹打开就能看到我们需要用的插件了，

layui文件夹里的子文件，详细可参考下图：

由于打开官网就有详细介绍，所以我这里不过多地简介下载和引入，主要简介一下Layui优于Bootstrap的部分：表单部分和日期和时间组件部分。

表单的使用：

之所以说layui的表单要优于Bootstrap的主要还是因为它的样式要比Bootstrap的多而且还要好看，

下图是一些样式的展示

layui 针对各种表单元素做了较为全面的UI支持，就是我们无需去书写那些 UI 结构，我们只需要写 HTML 原始的 input、select、textarea 这些基本的标签即可，但我们必须要给表单体系所在的父元素加上class="layui-form"，然后一切的工作都会在加载完form模块后，浏览器自动帮我们完成。

更新渲染：

有些时候，我们有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是不能使用的。但没有关系，我们只需要执行 form.render(type, filter); 方法即可。

第一个参数：type，为表单的 type 类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表：

日期和时间组件的使用：

 layDate 包含了主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。内置的自定义日期格式包含了中文版和国际版，主题多样但又简约。而且内部采用了原生 JavaScript 编写，因此又可作为独立组件使用，总的来说还是比较方便的，下面看一下展示图，如图：

而且它还有一个我个人比较喜欢的功能，也就是Mark - 标注重要日子

var ins1 = laydate.render({

  elem: '#test'

  ,mark: {

    '0-10-14': '生日'

    ,'0-12-31': '跨年' //每年12月31日

    ,'0-0-10': '工资' //每个月10号

    ,'2017-8-15': '' //具体日期

    ,'2017-8-20': '预发' //如果为空字符，则默认显示数字+徽章

    ,'2017-8-21': '发布'

  }

  ,done: function(value, date){

    if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语

      ins1.hint('中国人民抗日战争胜利72周年');

    }

  }

});

如需查看更多功能，请打开Layui官网看介绍。