<p align=center>
<a href="http://www.layui.com">
<img src="https://sentsin.gitee.io/res/images/layui/layui.png" alt="layui" width="360">
</a>
</p>
<p align=center>
Classic modular front-end UI framework
</p>
<p align="center">
<a href="https://travis-ci.org/sentsin/layui"><img alt="Build Status" src="https://img.shields.io/travis/sentsin/layui/master.svg"></a>
<a href="https://saucelabs.com/beta/builds/7e6196205e4f492496203388fc003b65"><img src="https://saucelabs.com/buildstatus/layui" alt="Build Status"></a>
<a href="https://coveralls.io/r/sentsin/layui?branch=master"><img alt="Test Coverage" src="https://img.shields.io/coveralls/sentsin/layui/master.svg"></a>
</p>
<p align="center">
<a href="https://saucelabs.com/beta/builds/7e6196205e4f492496203388fc003b65"><img src="https://saucelabs.com/browser-matrix/layui.svg" alt="Browser Matrix"></a>
</p>
---
layui 是一款采用自身模块规范编写的情怀型前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于MVVM底层的UI框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
## 返璞归真
layui 定义为“经典模块化”,并非是自吹她自身有多优秀,而是有意避开当下JS社区的主流方案,试图以最简单的方式去诠释高效!<em>她的所谓经典,是在于对返璞归真的执念</em>,她以当前浏览器普通认可的方式去组织模块!我们认为,这恰是符合当下国内绝大多数程序员从旧时代过渡到未来新标准的最佳指引。所以 layui 本身也并不是完全遵循于AMD时代,准确地说,她试图建立自己的模式,所以你会看到:
```js
//layui模块的定义
layui.define([mods], function(exports){
//……
exports('mod', api);
});
//layui模块的使用
layui.use(['mod1', 'mod2'], function(args){
var mod = layui.mod1;
//……
});
```
没错,她具备AMD的影子,又并非受限于commonjs的那些条条框框,layui 认为这种轻量的组织方式,比WebPack更符合绝大多数场景。所以她坚持采用经典模块化,也正是能让人避开工具的复杂配置,回归简单,安静高效地撸一会原生态的HTML、CSS、JavaScript。
但是 layui 又并非是Requirejs那样的模块加载器,而是一款UI解决方案,她与Bootstrap最大的不同恰恰在于她糅合了自身对经典模块化的理解。
## 快速上手
获得 layui 后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:
```
./layui/css/layui.css
./layui/layui.js //提示:如果是采用非模块化方式(最下面有讲解),此处可换成:./layui/layui.all.js
```
不用去管其它任何文件。因为他们(比如各模块)都是在最终使用的时候才会自动加载。这是一个基本的入门页面:
```html
<!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>
```
如果你想采用非模块化方式(即所有模块一次性加载,尽管我们并不推荐你这么做),你也可以按照下面的方式使用:
```html
<!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.all.js"></script>
<script>
//由于模块都一次性加载,因此不用执行 layui.use() 来加载对应模块,直接使用即可:
;!function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
}();
</script>
</body>
</html>
```
## [阅读文档](http://www.layui.com/)
从现在开始,尽情地拥抱 layui 吧!但愿她能成为你长远的开发伴侣,化作你方寸屏幕前的亿万字节!
## 相关
[官网](http://www.layui.com/)、[更新日志](http://www.layui.com/doc/base/changelog.html)、[社区交流](http://fly.layui.com)
没有合适的资源?快使用搜索试试~ 我知道了~
管理系统系列--企业知识库管理系统.zip
共878个文件
gif:213个
png:169个
js:120个
需积分: 5 2 下载量 9 浏览量
2024-02-26
01:28:34
上传
评论
收藏 25.01MB ZIP 举报
温馨提示
管理系统系列--企业知识库管理系统
资源推荐
资源详情
资源评论
收起资源包目录
管理系统系列--企业知识库管理系统.zip (878个子文件)
3.0.3 0B
amazeui.flat.css 325KB
amazeui.css 324KB
amazeui.flat.min.css 250KB
amazeui.min.css 249KB
bootstrap.css 120KB
bootstrap.min.css 97KB
layui.css 68KB
font-awesome.css 37KB
font-awesome.min.css 30KB
default.css 20KB
bootstrap-theme.css 14KB
layer.css 14KB
bootstrap-theme.min.css 13KB
layui.mobile.css 11KB
layui.mobile.css 10KB
laydate.css 7KB
shCoreDefault.css 7KB
admin.css 5KB
qq.css 3KB
simple.css 2KB
code.css 1KB
prettify.css 960B
webuploader.css 515B
app.css 23B
pncrt.dll 272KB
drv43260.dll 212KB
pthreadGC2.dll 86KB
fontawesome-webfont.eot 162KB
fontawesome-webfont.eot 75KB
iconfont.eot 40KB
iconfont.eot 40KB
glyphicons-halflings-regular.eot 20KB
ffplay.exe 7.94MB
ffmpeg.exe 7.58MB
mencoder.exe 7.52MB
UEditorSnapscreen.exe 508KB
static.gif 35KB
35.gif 13KB
42.gif 13KB
59.gif 10KB
40.gif 10KB
22.gif 10KB
18.gif 8KB
19.gif 8KB
24.gif 8KB
13.gif 7KB
32.gif 7KB
16.gif 7KB
39.gif 6KB
64.gif 6KB
64.gif 6KB
49.gif 6KB
63.gif 6KB
50.gif 6KB
29.gif 6KB
loading-0.gif 6KB
4.gif 6KB
1.gif 5KB
42.gif 5KB
71.gif 5KB
97.gif 5KB
65.gif 5KB
21.gif 5KB
21.gif 5KB
31.gif 5KB
46.gif 5KB
20.gif 5KB
57.gif 5KB
29.gif 5KB
29.gif 5KB
45.gif 5KB
8.gif 5KB
70.gif 4KB
5.gif 4KB
5.gif 4KB
17.gif 4KB
27.gif 4KB
43.gif 4KB
33.gif 4KB
9.gif 4KB
68.gif 4KB
44.gif 4KB
11.gif 4KB
11.gif 4KB
8.gif 4KB
3.gif 4KB
26.gif 4KB
14.gif 4KB
7.gif 4KB
23.gif 4KB
51.gif 4KB
34.gif 4KB
47.gif 4KB
72.gif 4KB
41.gif 4KB
38.gif 4KB
65.gif 3KB
6.gif 3KB
32.gif 3KB
共 878 条
- 1
- 2
- 3
- 4
- 5
- 6
- 9
资源评论
Kwan的解忧杂货铺
- 粉丝: 1w+
- 资源: 3661
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功