Layui深入

1、代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>注册页面</title>
  <style>
      .container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
      }
      
      .register-form {
        background: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      }
      
      h2 {
        text-align: center;
        margin-bottom: 20px;
      }
      
      .form-group {
        margin-bottom: 20px;
      }
      
      label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
      }
      
      input[type="text"],
      input[type="email"],
      input[type="password"],
      select {
        display: block;
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        border: none;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
        font-size: 16px;
        margin-top: 5px;
      }
      
      input[type="checkbox"] {
        margin-right: 10px;
      }
      
      input[type="submit"] {
        background: #007bff;
        color: #fff;
        padding: 10px;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
      }
      
      input[type="submit"]:hover {
        background: #0062cc;
      }
      
      a {
        color: #007bff;
        text-decoration: none;
      }
      
      a:hover {
        text-decoration: underline;
      }

  </style>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
</head>
<body>
 
    <div class="container">
      <form class="register-form">
        <h2>注册</h2>
        <div class="form-group">
          <label for="username">用户名</label>
          <input type="text" id="username" name="username" required>
        </div>
        <div class="form-group">
          <label for="email">邮箱</label>
          <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input type="password" id="password" name="password" required>
        </div>
        <div class="form-group">
          <label for="confirm-password">确认密码</label>
          <input type="password" id="confirm-password" name="confirm-password" required>
        </div>
        <div class="form-group">
          <label for="gender">性别</label>
          <select id="gender" name="gender">
            <option value="male">男</option>
            <option value="female">女</option>
          </select>
        </div>
        <div class="form-group">
          <label for="agree-to-terms">我同意 <a href="#">Lyui注册条款</a></label>
          <input type="checkbox" id="agree-to-terms" name="agree-to-terms" required>
        </div>
        <input type="submit" value="注册">
      </form>
    </div>

<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
  layui.use('form', function(){
    var form = layui.form;
    
    //监听提交
    form.on('submit(formDemo)', function(data){
      layer.msg(JSON.stringify(data.field));
      return false;
    });
  });
</script>
 
</body>
</html>

效果图：

2、代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Layui弹出层</title>
  <style>
      .layui-container{
        max-width: 1200px;
        margin: 0 auto;
      }
      .layui-form-item{
        margin-bottom: 20px;
      }

  </style>
  <link rel="stylesheet" href="https://cdn.bootcss.com/layui/2.5.6/css/layui.css">
</head>
<body>

<div class="layui-container" style="margin-top: 30px;">
  <div class="layui-row">
    <div class="layui-col-md12">
      <button class="layui-btn" id="btn-layer">点击弹出层</button>
    </div>
  </div>
</div>

<!-- 弹出层模板 -->
<div id="layer-template" style="display:none;">
  <div class="layui-form-item">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-block">
      <input type="text" name="username" placeholder="请输入姓名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">年龄</label>
    <div class="layui-input-block">
      <input type="text" name="age" placeholder="请输入年龄" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="form-demo">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layui/2.5.6/layui.js"></script>
<script>

//点击弹出层按钮
$('#btn-layer').click(function(){
  layer.open({
    type: 1,
    title: '请输入个人信息',
    area: ['500px', '300px'],
    content: $('#layer-template').html()
  });
});

//监听表单提交事件
layui.use('form', function(){
  var form = layui.form;
  form.on('submit(form-demo)', function(data){
    layer.msg('提交成功！');
    return false;
  });
});

</script>
</body>
</html>

效果图：

3、代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui弹出层示例</title>
    <style>
        /* 自定义对话框的样式 */
        .layui-layer-demo .layui-layer-btn{
            text-align: center;
            margin-top: 15px;
        }

    </style>
    <link rel="stylesheet" href="//cdn.bootcss.com/layui/2.5.6/css/layui.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/5.11.2/css/all.min.css">
</head>
<body>

