layui内置的应用

《layui内置的应用》
开发工具与关键技术：Visual Studio / Layui插件
作者：肖春庆
撰写时间：2019年06月05日
在软件的应用的过程当中有着很多的内置内容是我们一开始在视图中无法第一眼就能看出来的，但它是真是存在的内容。它一般的隐藏着的，通过触发它的函数的进行操作显示它的功能。因此开发者在开发的时候要应用HTML、CSS和JS等等的方法进行中和编写，同时要注意触发出现和隐藏。
在开发的过程的当中一般应用的弹出层或者模态框。因为Layui的弹出层的用得最多的所以layui独立弹出层的插件layer，你可以根据自己的喜好应用layui或者layer。引用layer的插件直接应用即可。
layer提供了5种层类型。可传入的值有：信息框，默认、页面层、iframe层、加载层、tips层、content可传入的值是灵活多变的
页面层：layer.open({type: 1, content: ‘传入任意的文本或html’});content是string类型。 layer.open({type: 1, content: KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲id')}); content….post(‘url’, {}, function(str){layer.open({type: 1,content: str });})
注意：如果str是object，那么需要字符拼接。
如果是iframe层: layer.open({ type: 2, content: ‘http://sentsin.com’ }),这里content的content是一个URL，不让iframe出现滚动条，可以设置content的内容。
Tips层：layer.open({ type: 4, content: [‘内容’, ‘#id’] }); 数组读取选择器或者DOM；
如果你想关闭弹出层你可以应用layer-closeAll();进行关闭所有。当然你只想关闭一个的时候在layer-closeAll();加入关闭的模态框类型。例如关闭所有的iframe层：
layer-closeAll(“iframe”);如此类推。
日历的纯编写的需要一定的时间和能力的，所以一般的开发者都应用日历插件来进行页面制作。Layui提供了多种样式的日历，你可以根据自己的需要进行应用。其中这样应用了：年选择器、月选择器、日选择器、时间选择器和日期选择器等等为核心，自定义了日期格式分析和合法正机制、里面含有中文版和国际版。

应用Layui的代码通过核心方法：laydate.render(options) 来设置基础参数，也可以通过方法：laydate.set(options) 来设定全局基础参数。你可以应用calendar 参数所代表的公历节日更多情况下是一个摆设。因此，我们还需要自定义标注重要日子。

例如：用于设定控件的定位方式，abolute：绝对定位，始终吸附在绑定元素周围、默认值,直接嵌套显示。
layPage,提供了精致的分页逻辑，可以进行分页，也可以为页面刷新数据信息。

当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断），注意在应用要对表格进行渲染。
声明一个函数当触发的时候进行应用Layui的内容。Count,获取总数一般通过服务端进行获取。Limits,每一条数据的选择性，通过Layout参数开启了limit，会出现select的选择框由于使用非常简单，直接列核心接口的参数选项。在cols[]中设置自己的表头的数据内容。然后应用数据内容进行布局。
轮播可以交换场景，它单纯的焦点图，它可以满足所以类型的内容的轮播切换操作。准确的说可以切换的内容可以是愿意内容。它自定义了一个一开始可以自动切换，当鼠标移入轮播的时候，轮播停止自动切换。用户可以在轮播里进行手动切换，用户点击到达指定的第几屏幕。并可以进行左右切换。当鼠标移除的时候，恢复初始化。

在HTML结构中，要简注意这两项： 1、外层元素的 class=“layui-carousel” 用来标识为一个轮播容器 。2、内层元素的属性 carousel-item 用来模块建造实例的元素指向，其它的就是按照实际需求，给方法设置不同的基础参数了。标识条目。而 id 则用于carousel
在条目的内容可以是所以Html的内容。通过创建实体实例，设置容器的样式内容，始终显示的箭头和切换方式。轮播的每一次切换时触发，回调函数返回一个object参数，携带的成员如下：
监听轮播切换事件,确定 lay-filter=“test1” 属性值,获取当前条目的索引,记录上一个条目的索引,应用当前条目的元素对象。
本文应用了Layui官方的内容。更多内容请自行Layui官网。