Layui之入门

最新推荐文章于 2024-08-20 15:50:34 发布

周甘木

最新推荐文章于 2024-08-20 15:50:34 发布

阅读量176

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/m0_67864917/article/details/125673060

版权

这篇博客介绍了layui，一个流行的Web UI解决方案，包括layui的基本概念、如何入门使用，以及详细讲解了如何自定义layui模块。此外，还提到了layui在实现基本登录功能时涉及的实体类和工具类的创建。

摘要由CSDN通过智能技术生成

1.如何扩展一个layui(自定义模块) 参考模块规范

一：认识layUI

1.什么是layui：

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

layUI的网址（参考）

官方网站：https://www.layui.com/（已下线）
参考地址：http://layui.org.cn/demo/index.html（已下线，非官网）

2.layUI的入门

将layui下载到了本地，那么可将其完整地放置到你的项目目录（或静态资源服务器），并在页面中分别引入：

<link rel="stylesheet" href="xxx/layui.css">

<script src="xxx/layui.js"></script>

二：自定义模块

1.如何扩展一个layui(自定义模块) 参考模块规范

1）第一步:确认模块名，假设为：test.js文件放入项目任意目录下（注意：不用放入layui目录）

2）编写test.js

layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define('layer', callback);
var obj = {
hello: function(str){
alert('Hello '+ (str||'test'));
}
};

//输出test接口
exports('test', obj);
});

3）设定扩展模块所在的目录，然后就可以在别的JS文件中使用

layui.config({
base: '/res/js/' //假设这是test.js所在的目录
}).extend({ //设定模块别名
test: 'test' //如果test.js是在根目录，也可以不用设定别名
});

//使用test
layui.use('test', function(){
var test = layui.test;

test.hello('World!'); //弹出Hello World!
});

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loo