【Layui】01 快速入门
【原生JavaScript 与 JQuery】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body> <button id="btn">一个问题</button> <script type="text/javascript">
document.getElementById("btn").onclick = function () {
alert("原始JS事件触发");
}
</script>
</body>
</html>
效果：
如果使用JQuery：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body> <button id="btn">一个问题</button> <script type="text/javascript">
$(function () {
$("#btn").click(function () {
alert("JQuery触发！");
});
});
</script>
</body>
</html>
效果：
【使用Layui】
首先需要导入Layui的资源，这是使用CDN连接：
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
然后声明Layui模块加载：
layui.use('layer', function(){
let layer = layui.layer;
});
使用Layer模块的方法调用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body> <button id="btn">按钮</button> <script type="text/javascript"> // 加载Layer模块
layui.use('layer', function(){
let layer = layui.layer;
}); $(function () {
$("#btn").click(function () {
layer.alert("这是layer的警告弹窗");
});
});
</script>
</body>
</html>
效果：
使用带有样式的弹窗：
<button id="btn">按钮</button>
<br>
<button id="btn2">按钮2</button> <script type="text/javascript">
// 加载Layer模块
layui.use('layer', function(){
let layer = layui.layer;
}); $(function () {
$("#btn").click(function () {
layer.alert("这是layer的警告弹窗");
}); //第三方扩展皮肤
$("#btn2").click(function () {
layer.alert('内容', {
icon: 1,
skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
});
});
});
</script>
效果：
确认框和消息框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body> <p> <button id="confirm-btn">确认</button> </p> <script type="text/javascript">
layui.use('layer', function(){
let layer = layui.layer;
}); $(function () {
// 询问框 / 确认框
$("#confirm-btn").click(function () {
layer.confirm('您是如何看待前端开发？', {
btn: ['重要','奇葩'] //按钮
}, function(){
layer.msg('的确很重要', {icon: 1}); // 消息框在3秒后关闭
}, function(){
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});
});
});
</script>
</body>
</html>
整个弹窗一类的案例演示都在这里：
https://layer.layui.com/
【LayDate】
下载LayDate组件：
https://www.layui.com/laydate/
使用组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./../Resource/laydate/laydate.js"></script> <!-- 改成你的路径 -->
</head>
<body> <input type="text" id="input-date">
<script>
//执行一个laydate实例
laydate.render({
elem: '#input-date' //指定元素
});
</script>
</body>
</html>
甚至不需要声明模块直接导包使用：
日期与时间的样式也非常多：
https://www.layui.com/laydate/
【Layui资源文件引用】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./../Resource/layui-v2.5.6/layui/css/layui.css">
<script type="text/javascript" src="./../Resource/layui-v2.5.6/layui/layui.js"></script>
</head>
<body> </body>
</html>
我们需要声明使用的模块：
例如开头使用的这个：
layui.use('layer', function(){
let layer = layui.layer;
});
Layui提供了这些模块：
弹出层 layer
日期与时间选择 laydate
即时通讯 layim
分页 laypage
模板引擎 laytpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
代码修饰器 code
常用的模块有这些【对后端来说。。。】
弹出层 layer
分页 laypage
数据表格 table
表单 form
文件上传 upload
树形组件 tree
日期与时间选择 laydate
声明的模块变量一一对应
例如我需要使用这些模块：就都写好一样的标识：
layui.use(['layer', 'form', 'table'], function () {
let layer = layui.layer;
let form = layui.form;
let table = layui.table;
});
【Layui】01 快速入门的更多相关文章
- MyBatis 学习总结 01 快速入门
本文测试源码下载地址: http://onl5wa4sd.bkt.clouddn.com/MyBatis0918.rar 一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级 ...
- 01快速入门-04-Map、Set和iterable（ES6）
1.Map 我们知道,在JS中其实对象的方式就跟Java中的Map极为相似,即键值对的方式.JS中,key必须是字符串,实际上Number等值作为key也是合理的,所以为了解决这个问题,在最新的ES6 ...
- [Android应用开发] 01.快速入门
前言 这一篇,主要是把之前[安卓基础]系列的东西,做一个总结和补充.并举了两个例子:电话拨号器.短信发送器做巩固,在此也参考了黑马训练营的教学大纲. Android项目的目录结构 Activity:应 ...
- AngularJS快速入门指南01：导言
AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...
- Nginx快速入门菜鸟笔记
Nginx快速入门-菜鸟笔记 1.编译安装nginx 编译安装nginx 必须先安装pcre库. (1)uname -a 确定环境 Linux localhost.localdomain 2.6. ...
- AngularJS快速入门指南02：介绍
AngularJS是一个JavaScript框架.它可以通过<script>标记被添加到HTML页面中. AngularJS通过指令对HTML属性进行了扩展,然后通过表达式将数据绑定到HT ...
- Yacc 与 Lex 快速入门
Yacc 与 Lex 快速入门 Lex 与 Yacc 介绍 Lex 和 Yacc 是 UNIX 两个非常重要的.功能强大的工具.事实上,如果你熟练掌握 Lex 和 Yacc 的话,它们的强大功能使创建 ...
- SpringMvc_快速入门,深入分析
目录 一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明 ...
- Spring MVC 教程,快速入门,深入分析
http://elf8848.iteye.com/blog/875830/ Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门 资源下载: ...
- Spring_MVC_教程_快速入门_深入分析
Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门 资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...
随机推荐
- WIN11 WINDOWS 11 INTEL 12-13代大小核默认调度策略
WIN11 WINDOWS 11 INTEL 12-13代大小核默认调度策略 生效的异类策略:使用异类策略0. 异类线程调度策略:自动. 异类短运行线程调度策略:自动.
- k8s搭建安装 Harbor 私有镜像仓库（本地仓库，内网仓库）
主要参考 https://www.cnblogs.com/wangzy-Zj/p/14011228.html 额外: 1.如果 harbor.yml中的域名和openssl 生成的不一致,你改了hos ...
- 微软新Edge浏览器 WIN7 无法登录
由于设备上的系统组件过期,不支持登录.请确保 Windows 为最新版本,然后重新尝试登录.访问 https://go.microsoft.com/fwlink/?linkid=2107246 了解详 ...
- 漫画图解 Go 并发编程之：Channel
当谈到并发时,许多编程语言都采用共享内存/状态模型.然而,Go 通过实现 Communicating Sequential Processes(CSP)而与众不同.在 CSP 中,程序由不共享状态的并 ...
- vs2019安装使用Python3.9教程
现在vs2019只支持到Python3.7,如果要使用3.9,需要自己下载Python3.9的包 步骤: 一.在开始菜单中找到Microsoft Store搜索"Python3.9" ...
- undefined，null 和 undeclared 有什么区别？
a.null表示"没有对象",即该处不应该有值,转为数值时为0.典型用法是:作为函数的参数,表示该函数的参数不是对象.作 为对象原型链的终点. b.undefined表 ...
- LocalDateTime日期格式化和指定日期的时分秒
LocalDateTime日期格式化和指定日期的时分秒 package com.example.core.mydemo.date; import java.time.LocalDate; import ...
- #Powerbi 1分钟学会，SUMMARIZE函数，分组汇总并新建表
今天我们来学习一个新的表函数,SUMMARIZE函数是DAX中的一个函数,它可以根据一列或多列对数据进行分组,并且可以使用指定的表达式为汇总后的表添加新列,形成一张新表. 一:基础语法 SUMMARI ...
- 记一次 MatPlotLib 报错及解决方案：AttributeError: module 'matplotlib.cbook' has no attribute '_Stack'
记一次 MatPlotLib 报错及解决方案 目录 记一次 MatPlotLib 报错及解决方案 解决方法 具体发生了什么 报错 log 1 内容 报错 log 2 内容 最近出现 MatPlotLi ...
- 一文学完所有的Hive Sql（两万字最全详解）
Hive Sql 大全 本文基本涵盖了Hive日常使用的所有SQL,因为SQL太多,所以将SQL进行了如下分类: 一.DDL语句(数据定义语句): 对数据库的操作:包含创建.修改数据库 对数据表的操作 ...