目前,在企业里,layui的应用还是比较广泛的,作为一款优秀的ui框架,开源,易用,社区活跃,这些优点都注定她已经成为国产开源软件中的佼佼者。特此一份入门教程贡献给大家,需要注意的是,请一定多关注官方文档,作者真的很良心,文档写的非常完善并且易读。
这是官网:https://www.layui.com/
开发文档:https://www.layui.com/doc/
先来看下Layui的介绍:
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
下载使用:
推荐 官网首页 下载到 layui 的最新版,它经过了自动化构建,更适合用于生产环境。下载后结构如图:
快速上手:获得 layui 后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:
./layui/css/layui.css
./layui/layui.js
没错,不用去管其它任何文件。因为他们(比如各模块)都是在最终使用的时候才会自动加载。这是一个基本的入门页面:
模块化方式(推荐):
推荐遵循 layui 的模块规范建立一个入口文件,并通过 layui.use() 方式来加载该入口文件,如下所示:
|
一个基本的表单:
代码如下:
<form class="layui-form" action=""> |
发送ajax异步请求:
Layui部分模块依赖jQuery(比如layer),但是你并不用去额外加载jQuery。Layui已经将jQuery最稳定的一个版本改为Layui的内部模块,当你去使用 layer 之类的模块时,它会首先判断你的页面是否已经引入了jQuery,如果没有,则加载内部的jQuery模块,如果有,则不会加载。
layui.use('layer', function(){ |
通过上面的阅读,你应该已经大致了解如何使用 layui 了,但真正用于项目远不止如此,你需要继续阅读后面的文档,以便我们进一步的使用。后续也会给大家带来更多的关于layui相关使用。