【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 ...
随机推荐
- jquery的树状菜单
<body> <ul> <li>一级菜单 <ol> <li ...
- 闪迪SSD PLUS 128G CDM CrystalDiskMark
闪迪SSD PLUS 128G CDM CrystalDiskMark 4k 读取才11,大号U盘水平. -- 对比三星SATA SSD. ..
- java springboot 读取自定义配置文件
java springboot 读取自定义配置文件 application.properties.test.properties maven中引用 : <dependency> <g ...
- CentOS 7 Graylog 安装和卸载
CentOS 7 安装 Graylog #主体思路1.安装JDK8.2.安装mongodb.3.安装Elasticsearch,并修改elasticsearch.yml 文件 .4.安装Graylog ...
- Scrapy框架(五)--请求传参
在某些情况下,我们爬取的数据不在同一个页面中,例如,我们爬取一个电影网站,电影的名称,评分在一级页面,而要爬取的其他电影详情在其二级子页面中. 这时我们就需要用到请求传参. 请求传参的使用场景 当我们 ...
- 随机二次元图片API第二弹
Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` 随机二次元图片API第二弹 日期:2018-3-4 阿珏 ...
- svn服务端安装和使用
首先去官网下载安装包 点我下载 下载完了以后选择安装路径然后一直next就可以了 安装完了以后在开始菜单里面找到svn 打开 如何使用? 这里是创建代码管理的存储库 点击 repositories ...
- [flask]统一API响应格式
前言 在设计API返回内容时,通常需要与前端约定好API返回响应体内容的格式.这样方便前端进行数据反序列化时相应的解析处理,也方便其它服务调用.不同公司有不同的响应内容规范要求,这里以常见的JSON响 ...
- recastnavigation.Sample_TempObstacles代码注解 - rcBuildHeightfieldLayers
烘培代码在 rcBuildHeightfieldLayers 本质上是为每个tile生成高度上的不同layer 算法的关键是三层循环: for z 轴循环 for x 轴循环 for 高度span 循 ...
- pytest_terminal_summary重写收集测试报告并发送邮件，报错"Argument(s) {'Config'} are declared in the hookimpl but can not be found in the hookspec"
步骤: 1.conftest.py文件,重写pytest_terminal_summary(terminalreporter, exitstatus, config) 2.run执行pytest.ma ...