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.hqwc.cn/news/269634.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Ubuntu20.04降低linux版本到5.4.0-26-generic

Ubuntu20.04降低linux版本到5.4.0-26-generic

前言 试用ubuntu20.04安装昇腾的驱动和cann的时&#xff0c;出现如下问题&#xff1a; (base) rootubuntu:/home/work# ./Ascend-hdk-910-npu-driver_23.0.rc3_linux-aarch64.run --full Verifying archive integrity... 100% SHA256 checksums are OK. All good. Uncompr…
阅读更多...
时序分解 | Matlab实现SSA-ICEEMDAN麻雀算法优化ICEEMDAN时间序列信号分解

时序分解 | Matlab实现SSA-ICEEMDAN麻雀算法优化ICEEMDAN时间序列信号分解

时序分解 | Matlab实现SSA-ICEEMDAN麻雀算法优化ICEEMDAN时间序列信号分解 目录 时序分解 | Matlab实现SSA-ICEEMDAN麻雀算法优化ICEEMDAN时间序列信号分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现SSA-ICEEMDAN麻雀算法优化ICEEMDAN时间序列信号分解 可…
阅读更多...
java版Spring Cloud+Spring Boot+Mybatis之隐私计算 FATE - 多分类神经网络算法测试

java版Spring Cloud+Spring Boot+Mybatis之隐私计算 FATE - 多分类神经网络算法测试

一、说明 本文分享基于 Fate 使用 横向联邦 神经网络算法 对 多分类 的数据进行 模型训练&#xff0c;并使用该模型对数据进行 多分类预测。 二分类算法&#xff1a;是指待预测的 label 标签的取值只有两种&#xff1b;直白来讲就是每个实例的可能类别只有两种 (0 或者 1)&…
阅读更多...
数据挖掘目标（客户价值分析）

数据挖掘目标（客户价值分析）

import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as snsIn [2]: datapd.read_csv(r../教师文件/air_data.csv)In [3]: data.head()Out[3]: Start_timeEnd_timeFareCityAgeFlight_countAvg_discountFlight_mileage02011/08/182014/0…
阅读更多...
打工人副业变现秘籍，某多/某手变现底层引擎-Stable Diffusion替换背景

打工人副业变现秘籍，某多/某手变现底层引擎-Stable Diffusion替换背景

在Stable Diffusion软件中，使用ControlNet+模型实现固定物体批量替换背景 出图的流程。 一、准备好图片 1.你需要准备好一些白底图或者透明底图用于训练模型。 2.你需要准备同样角度的其他背景色底图用于ControlNet勾线 3.注意检查你的图片尺寸，是否为1:1，…
阅读更多...
【STM32】DMA直接存储器存取

【STM32】DMA直接存储器存取

1 DMA简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 可以直接访问STM32的存储器的&#xff0c;包括运行SRAM、程序存储器Flash和寄存器等等 DMA可以提供外设寄存器和存储器或者存储器和存储器之间的高速数据传输&#xff0c;无须CPU干预&#xff0c;节…
阅读更多...
vue 集成行政区域选择插件region和数据回显

vue 集成行政区域选择插件region和数据回显

故事&#xff1a;最近&#xff0c;项目需要进行行政区域围栏的绘制&#xff0c;由于老旧项目是利用js保存全国行政区域地址和编码&#xff0c;在选择器select进行匹配显示&#xff0c;但此方法复杂&#xff0c;因此选择集成区域插件region 步骤一&#xff1a;用命令安装region…
阅读更多...
梳理一下嵌入式和单片机之间的关系

梳理一下嵌入式和单片机之间的关系

一定有很多人都听说过嵌入式和单片机&#xff0c;但在刚开始接触时&#xff0c;不知道大家有没有听说过嵌入式就是单片机这样的说法&#xff0c;其实嵌入式和单片机还是有区别的。单片机与嵌入式到底有什么关系&#xff1f; 下面我们就来说说嵌入式和单片机之间的联系和区别吧…
阅读更多...
K8S（二）—介绍

K8S（二）—介绍

K8S的整体结构图 k8s对象 在 Kubernetes 系统中&#xff0c;Kubernetes 对象是持久化的实体。 Kubernetes 使用这些实体去表示整个集群的状态。 具体而言&#xff0c;它们描述了如下信息&#xff1a; 哪些容器化应用正在运行&#xff08;以及在哪些节点上运行&#xff09;可…
阅读更多...
【大数据】Doris 架构

【大数据】Doris 架构

Doris 架构 Doris 的架构很简洁&#xff0c;只设 FE&#xff08;Frontend&#xff09;、BE&#xff08;Backend&#xff09;两种角色、两个进程&#xff0c;不依赖于外部组件&#xff0c;方便部署和运维&#xff0c;FE、BE 都可线性扩展。 ✅ Frontend&#xff08;FE&#xff0…
阅读更多...
Appium 自动化自学篇 —— 初识Appium自动化！

Appium 自动化自学篇 —— 初识Appium自动化！

Appium 简介 随着移动终端的普及&#xff0c;手机应用越来越多&#xff0c;也越来越重要。而作为测试 的我们也要与时俱进&#xff0c;努力学习手机 App 的相关测试&#xff0c;文章将介绍手机自动化测试框架 Appium 。 那究竟什么是 Appium 呢? 接下来我们一起来学习PythonS…
阅读更多...
西南交通大学【数电实验6---可控分频器设计】

西南交通大学【数电实验6---可控分频器设计】

一、实验电路图、状态图、程序代码、仿真代码、仿真波形图&#xff08;可以只写出核心功能代码&#xff0c;代码要有注释&#xff09; 不管sel为0或者1&#xff0c;clk_out[0]的频率都是不变的&#xff0c;故在always块当中&#xff0c;可优先对clk_out[0]进行处理&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023