layui初识 / 开普饭

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和所有模块的合并文件

怎么在代码中引入？

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  <title>开始使用layui</title>  <link rel="stylesheet" href="../layui/css/layui.css"></head><body>

<!-- 你的HTML代码 -->

<script src="../layui/layui.js"></script><script>//一般直接写在一个js文件中layui.use(['layer', 'form'], function(){  var layer = layui.layer  ,form = layui.form;

  layer.msg('Hello World');});</script> </body></html>

认识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，不用填写值

页面元素 (静态)
1. 只与HTML有关，样式通通通过layui的公共类来实现
内置模块 (动态)
- 属性
- 方法
- 事件

[其他的就需要自己去查，最好把常用的元素以及模块用熟，但是不熟悉也不要紧]

Example
1. 表单 form -form
2. 导航栏/选项卡 element --->nav/tab
3. 数据表格 table--->table
4. 弹窗 layer

layui初识

layui

相关推荐