<div class="container">
    <br>
    <div class="row">
        <div class="col-sm-6">
            <button class="layui-btn layui-btn-normal" οnclick="showMsg()">普通提示框</button>
            <button class="layui-btn layui-btn-normal" οnclick="showConfirm()">确认框</button>
            <button class="layui-btn layui-btn-normal" οnclick="showDialog()">自定义对话框</button>
        </div>
    </div>
</div>

<script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/layui/2.5.6/layui.min.js"></script>
<script src="//cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
<script src="//cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js"></script>

<script>
    //普通提示框
    function showMsg(){
        layer.msg('Hello World!');
    }

    //确认框
    function showConfirm(){
        layer.confirm('您确定要删除吗？', {
            icon: 3,
            title: '提示'
        }, function(index){
            layer.close(index);
            //此处调用删除函数
            console.log('删除操作');
        });
    }

    //自定义对话框
    function showDialog(){
        layer.open({
            type: 1,
            title: '自定义对话框',
            skin: 'layui-layer-demo',
            area: ['500px', '300px'],
            content: $('#dialog'),
            btn: ['确定', '取消'],
            yes: function(index, layero){
                //提交表单
                $('#form').ajaxSubmit({
                    success: function(data){
                        console.log(data);
                        layer.msg(data.message);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown){
                        console.log(XMLHttpRequest);
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                });
                layer.close(index);
            },
            btn2: function(index, layero){
                layer.close(index);
            },
            cancel: function(){
                layer.msg('已取消');
            }
        });
    }

    layui.use(['layer'], function(){
        var layer = layui.layer;
    });
</script>

<!-- 自定义对话框 -->
<div id="dialog" style="display: none;">
    <form id="form" action="submit.php" method="post">
        <div class="form-group">
            <label for="title">标题</label>
            <input type="text" class="form-control" id="title" name="title" placeholder="请输入标题">
        </div>
        <div class="form-group">
            <label for="content">内容</label>
            <textarea class="form-control" id="content" name="content" placeholder="请输入内容"></textarea>
        </div>
    </form>
</div>

</body>
<script>
    //使用layui弹出层
    layui.use(['layer'], function(){
        var layer = layui.layer;
    });
    
    //普通提示框
    function showMsg(){
        layer.msg('Hello World!');
    }
    
    //确认框
    function showConfirm(){
        layer.confirm('您确定要删除吗？', {
            icon: 3,
            title: '提示'
        }, function(index){
            layer.close(index);
            //此处调用删除函数
            console.log('删除操作');
        });
    }
    
    //自定义对话框
    function showDialog(){
        layer.open({
            type: 1,
            title: '自定义对话框',
            skin: 'layui-layer-demo',
            area: ['500px', '300px'],
            content: $('#dialog'),
            btn: ['确定', '取消'],
            yes: function(index, layero){
                //提交表单
                $('#form').ajaxSubmit({
                    success: function(data){
                        console.log(data);
                        layer.msg(data.message);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown){
                        console.log(XMLHttpRequest);
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                });
                layer.close(index);
            },
            btn2: function(index, layero){
                layer.close(index);
            },
            cancel: function(){
                layer.msg('已取消');
            }
        });
    }

</script>
</html>

效果图：

这是三个按钮：

4、代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>年度销量</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/layui/2.5.6/css/layui.min.css">
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/layui/2.5.6/layui.min.js"></script>
    <script src="//cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>

    <script>
        layui.use(['element', 'layer'], function(){
            var element = layui.element;
            var layer = layui.layer;

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'Layui柱状图示例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        });
    </script>
</body>
</html>

效果图：

5、代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Layui选项卡示例</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/layui/2.5.6/css/layui.css" />
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/layui/2.5.6/layui.js"></script>
</head>

<body>

  <div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
      <li class="layui-this">选项卡1</li>
      <li>选项卡2</li>
      <li>选项卡3</li>
    </ul>
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">内容1</div>
      <div class="layui-tab-item">内容2</div>
      <div class="layui-tab-item">内容3</div>
    </div>
  </div>

</body>
    <script>
        layui.use('element', function() {
          var element = layui.element;
        
          //监听Tab切换，以改变地址hash值
          element.on('tab(tabDemo)', function(data) {
            location.hash = 'tab=' + this.getAttribute('lay-id');
          });
        
          //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
          var layid = location.hash.replace(/^#tab=/, '');
          element.tabChange('tabDemo', layid);
        });

    </script>
</html>

效果图：

6、代码图：

<!DOCTYPE html> <html>

<head> 
<meta charset="UTF-8"> 
<title>Layui弹出层选项卡</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css" /> 
    <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js">
        
    </script>
     </head>

<body>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md12">
                <button class="layui-btn" id="btn">打开弹出层</button> 
                </div>
                 </div>
                  </div>

<script>
    layui.use(['layer', 'jquery'], function () {
        var layer = layui.layer;
        var $ = layui.jquery;

        //弹出层选项卡
        function openTabLayer() {
            layer.open({
                type: 1,
                title: '弹出层选项卡',
                area: ['800px', '600px'],
                content: '<div class="layui-tab layui-tab-card">' +
                    '<ul class="layui-tab-title">' +
                    '<li class="layui-this">选项卡1</li>' +
                    '<li>选项卡2</li>' +
                    '<li>选项卡3</li>' +
                    '</ul>' +
                    '<div class="layui-tab-content">' +
                    '<div class="layui-tab-item layui-show">选项卡1的内容</div>' +
                    '<div class="layui-tab-item">选项卡2的内容</div>' +
                    '<div class="layui-tab-item">选项卡3的内容</div>' +
                    '</div>' +
                    '</div>'
            });
        }

        //按钮点击事件
        $('#btn').click(function () {
            openTabLayer();
        });
    });
</script>
</body>
</html>

效果图：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/240127.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Proxmox VE 安装 OpenWrt 配置旁路由教程

Proxmox VE 安装 OpenWrt 配置旁路由教程

话不多说&#xff0c;本篇文章将记录如何在 Proxmox VE 环境通过虚拟机安装 OpenWrt 配置旁路由的过程&#xff0c;仅做参考。 PVE 创建虚拟机 名称随意&#xff0c;GuestOS 选择 Linux&#xff0c;不使用任何 iso 镜像。&#xff08;记住你的 VMID&#xff09; 清空将要创建…
阅读更多...
超越边界：Mistral 7B挑战AI新标准，全面超越Llama 2 13B

超越边界：Mistral 7B挑战AI新标准，全面超越Llama 2 13B

引言 在人工智能领域&#xff0c;模型的性能一直是衡量其价值和应用潜力的关键指标。近日&#xff0c;一个新的里程碑被设立&#xff1a;Mistral AI发布了其最新模型Mistral 7B&#xff0c;它在众多基准测试中全面超越了Llama 2 13B模型&#xff0c;标志着AI技术的一个重大进步…
阅读更多...
python实现形态学建筑物指数MBI提取建筑物及数据获取

python实现形态学建筑物指数MBI提取建筑物及数据获取

前言 形态学建筑物指数MBI通过建立建筑物的隐式特征和形态学算子之间的关系进行建筑物的提取[1]。 原理 上图源自[2]。 实验数据 简单找了一张小图片&#xff1a; test.jpg 代码 为了支持遥感图像&#xff0c;读写数据函数都是利用GDAL写的。 import numpy as np import …
阅读更多...
静态路由的原理和配置

静态路由的原理和配置

一.路由器的工作原理 首先我们知道路由器是工作在网络层的&#xff0c;那就是三层设备。网络层的功能主要为&#xff1a;不同网段之间通信、最佳路径选择也就是逻辑地址&#xff08;ip地址&#xff09;寻址、转发数据。 1.路由器是什么 路由器是能将数据包转发到正确的目的地…
阅读更多...
【MySQL】MySQL数据库基础--什么是数据库/基本使用/MySQL架构/存储引擎

【MySQL】MySQL数据库基础--什么是数据库/基本使用/MySQL架构/存储引擎

文章目录 1.什么是数据库2.主流数据库3.基本使用3.1MySQL安装3.2连接服务器3.3服务器管理3.4服务器&#xff0c;数据库&#xff0c;表关系3.5使用案例3.6数据逻辑存储 4.MySQL架构5.SQL分类6.存储引擎6.1什么是存储引擎6.2查看存储引擎6.3存储引擎对比 1.什么是数据库 对于回答…
阅读更多...
【vue实战项目】通用管理系统：信息列表，信息的编辑和删除

【vue实战项目】通用管理系统：信息列表，信息的编辑和删除

本文为博主的vue实战小项目系列中的第七篇&#xff0c;很适合后端或者才入门的小伙伴看&#xff0c;一个前端项目从0到1的保姆级教学。前面的内容&#xff1a; 【vue实战项目】通用管理系统&#xff1a;登录页-CSDN博客 【vue实战项目】通用管理系统&#xff1a;封装token操作…
阅读更多...
Spring Boot 3 整合 Mybatis-Plus 动态数据源实现多数据源切换

Spring Boot 3 整合 Mybatis-Plus 动态数据源实现多数据源切换

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…
阅读更多...
Docker容器：Centos7搭建Docker镜像私服harbor

Docker容器：Centos7搭建Docker镜像私服harbor

目录 1、安装docker 1.1、前置条件 1.2、查看当前操作系统的内核版本 1.3、卸载旧版本(可选) 1.4、安装需要的软件包 1.5、设置yum安装源 1.6、查看docker可用版本 1.7、安装docker 1.8、开启docker服务 1.9、安装阿里云镜像加速器 1.10、设置docker开机自启 2、安…
阅读更多...
Linux驱动入门 —— LED点灯驱动程序

Linux驱动入门 —— LED点灯驱动程序

目录 IMX6ULL 的 GPIO 操作方法 GPIO 操作相关名词 IMX6ULL 的 GPIO 模块结构 GPIO 模块内部 读 GPIO​编辑 写 GPIO​编辑 LED 点灯驱动程序 字符设备驱动程序框架 编写驱动程序的步骤&#xff1a; 先编写驱动程序代码&#xff1a; 再编写测试程序代码&#xff1a;…
阅读更多...
神经网络是如何工作的？ | 京东云技术团队

神经网络是如何工作的？ | 京东云技术团队

作为一名程序员&#xff0c;我们习惯于去了解所使用工具、中间件的底层原理&#xff0c;本文则旨在帮助大家了解AI模型的底层机制&#xff0c;让大家在学习或应用各种大模型时更加得心应手&#xff0c;更加适合没有AI基础的小伙伴们。 一、GPT与神经网络的关系 GPT想必大家已…
阅读更多...
理解linux中反向映射与应用

理解linux中反向映射与应用

反向映射的作用是根据物理页&#xff0c;找到全部相关进程的vma。 主要有两个结构&#xff0c;anon_vma_chain链表&#xff0c;和 anon_vma->rb_root红黑树 打个不恰当的比喻&#xff1a;可以简单认为&#xff0c;红黑树是用来读的&#xff08;遍历找全部映射的vm_area&am…
阅读更多...
web服务器之——www服务器的基本配置

web服务器之——www服务器的基本配置

目录 一、www简介 1、什么是www 2、www所用的协议 3、WEB服务器 4、主要数据 5、浏览器 二、 网址及HTTP简介 1、HTTP协议请求的工作流程 三、www服务器的类型(静态网站&#xff08;HTML&#xff09;&#xff0c; 动态网站(jsp python,php,perl)) 1、 仅提供…
阅读更多...
python：五种算法（GA、OOA、DBO、SSA、PSO）求解23个测试函数（python代码）

python：五种算法（GA、OOA、DBO、SSA、PSO）求解23个测试函数（python代码）

一、五种算法简介 1、遗传算法GA 2、鱼鹰优化算法OOA 3、蜣螂优化算法DBO 4、麻雀搜索算法SSA 5、粒子群优化算法PSO 二、5种算法求解23个函数 &#xff08;1&#xff09;23个函数简介 参考文献&#xff1a; [1] Yao X, Liu Y, Lin G M. Evolutionary programming made…
阅读更多...
QT QIFW Windows下制作安装包(一)

QT QIFW Windows下制作安装包(一)

一、概述 1、QIFW是一款基于QT框架开发的跨平台安装框架。QIFW是QT Installer FrameWork的缩写&#xff0c;支持Windows、Linux和macos等多种平台。QIFW可以帮助开发者创建自己的安装程序&#xff0c;将它们打包到通用的安装包中&#xff0c;并提供可视化的界面进行安装。 2…
阅读更多...
『App自动化测试之Appium基础篇』| Desired Capabilities详解与使用

『App自动化测试之Appium基础篇』| Desired Capabilities详解与使用

App自动化测试之Appium基础篇』| Desired Capabilities详解与使用 1 关于appium driver2 安装appium driver3 安装Appium Python Client4 安装测试对象5 获取测试对象信息5.1 使用dumpsys5.2 使用AndroidKiller5.3 使用aapt 6 Capabilities详解6.1 Capabilities介绍6.2 automat…
阅读更多...
19-数据结构-查找-散列查找

19-数据结构-查找-散列查找

目录 一、散列查找结构思路图 二、哈希函数 三、解决冲突 1.开放地址法 1.1.线性探测法&#xff08;线性探测再散列法&#xff09; 1.2.平方探测法&#xff08;二次探测再散列&#xff09; 1.3.再散列法&#xff08;双散列法&#xff09; 2.拉链法 2.1简介 四、散列查…
阅读更多...
飞天使-linux操作的一些技巧与知识点3-http的工作原理

飞天使-linux操作的一些技巧与知识点3-http的工作原理

文章目录 http工作原理nginx的正向代理和反向代理的区别一个小技巧dig 命令巧用 http工作原理 http1.0 协议 使用的是短连接&#xff0c;建立一次tcp连接&#xff0c;发起一次http的请求&#xff0c;结束&#xff0c;tcp断开 http1.1 协议使用的是长连接&#xff0c;建立一次tc…
阅读更多...
【ARM Trace32(劳特巴赫) 使用介绍 13 -- Trace32 断点 Break 命令篇】

【ARM Trace32(劳特巴赫) 使用介绍 13 -- Trace32 断点 Break 命令篇】

文章目录 1. Break.Set1.1 TRACE32 Break1.1.1 Break命令控制CPU的暂停1.2 Break.Set 设置断点1.2.1 Trace32 程序断点1.2.2 读写断点1.2.2.1 变量被改写为特定值触发halt1.2.2.2 设定非值触发halt1.2.2.4 变量被特定函数改写触发halt1.2.3 使用C/C++语法设置断点条件1.2.4 使用…
阅读更多...
深入理解 SVG：开启向量图形的大门(下)

深入理解 SVG：开启向量图形的大门(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…
阅读更多...
AutoCAD输入命令突然显示 未知命令。按 F1查看帮助。

AutoCAD输入命令突然显示 未知命令。按 F1查看帮助。

CAD一直好的&#xff0c;突然坏了&#xff0c;不能输入命令了&#xff0c;其他功能正常。输入命令显示“未知命令XXX&#xff0c;按 F1 查看帮助。” 网上说的什么病毒&#xff0c;卸载重装等无效。结果发现输入的字符是全角的&#xff0c;不是半角的&#xff0c;就输入法的问…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站