零基础学 layui 看这篇文章就够了

最新推荐文章于 2025-11-11 21:24:14 发布

原创最新推荐文章于 2025-11-11 21:24:14 发布 · 1.7k 阅读

8 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了layui的两大独立组件：layer弹出效果和laydate日期选择器。详细讲解了如何使用layer实现各种弹窗功能，包括普通弹窗、提示层和tips的结合应用。同时，对于laydate，阐述了不依赖jQuery的使用步骤，并提供了简单的日期选择器示例。最后，概述了layui的基本使用，包括图标、动画、按钮样式、表单、导航条、选项卡、进度条、面板、表格、轮播图和分页等。

零、layui有三大独立的组件：

在这里插入图片描述

一、 (独立组件之一)【layui弹出效果的网址】https://layer.layui.com/

在这里插入图片描述

以往的html，最最原始的

<form action="" method="post">
    用户名：<input type="text" value=""/><br/>
    密 码：<input type="password" value=""/><br/>
    <input type="button">
</form>

在这里插入图片描述

弹窗初体验以及使用layer的步骤

导入jquery-3.4.1.min.js
导入layer.js
导入弹窗功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="libs/jquery-3.4.1.min.js"></script><!--首先引入jquery-->
    <script src="layer/layer.js"></script><!--引入layer.js-->
    <!--一个弹窗功能-->
    <script type="text/javascript">
        layer.confirm('您是如何看待前端开发？', {
            btn: ['重要', '奇葩'] //按钮
        }, function () {
            layer.msg('的确很重要', {icon: 1});
        }, function () {
            layer.msg('也可以这样', {
                time: 20000, //20s后自动关闭
                btn: ['明白了', '知道了']
            });
        });
    </script>
</head>
<body>


</body>
</html>

在这里插入图片描述

普通加弹窗

在这里插入图片描述

利用layer组件的弹窗

在function中添加同样的代码。
当click事件发生的时候，运行。

在这里插入图片描述
单击按钮，有弹窗。

可以自己修改

单击问你个问题按钮。

单击奇葩如下结果。

提示层

单击，就出来提示层文字。
在这里插入图片描述

小提示弹窗。代码都在官网

在这里插入图片描述

将问题输入框失去焦点和tip结合

默认吸附到当前元素。

在这里插入图片描述
当输入框失去焦点，会弹出 tips

可以改变吸附位置。

当上面的文本框失去焦点 tips 吸附多行文本出现。

一个tips应用场景，校验输入是否符合规范，利用了js的正则判断。然后弹出提示信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="libs/jquery-3.4.1.min.js"></script><!--首先引入jquery-->
    <script src="layer/layer.js"></script><!--引入layer.js-->

    <script type="text/javascript">
        $(function () {
            $('#text').blur(function () {
                // 创建正则规则
                var reg = /^\d{6,20}$/;
                // 获得用户输入的内容
                var con = $(this).val();
                // 用正则去匹配内容
                var result = reg.test(con);
                if(result){
                    layer.tips('符合规则', '#text', {
                        tips: [1, '#3595CC'],
                        time: 4000
                    });
                }else {
                    layer.tips('应该是6-20位数字', '#text', {
                        tips: [1, '#3595CC'],
                        time: 4000
                    });
                }
            })
        })
    </script>

</head>
<body>
                    <input type="text" id="text"/>


</body>
</html>

在这里插入图片描述

二、(独立组件之二)laydate日期选择器

步骤：（不依赖jquery）

官网下载
导入laydate
使用即可

使用一下看看

官网查看代码：
在这里插入图片描述

在这里插入图片描述

再试试另一个

在这里插入图片描述

成功~
在这里插入图片描述

开整！layui

步骤

看官方文档：
在这里插入图片描述

基本步骤：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入css-->
    <link rel="stylesheet" href="layui/css/layui.css" />
    <!--引入js-->
    <script src="layui/layui.js" type="text/javascript"/>
    <script>
        layui.use(['layer','form'], function () {
            var layer = layui.layui, form = layui.form;
            //...
        })
    </script>

</head>
<body>

</body>
</html>