【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 ...
随机推荐
- 5 分钟小工具：使用 dive 分析 docker 镜像
需求 拿到一个镜像之后,我想知道: 分层查看镜像里都有哪些文件 各层使用了什么命令构建的这个镜像 镜像里比较大的文件有哪些(可能需要优化) dive 工具介绍 dive 工具可以做这些分析.dive ...
- 使用shell脚本在Linux中管理Java应用程序
目录 前言 一.目录结构 二.脚本实现 1. 脚本内容 2. 使用说明 2.1 配置脚本 2.2 脚本部署 2.3 操作你的Java应用 总结 前言 在日常开发和运维工作中,管理基于Java的应用程序 ...
- idea导入maven项目发现有jar或插件无法下载检查idea中的maven配置,maven配置文件中需配置阿里云的镜像地址
D:\apache-maven-3.2.3\conf\settings.xml <mirrors> <mirror> <id>nexus-public-snapsh ...
- Windows无法调节亮度
原因1:驱动问题 解决方式: 安装360驱动大师,一键安装. 也可以使用其他软件:如驱动精灵. 推荐使用电脑品牌本身的驱动软件:如联想:联想驱动管理 原因2:设备管理问题 解决方式: 计算机 -> ...
- LLM学习笔记
1. 评估榜单 1.1. C-Eval C-Eval 是一个全面的中文基础模型评估套件.它包含了13948个多项选择题,涵盖了52个不同的学科和四个难度级别. https://cevalbenchma ...
- arm 移植 lighttpd + CGI 配置
--- title: arm 移植 lighttpd + CGI 配置 EntryName: porting-lighttpd-on-arm-and-make-cgi-config date: 202 ...
- docker配置域名
先运行docker镜像 # 进入 docker 容器 mynginx 是容器名 docker exec -i -t mynginx /bin/bash #安装vim apt-get install v ...
- 继续我们的复习之路——webapi
前面断更几天是因为在住安心复习DOM BOM的内容 不得不说 还得是DOM 在这一章节的复习内容中 涌现出了很多又代表意义 经典的一些小案例 而且 还是有些难度的 有一两个我反正是自己独立完成不了 ...
- P9196 题解
来一份线性时间的题解. 考虑先解决前缀限制,显然可以直接把字符串和询问全部搬到 Trie 树上,问题就变成了查询一个子树内满足后缀限制的字符串数量. 接着考虑 Trie 树合并,具体地,把后缀限制以及 ...
- 【workerman】uniapp+thinkPHP5使用GatewayWorker实现实时通讯
前言 之前公司需要一个内部的通讯软件,就叫我做一个.通讯软件嘛,就离不开通讯了,然后我就想到了长连接.这里本人用的是GatewayWorker框架. 什么是GatewayWorker框架? Gatew ...