第三方支持:
Layui部分模块依赖jQuery(比如layer),但是你并不用去额外加载jQuery。Layui已经将jQuery最稳定的一个版本改为Layui的内部模块,当你去使用 layer 之类的模块时,它会首先判断你的页面是否已经引入了jQuery,如果没有,则加载内部的jQuery模块,如果有,则不会加载。
layui 的模块是基于 layui.js 内部实现的异步模块加载方式,它并不遵循于AMD,而是自己定义了一套更轻量的模块规范
另外,我们的图标取材于阿里巴巴矢量图标库(iconfont),构建工具采用 Gulp 。除此之外,不依赖于任何第三方工具。
引用:
栅格布局
所谓栅格布局,layui将页面的每一行默认分为12等分 ,根据不同终端设置不同样式。
采用 layui-row 来定义行,如:
列可以同时出现最多四种不同的组合,分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕),以呈现更加动态灵活的布局。
超小屏幕(xs) 小屏幕(sm) 中屏幕(md) 超大屏幕(lg)
手机屏幕 <768px 平板屏幕 768px< width<992px PC端 992px<width < 1200px 投影 1200px<width
layui-col-xs* ( 表示1-12) layui-col-sm ( 表示1-12) layui-col-md ( 表示1-12) layui-col-lg (*表示1-12)
始终按设定的比例水平排列 在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列 在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列 在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列
图标
layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。因此你可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css 控制文字属性,如 color、font-size,就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。
通过对一个内联元素(一般推荐用 i标签)设定 class=“layui-icon”,来定义一个图标,然后对元素加上图标对应的 font-class(注意:layui 2.3.0 之前只支持采用 unicode 字符),即可显示出你想要的图标
例如:
或者
按钮
向任意HTML元素设定class=“layui-btn”,建立一个基础按钮。
通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。内置的按钮class可以进行任意组合,从而形成更多种按钮风格
主题
原始按钮
默认按钮
百搭按钮
暖色按钮
警告按钮
禁用按钮
尺寸
大型按钮
默认按钮
小型按钮
迷你按钮
流体按钮(最大化适应)
圆角
原始按钮
图标按钮
添加
按钮组
数据表格
创建一个table实例最简单的方式是,在页面放置一个元素
弹出层
layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持、不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护、不断建设和提升社区服务,在 Web 开发者的圈子里口口相传,乃至于成为今天的 layui 最强劲的源动力。目前,layer已成为国内最多人使用的 Web 弹层组件
layer作为独立组件使用,你可以去layer独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js。且jquery的引入位置必须放到layer引入之前,否则无效。
使用方式
属性:
type
layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用*layer.open({type: 1})*方式调用,则type为必填项(信息框除外)
title
title支持三种类型的值,若你传入的是普通的字符串,如title :‘我是标题’,那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: [‘文本’, ‘font-size:18px;’],数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false
content
content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。
area
在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area: ‘500px’,高度仍然是自适应的。当你宽高都要定义时,你可以area: [‘500px’, ‘300px’]
btn
信息框模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。当您只想自定义一个按钮时,你可以btn: ‘我知道了’,当你要定义两个按钮时,你可以btn: [‘yes’, ‘no’]。当然,你也可以定义更多按钮,比如:btn: [‘按钮1’, ‘按钮2’, ‘按钮3’, …],按钮1的回调是yes,而从按钮2开始,则回调为btn2: function(){},以此类推。
closeBtn
layer提供了两种风格的关闭按钮,可通过配置1和2来展示,如果不显示,则closeBtn: 0
shade
即弹层外区域。默认是0.3透明度的黑色背景(’#000’)。如果你想定义别的颜色,可以shade: [0.8, ‘#393D49’];如果你不想显示遮罩,可以shade: 0
shadeClose
如果你的shade是存在的,那么你可以设定shadeClose来控制点击弹层外区域关闭。
time
默认不会自动关闭。当你想自动关闭时,可以time: 5000,即代表5秒后自动关闭,注意单位是毫秒(1秒=1000毫秒)
layer.open(options)
基本上是露脸率最高的方法,不管是使用哪种方式创建层,都是走layer.open(),创建任何类型的弹层都会返回一个当前层索引,上述的options即是基础参数
layer.alert(content, options, yes) - 普通信息框
它的弹出似乎显得有些高调,一般用于对用户造成比较强烈的关注,类似系统alert,但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数,可以设定各种你所需要的基础参数,但如果你不需要的话,直接写回调即可。
layer.confirm(content, options, yes, cancel) - 询问框
类似系统confirm,但却远胜confirm,另外它不是和系统的confirm一样阻塞你需要把交互的语句放在回调体中。同样的,它的参数也是自动补齐的。
layer.msg(content, options, end) - 提示框
我们在源码中用了相对较大的篇幅来定制了这个msg,目的是想将其打造成露脸率最高的提示框。而事实上我的确也在大量地使用它。因为它简单,而且足够得自觉,它不仅占据很少的面积,而且默认还会3秒后自动消失所有这一切都决定了我对msg的爱。因此我赋予了它许多可能在外形方面,它坚持简陋的变化,在作用方面,它坚持零用户操作。而且它的参数也是自动补齐的。
layer.load(icon, options) - 加载层
type:3的深度定制。load并不需要你传太多的参数,但如果你不喜欢默认的加载风格,你还有选择空间。icon支持传入0-2如果是0,无需传。另外特别注意一点:load默认是不会自动关闭的,因为你一般会在ajax回调体中关闭它。
layer.close(index) - 关闭特定层
关于它似乎没有太多介绍的必要,唯一让你疑惑的,可能就是这个index了吧。事实上它非常容易得到。
表单
在一个容器中设定 class=“layui-form” 来标识一个表单元素块,通过规范好的HTML结构及CSS类,来组装成各式各样的表单元素,并通过内置的 form模块 来完成各种交互。
用于给指定表单集合的元素赋值和取值。如果 object 参数存在,则为赋值;如果 object 参数不存在,则为取值。
//给表单赋值
form.val(“formTest”, { //formTest 即 class=“layui-form” 所在元素属性 lay-filter="" 对应的值
“username”: “贤心” // “name”: “value”
,“sex”: “女”
,“auth”: 3
,“check[write]”: true
,“open”: false
,“desc”: “我爱layui”
});
//获取表单区域所有值
var data1 = form.val(“formTest”);
1
2
3
4
5
6
7
8
9
10
11
12
第二个参数中的键值是表单元素对应的 name 和 value。