Layui使用入门教程

获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件：

./layui/css/layui.css
./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

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

<!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需要先加载模块使用，上述代码中就是预先加载模块！如果首先不加载模块就直接layer. 使用的话运行时是会报错的！找不到layer该对象或者找不到方法等其他问题！

layui.use(['layer', 'form'], function(){var layer = layui.layer,form = layui.form;
});

下面是我使用的代码案例：
调用layui：

    <!--layui--><link href="/libs/layui/css/layui.css" rel="stylesheet" type="text/css"/><script src="/libs/layui/layui.js" type="text/javascript"></script>

预先加载：

//layui layer
let layuiLayer;
//layui预先加载
layui.use(['layer'], function () {layuiLayer = layui.layer;
});

使用layui对象：

  layuiLayer.open({title: '提示',content: '请输入名字！'})

Layui使用入门教程相关推荐

layui引入php项目,Layui使用入门教程
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.非常适合界面的快速开发. 获得 layui 后,将其完 ...
layui个人中心html,Layui的简易入门教程
layui是一款采用自身模块规范编写的前端UI框架,非常适合界面的快速开发.本篇文章给大家分享一下Layui的简易入门教程,介绍一下layui如何在你的项目中使用. 获得 layui 后,将其完整地部 ...
Kafka入门教程与详解
1 Kafka入门教程 1.1 消息队列(Message Queue) Message Queue消息传送系统提供传送服务.消息传送依赖于大量支持组件,这些组件负责处理连接服务.消息的路由和传送.持久 ...
【CV】Pytorch一小时入门教程-代码详解
目录一.关键部分代码分解 1.定义网络 2.损失函数(代价函数) 3.更新权值二.训练完整的分类器 1.数据处理 2. 训练模型(代码详解) CPU训练 GPU训练 CPU版本与GPU版本代码区别 ...
python tornado教程_Tornado 简单入门教程（零）——准备工作
前言: 这两天在学着用Python + Tornado +MongoDB来做Web开发(哈哈哈这个词好高端).学的过程中查阅了无数资料,也收获了一些经验,所以希望总结出一份简易入门教程供初学者参考.完 ...
python向量计算库教程_NumPy库入门教程：基础知识总结
原标题:NumPy库入门教程:基础知识总结视学算法 | 作者知乎专栏 | 来源 numpy可以说是 Python运用于人工智能和科学计算的一个重要基础,近段时间恰好学习了numpy,pandas, ...
mysql query browswer_MySQL数据库新特性之存储过程入门教程
MySQL数据库新特性之存储过程入门教程在MySQL 5中,终于引入了存储过程这一新特性,这将大大增强MYSQL的数据库处理能力.在本文中将指导读者快速掌握MySQL 5的存储过程的基本知识,带领用 ...
python tensorflow教程_TensorFlow入门教程TensorFlow 基本使用T
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 TensorFlow入门教程 TensorFlow 基本使用 TensorFlow官方中文教程 TensorFlow 的特点: 使用图 (graph) 来 ...
air调用java,AIR2.0入门教程:与Java应用交互
在之前的一篇文章中,我介绍了如何使用AIR2.0新增的NativeProcess类与本地进程进行交互和通讯,在那个例子里面我们使用了C++ 的代码,实际上只要是基于命令行的标准输入输出,AIR2.0的 ...

Layui使用入门教程

Layui使用入门教程相关推荐

最新文章

热门文章