【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 ...
随机推荐
- 鸿蒙HarmonyOS实战-ArkTS语言基础类库（XML）
前言 数据传输的数据格式有以下几种常见的格式: JSON(JavaScript Object Notation):JSON是一种轻量级的数据交换格式,可读性高且易于解析.它使用键值对的方式表示数据,并 ...
- OSI七层网络模型和TCP/IP四层模型
OSI七层网络模型 OSI: 开放系统互连参考模型是ISO制定的一个用于计算机或通信系统间互联的标准体系 OSI七层模型功能: 物理层: 七层模型的最底层,主要是物理介质传输媒介(网线或者无线),在不 ...
- golang如何使用指针灵活操作内存？unsafe包原理解析
Hi 你好,我是k哥.一个大厂工作6年,还在继续搬砖的后端程序员. 我们都知道,C/C++提供了强大的万能指针void*,任何类型的指针都可以和万能指针相互转换.并且指针还可以进行加减等算数操作.那么 ...
- 是什么导致了客户端TCP连不上服务器？
这几年做了很多基于 GGTalk开源即时通讯系统 的定制开发项目,经常会碰到如下两个问题,分享出来,应该对大家会有所帮助: (1)定制开发完成后,在给客户部署GGTalk即时通讯服务端到正式的服务 ...
- B 站和小红书又又又崩了，罪魁祸首竟然又是他。。。
大家好,我是凌晨. 今天上午10点左右,我打开B站发现无法刷新视频列表和评论区,收藏夹和弹幕也均不可用. 原以为是手机网络问题,换网络重启手机都还是不行,第一时间打开微博,果然,B站崩了的新闻荣登榜首 ...
- 使用kafka作为生产者生产数据_到_hbase
配置文件: agent.sources = r1agent.sinks = k1agent.channels = c1 ## sources configagent.sources.r1.type = ...
- OpenStack 下 CentOS6.X 镜像网络初始化失败问题排查
问题表现 在我的 OpenStack 集群上迁移了一批老旧的镜像(从其他三方云平台过来的)发现这批镜像在使用 ConfigDrive 的方式注入配置初始化时无法对非首张网卡镜像初始化(后经过测试非 C ...
- 金蝶云·苍穹追光者开发大赛，点燃高校AI应用创新之火
在 2024 年的政府工作报告中,"人工智能 +" 行动被提出,标志着人工智能成为推动我国新质生产力发展的关键力量.与此同时,今年的高考作文有一道题目也聚焦于人工智能,再次凸显了这 ...
- spring-关于组件的注入及获取流程
一.组件注入的基本流程: 容器初始化: Spring应用启动时,会读取配置(如XML配置.注解配置等),并根据这些配置创建Bean定义(BeanDefinition). 根据Bean定义,Spring ...
- springboot异常解决
问题解决 问题解释 出现这个问题表示拦截器或控制器的某个请求处理方法返回了一个与请求路径相同的视图名称,导致视图解析器循环地尝试解析并渲染这个视图,从而引发循环视图路径的异常. 问题分析 原先的jav ...