jsp中jquery与layui的使用LayUI 极易上手拿来即用的前端 UI 框架

简介

Layui，是 sentsin 在 Github 上开源的一款采取自身模块规范编写的前端 UI 框架，仓库位于 https://github.com/sentsin/layui（https://gitee.com/sentsin/layui），目前版本为 2.6.5。

Layui 采取自身模块规范编写的前端 UI 框架，遵照原生 HTML/CSS/JS 的开拓办法，极易上手，拿来即用。
其

jsp中jquery与layui的使用LayUI 极易上手拿来即用的前端 UI 框架 JavaScript

风格简约轻盈，而组件优雅丰盈，从源代码到利用方法的每一处细节都经由精心雕琢，非常适宜网页界面的快速开拓差异于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。
更多是面向后端开拓者，你无需涉足前端各种工具，只需面对浏览器本身，让统统你所须要的元素与交互，从这里信手拈来

layui

利用

差异于主流的前端框架，Layui 不依赖于 NPM 和 Yarn 等进行管理，只须要下载 layui，然后把其支配到静态资源项目目录，并引入下述文件：

./layui/css/layui.css./layui/layui.js

即可进行开拓。
Layui 项目的构造如下：

├─css //css目录 │ │─modules //模块 css 目录（一样平常如果模块相对较大，我们会单独提取，如下：） │ │ ├─laydate │ │ └─layer │ └─layui.css //核心样式文件 ├─font //字体图标目录 └─layui.js //核心库

也可以利用 CDN 引入：

<link rel="stylesheet" href="//unpkg.com/layui@2.6.5/dist/css/layui.css"> <script src="//unpkg.com/layui@2.6.5/dist/layui.js">

当然，利用 NPM 下载也是可以的：

npm i layui

layui 兼容市情上的全部浏览器（IE6/7除外），可作为 Web 界面速成开拓方案。

我们来看一个基本的 Layui 利用例子：

<!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>  <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>

如果熟习 jQuery 时期的前端开拓的话，相信你不会对这种形式感到陌生。
在这个例子中，我们编写了一个最大略的 HTML 文件，引入 Layui 供应的 CSS 样式文件和 JS 库，并直策应用 script tag 进行初始化利用。

一个 layui 模块是这样定义的：

//layui 模块的定义（新 js 文件）layui.define([mods], function(exports){ //…… exports('mod', api);}); //layui 模块的利用layui.use(['mod1', 'mod2'], function(args){ var mod = layui.mod1; //…… });

Layui 定义为「经典模块化」，避开当下 JS 社区的主流方案，试图以尽可能大略的办法去诠释高效。
Layui 具备早前 AMD 的影子，又并非受限于 CommonJS 的那些条条框框，layui 认为这种轻量的组织办法，比WebPack更符合绝大多数场景。
以是坚持采取经典模块化，也正是能让人避开工具的繁芜配置，回归大略，安静高效地编织原生态的 HTML/CSS/JS。

但是 layui 又并非是 RequireJS 那样的模块加载器，而是一款 UI 办理方案，与 BootStrap 的不同又在于：layui 糅合了自身对经典模块化的理解。
这使得你可以在 layui 组织的框架之内，以更具可掩护性的代码、去更好的编织丰富的用户界面。

可以遵照 layui 的模块规范建立一个入口文件，并通过 layui.use() 办法来加载该入口文件，如下所示：

<script src="./layui/layui.js"></script> <script>layui.config({ base: '/res/js/modules/' //你存放新模块的目录，把稳，不是 layui 的模块目录}).use('index'); //加载入口</script>

上述的 index 即为你 /res/js/modules/ 目录下的 index.js，它的内容该当如下：

/ index.js 项目 JS 主入口以依赖 layui 的 layer 和 form 模块为例/ layui.define(['layer', 'form'], function(exports){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); exports('index', {}); //把稳，这里是模块输出的核心，模块名必须和 use 时的模块名同等});

Layui 供应了大量的页面元素和控件，基本席卷主流前端框架的所有元素。
Layui 供应栅格化的布局，利用相应式的行列模式：

<div class="layui-container"> 常规布局（以中型屏幕桌面为例）： <div class="layui-row"> <div class="layui-col-md9"> 你的内容 9/12 </div> <div class="layui-col-md3"> 你的内容 3/12 </div> </div> 移动设备、平板、桌面真个不同表现： <div class="layui-row"> <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> 移动：6/12 | 平板：6/12 | 桌面：4/12 </div> <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> 移动：6/12 | 平板：6/12 | 桌面：4/12 </div> <div class="layui-col-xs4 layui-col-sm12 layui-col-md4"> 移动：4/12 | 平板：12/12 | 桌面：4/12 </div> <div class="layui-col-xs4 layui-col-sm7 layui-col-md8"> 移动：4/12 | 平板：7/12 | 桌面：8/12 </div> <div class="layui-col-xs4 layui-col-sm5 layui-col-md4"> 移动：4/12 | 平板：5/12 | 桌面：4/12 </div> </div></div>

栅格化布局

Layui 供应了都雅强大的表单

<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> ...

表单

Layui 供应了利用方便的数据表格，可以智能地从数据渲染出都雅的表格：

layui.use('table', function(){ var table = layui.table; //第一个实例 table.render({ elem: '#demo' ,height: 312 ,url: '/demo/table/user/' //数据接口 ,page: true //开启分页 ,cols: [[ //表头 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} ,{field: 'username', title: '用户名', width:80} ,{field: 'sex', title: '性别', width:80, sort: true} ,{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '署名', width: 177} ,{field: 'experience', title: '积分', width: 80, sort: true} ,{field: 'score', title: '评分', width: 80, sort: true} ,{field: 'classify', title: '职业', width: 80} ,{field: 'wealth', title: '财富', width: 135, sort: true} ]] }); });

表格

Layui 还实现了一个强大的模版引擎 laytpl，模板可与数据共存，这意味着可直接在模板中处理逻辑。

layui.use('laytpl', function(){ var laytpl = layui.laytpl; //直接解析字符 laytpl('{{ d.name }}是一位公猿').render({ name: '贤心' }, function(string){ console.log(string); //贤心是一位公猿 }); //你也可以采取下述同步写法，将 render 方法的回调函数剔除，可直接返回渲染好的字符 var string = laytpl('{{ d.name }}是一位公猿').render({ name: '贤心' }); console.log(string); //贤心是一位公猿 //如果模板较大，你也可以采取数据的写法，这样会比较直不雅观一些 laytpl([ '{{ d.name }}是一位公猿' ,'其它字符 {{ d.content }} 其它字符' ].join(''))});

总结

Layui 采纳了与当前主流的前端框架截然不同的思想，采取自身经典的模块化规范，并遵照原生 HTML/CSS/JS 的开拓办法，面向传统的浏览器开拓，但又有所不同，实现了更为强大、都雅、简洁的工具集。

Layui 极易上手，拿来即用,风格简约轻盈，组件优雅丰盈，非常适宜网页界面的快速开拓。
其更多是面向后端开拓者，你无需涉足前端各种工具，只需面对浏览器本身，让统统你所须要的元素与交互。

layui