目前,在企业里,layui的应用还是比较广泛的,作为一款优秀的ui框架,开源,易用,社区活跃,这些优点都注定她已经成为国产开源软件中的佼佼者。特此一份入门教程贡献给大家,需要注意的是,请一定多关注官方文档,作者真的很良心,文档写的非常完善并且易读。

这是官网:​​https://www.layui.com/​

layui入门_ui


开发文档:​​https://www.layui.com/doc/​

先来看下Layui的介绍:

layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

下载使用:

推荐 ​​官网首页​​ 下载到 layui 的最新版,它经过了自动化构建,更适合用于生产环境。下载后结构如图:

layui入门_javascript_02


快速上手:获得 layui 后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:



./layui/css/layui.css

./layui/layui.js



没错,不用去管其它任何文件。因为他们(比如各模块)都是在最终使用的时候才会自动加载。这是一个基本的入门页面:

模块化方式(推荐):

推荐遵循 layui 的模块规范建立一个入口文件,并通过 layui.use() 方式来加载该入口文件,如下所示:


<!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入门_ui_03


代码如下:


<form class="layui-form" action="">

<div class="layui-form-item">

<label class="layui-form-label">输入框</label>

<div class="layui-input-block">

<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

</div>

</div>

<div class="layui-form-item">

<label class="layui-form-label">密码框</label>

<div class="layui-input-inline">

<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">

</div>

<div class="layui-form-mid layui-word-aux">辅助文字</div>

</div>

<div class="layui-form-item">

<label class="layui-form-label">选择框</label>

<div class="layui-input-block">

<select name="city" lay-verify="required">

<option value=""></option>

<option value="0">北京</option>

<option value="1">上海</option>

<option value="2">广州</option>

<option value="3">深圳</option>

<option value="4">杭州</option>

</select>

</div>

</div>

<div class="layui-form-item">

<label class="layui-form-label">复选框</label>

<div class="layui-input-block">

<input type="checkbox" name="like[write]" title="写作">

<input type="checkbox" name="like[read]" title="阅读" checked>

<input type="checkbox" name="like[dai]" title="发呆">

</div>

</div>

<div class="layui-form-item">

<label class="layui-form-label">开关</label>

<div class="layui-input-block">

<input type="checkbox" name="switch" lay-skin="switch">

</div>

</div>

<div class="layui-form-item">

<label class="layui-form-label">单选框</label>

<div class="layui-input-block">

<input type="radio" name="sex" value="男" title="男">

<input type="radio" name="sex" value="女" title="女" checked>

</div>

</div>

<div class="layui-form-item layui-form-text">

<label class="layui-form-label">文本域</label>

<div class="layui-input-block">

<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>

</div>

</div>

<div class="layui-form-item">

<div class="layui-input-block">

<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>

<button type="reset" class="layui-btn layui-btn-primary">重置</button>

</div>

</div>

</form>



<script>

//Demo

layui.use('form', function(){

var form = layui.form;



//监听提交

form.on('submit(formDemo)', function(data){

layer.msg(JSON.stringify(data.field));

return false;

});

});

</script>


发送ajax异步请求:

Layui部分模块依赖jQuery(比如layer),但是你并不用去额外加载jQuery。Layui已经将jQuery最稳定的一个版本改为Layui的内部模块,当你去使用 layer 之类的模块时,它会首先判断你的页面是否已经引入了jQuery,如果没有,则加载内部的jQuery模块,如果有,则不会加载。


layui.use('layer', function(){

var $ = layui.$

,layer = layui.layer;

$.get('异步请求地址url',function (res) {

//回调得到数据进行下一步处理

})

});


通过上面的阅读,你应该已经大致了解如何使用 layui 了,但真正用于项目远不止如此,你需要继续阅读后面的文档,以便我们进一步的使用。后续也会给大家带来更多的关于layui相关使用。