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

随机推荐

ts symbol 作为属性名
在 TypeScript 中,如果你希望在一个对象中使用某个 symbol 作为属性名,你必须使用中括号 [] 括起来,并在括号中放入该 symbol. 这是因为当你使用 symbol 作为属 ...
Redux之combineReducers方法
Redux 提供了一个combineReducers方法,用于 Reducer 的拆分.你只要定义各个子 Reducer 函数,然后用这个方法,将它们合成一个大的 Reducer. import { ...
Android Media Framework（三）OpenMAX API阅读与分析
这篇文章我们将聚焦Control API的功能与用法,为实现OMX Core.Component打下坚实的基础. 1.OMX_Core.h OMX Core在OpenMAX IL架构中的位置位于IL ...
vm ware 安装 ubuntu server linux
在:https://ubuntu.com/download/server 中下拉找到"Ubuntu Server 20.04 LTS",下载ISO. 在VM WARE 中,如果鼠标 ...
彻底解决C盘不够用的问题（Windows 10）- 常规方法——清垃圾、转虚拟内存、挪大文件
1.清垃圾 2.转虚拟内存 3.挪大文件
Libgdx游戏开发(4)——显示中文文字
原文: Libgdx游戏开发(4)--显示中文文字-Stars-One的杂货小窝本文代码示例采用kotlin代码进行讲解,且需要有libgdx入门基础这里主要介绍关于在Libgdx显示文字的2种方 ...
第一篇Scrum冲刺博客--原班人马打造队
0 项目地址点此进入 1 第一次开会/任务认领 1.1 第一次例会(2024.4.27) 第一次开会照片记录 1.2 开发认领在查看老师在实验报告中学长的博客给了我一定的启发,我在腾讯表格中创建了 ...
RHEL8.1---离线升级gcc
升级gcc到gcc9.1.0 下载离线包.放到/opt下 [root@172-18-251-35 opt]# wget http://ftp.gnu.org/gnu/gcc/gcc-9.1.0/gcc ...
云服务器通过内网穿透的方式ssh访问内网服务器
云服务器通过内网穿透的方式ssh访问内网服务器背景买了一台云服务器,了解到可以通过外部服务器连接到公司内部服务器. 为了加快办公的效率,配置了一下. 以Ubuntu为例. 原文(有删改):http ...
高通平台UEFI有关介绍
高通平台UEFI有关介绍背景我需要在高通平台上学习点亮LCD,目前通过同事在别的平台的配置代码,我已经将kernel部分的屏幕点亮了:剩余的工作量就在BP侧,也就是系统刚开机的那一段时间.在开发过 ...