【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 ...

随机推荐

2024-06-08：用go语言，给定三个正整数 n、x和y，表示城市中的房屋数量以及编号为x和y的两个特殊房屋。在这座城市中，房屋通过街道相连。对于每个编号i（1 ＜= i ＜ n），存在一条
2024-06-08:用go语言,给定三个正整数 n.x和y, 表示城市中的房屋数量以及编号为x和y的两个特殊房屋. 在这座城市中,房屋通过街道相连.对于每个编号i(1 <= i < n) ...
解决git 区分文件名大小写
问题:两人协作开发同一分支时,由于一方将组件文件名小写开头,并且推送到远程分支,导致我每次拉取代码会将我本地文件名改成小写,并且我手动改成大写后推送到远端仓库,远端仓库文件名无变化,还是小写. 查证后 ...
向Web服务器端上传文件
server.py import flaskapp = flask.Flask(__name__)@app.route('/upload', methods=['POST'])def uploadFi ...
.NET使用原生方法实现文件压缩和解压
前言在.NET中实现文件或文件目录压缩和解压可以通过多种方式来完成,包括使用原生方法(System.IO.Compression命名空间中的类)和第三方库(如:SharpZipLib.SharpCo ...
Linux 下使用Java连接MySQL数据库，并且实现插入、删除、选择操作
实验环境: OS : CentOS5.5 (Linux) IDE : Eclipse DBMS : MySQL 准备工作: 1.安装 MySql . 详见http://www.cnblogs.com/ ...
震撼登场，全国产RK3588J工业核心板，让您的产品更具特色！八核2.4GHz！
RK3588J全国产工业核心板10月正式出售如需预定,请与创龙科技联系. 更多详情,请登录创龙科技天猫旗舰店. 瑞芯微RK3568J.RK3588J技术交流QQ群:567208221,欢迎加入!
【资料分享】RK3568核心板规格书（4x ARM Cortex-A55(64bit)，主频1.8GHz）
1 核心板简介创龙科技SOM-TL3568是一款基于瑞芯微RK3568J/RK3568B2处理器设计的四核ARM Cortex-A55全国产工业核心板,每核主频高达1.8GHz/2.0GHz.核心板 ...
SQLCel匹配原数据信息，更新原数据所有信息并插入新数据的过程
使用SQLCel高效率(速度快,数据完整)的解决了我领导提的问题 "如何更新数据库中原有的数据并插入新的订单数据" 过程如下: 思路:使用字段匹配和修改字段即可解决问题,用时3分钟 ...
【规范】Git分支管理，看看我司是咋整的
前言缘由 Git分支管理好,走到哪里都是宝事情起因: 最近翻看博客中小伙伴评论时,发现文章[规范]看看人家Git提交描述,那叫一个规矩一条回复: 本狗亲测在我司中使用规范的好处,遂把我司的Git分 ...
.Net Core WebApi 使用 JWT 验证身份
.h2 { background-color: rgba(78, 110, 242, 1); color: rgba(255, 255, 255, 1); padding: 10px } 一.注册身份 ...