玩转layui

layui概述

 

 

简介

layui（谐音：类UI) 是由国人 闲心 （杭州、soho 自由工作者）开发的一款采用模块规范（amd cmd规范）编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

 

layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。她更多是为后端程序员量身定做，程序员无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切变得简单。

 

官网

官网：

http://www.layui.com/

 

社区：

http://fly.layui.com/

 

GitHub：

https://github.com/sentsin/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这个产品，提供了很强大的一些 css 的类名，我们通过它提供的这些类名，就可以完成页面的布局和页面的一些小组件（按钮、导航条、轮播图）。

 

同时该产品还提供了很多的js组件，可以非常方便的帮我们完成弹窗（模态框）、无刷新上传、分页字符串、表格展示.....

 

先学习一下提供的这些 css 类。

 

布局

layui提供了和bootstrap类似的栅格布局系统，可以将一个网页分割为12列进行布局。

 

规则：

 

 

栅格布局系统，其实说白了就是table布局的一种演化。存在行（随意的定制）和列（由12列进行有机的组合）。

 

layui里面的栅格使用方式：

1. 定义一个 layui-container的容器，存放行和列
2. 定义行 layui-row
3. 在行里面定义列 layui-col-md-(1-12)
4. 在列里面放置内容

 

演示：

 

 

效果：

 

 

 

进一步学习：（列偏移）

 

 

 

 

 

颜色

我们在学习bootstrap的时候，知道颜色是通过关键字进行提供的。

1. danger（red）
2. success (green)
3. warning
4. info
5. primary

 

layui 框架为开发页面的时候提供了多种可选的颜色方案，供开发者使用。

常用主色

 

 

 

场景色

 

 

 

中性色

 

 

类选择

在使用的时候，我们只需要在dom元素上面增加相应的类名即可。

 

 

 

扩展-web安全色

web安全色，就是网页安全色。名字虽然有安全，但是和网站的安全无关。叫这个名字,是因为这些色彩在不同的显示设备和操作系统上表现基本一致。非安全色换一个OS环境，颜色就可能失真。

 

名词解释：

https://blog.csdn.net/zzcv_/article/details/1722324

 

web安全色：

http://www.bootcss.com/p/websafecolors/

 

演示：

 

 

效果：

 

 

 

图标

需要注意：现在互联网上使用的这些图标，都是一些字体库文件（1. 改变大小 2. 改变颜色）做出来的，以前这些图标都是设计做的小图片。

 

使用：

通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标，然后对元素加上图标对应的 font-class（查看手册获取图标的类），即可显示出你想要的图标。

示例：

<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i> 

效果：

 

 

 

 

演示：

 

 

效果：

 

 

天发现这些字体图标不够使用，则我们可以去淘宝的字体库自己制作。

 

扩展

阿里字体图：

http://www.iconfont.cn/

 

 

 

按钮

向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

 

 

 

 

 

 

演示：

 

 

 

效果：

 

 

 

表单

 

 

演示：

 

 

效果：

 

 

 

选项卡

 

 

演示：

 

 

效果：

 

 

表格

 

 

演示：

 

 

效果：

 

 

面板

 

 

 

动画

动画layui 的许多交互元素中，发挥着重要的作用。layui 的动画全部采用 CSS3，因此不支持ie8和部分不支持ie9（即ie8/9无动画）。

 

 

示例：

<div class="layui-anim layui-anim-up"></div>

 

 

 

进度条

 

 

 

徽章

 

 

 

时间线

 

 

 

辅助

主要提供了引用、字段集区块、水平线相关功能。

 

 

 

 

 

 

内置模块

layUI框架除了是一个UI框架之外，还额外提供了很多的组件，例如常见的弹窗、日历、分页等组件，有了这些组件，可以快速的帮我们进行日常的开发。

 

弹窗组件-layer

网站：

http://layer.layui.com/

 

演示：

 

 

效果：

 

 

 

 

案例：

 

 

 

 

扩展

http://mishengqiang.com/sweetalert/

http://www.mb5u.com/jscode/html/ajax/426_artDialog2_0_4/

http://www.jq22.com/yanshi3388

 

日历组件-laydate

网站：

http://www.layui.com/laydate/

 

 

效果

 

 

 

扩展-mydate97

http://www.my97.net/demo/index.htm

 

分页组件-laypage

网站：

http://www.layui.com/demo/laypage.html

 

布局：

 

 

 

前端代码：

 

 

后端代码：

 

 

效果

 

 

 

扩展

https://www.zhangxinxu.com/wordpress/2010/01/jquery-pagination-ajax%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB%B6%E4%B8%AD%E6%96%87%E8%AF%A6%E8%A7%A3/

 

 

 

周边生态圈

基于layui框架研发出了很多的成熟的产品，例如 layadmin、layIM、xadmin等。

 

layadmin网站：

http://www.layui.com/admin/

 

layim网站：

http://layim.layui.com/

 

xadmin网站：

http://x.xuebingsi.com/

 

 

http://blog.sina.com.cn/s/blog_3f5edcfb0102x0ab.html?tj=1

 

 

 

扩展-数据库操作

1. mysql
2. mysqli
3. mysql-pdo
4. medoo