

Layui(谐音,类UI),一款为服务端程序员量身定做的UI框架,采用原生的HTML/CSS/JS编写,体积轻盈,内容丰富。使用Layui后,一次性解决弹出层、日期插件、数据分页、表格、文件上传等常用模块。除此之外,layui兼容除IE6/7外的所有浏览器,可作为 PC端后台系统和前台界面的快速开发方案。
下载layui的三种方法
方法1:官网下载:https://www.layui.com/,解压后,文件夹结构如下:
├─css //css目录
│ │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
│ │ ├─laydate
│ │ ├─layer
│ │ └─code.css
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件
方法2:github官网下载:https://github.com/sentsin/layui/
方法3:npm下载,下载命令为 npm i layui-src
,不知道npm的同学可参考:到底什么是npm

Layui的两种加载方法
方法1:按模块加载layui.css+layui.js
,适用于线下开发环境,方便团队调试代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单模块加载</title>
<link rel="stylesheet" href="./layui-v2.5.5/layui/css/layui.css">
</head>
<body>
</body>
<script src="./layui-v2.5.5/layui/layui.js"></script>
<script>
;!function(){
//layui.use()加载模块
layui.use(['layer','form'],function(){
var layer=layui.layer;
layer.open({
title: '模块化加载'
,content: 'hello,layui'
});
});
}();
</script>
</html>
方法2:全模块加载layui.css+layui.all.js
,适用于线上环境,介绍请求静态资源的次数。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全模块加载</title>
<link rel="stylesheet" href="./layui-v2.5.5/layui/css/layui.css">
</head>
<body>
</body>
<script src="./layui-v2.5.5/layui/layui.all.js"></script>
<script>
// 无需再执行layui.use()方法加载模块,直接使用即可
;!function(){
var layer=layui.layer,form=layui.form;
layer.open({
title:"全模块加载",
content:"hello,layui"
});
}();
</script>
</html>
以上就是layui入门介绍的全部知识,在之后的文章中还会介绍如何使用开发中常用的表单模块、文件上传模块、分页模块等。
网友评论