layui
是一个ui库 UI设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI,互联网常用的UI设计是虚拟UI,UI即User Interface(用户界面)的简称。
大致内容
-
观察layui文件内的内部结构
├─css //css目录
│ │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件
-
怎么在代码中引入?
-
认识layui:
-
模块化
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
}); -
-
公共类:
-
layui-icon 用于图标
-
layui-bg-red 用于设置元素赤色背景
-
-
公共属性
属性 | 描述 |
---|---|
lay-skin=" " | 定义相同元素的不同风格,如checkbox的开关风格 |
lay-filter=" " | 事件过滤器。你可能会在很多地方看到他,他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器 |
lay-submit | 定义一个触发表单提交的button,不用填写值 |
-
页面元素 (静态)
-
只与HTML有关,样式通通通过layui的公共类来实现
-
-
内置模块 (动态)
-
属性
-
方法
-
事件
-
[其他的就需要自己去查,最好把常用的元素以及模块用熟,但是不熟悉也不要紧]
-
Example
-
表单 form -form
-
导航栏/选项卡 element --->nav/tab
-
数据表格 table--->table
-
弹窗 layer
-