Layui深入

news2024/11/16 1:33:48

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.coloradmin.cn/o/1303809.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

14-Kafka-Day02

14-Kafka-Day02

第 4 章 Kafka Broker 4.1 Kafka Broker 工作流程 4.1.1 Zookeeper 存储的 Kafka 信息 &#xff08;1&#xff09;启动 Zookeeper 客户端。 bin/zkCli.sh 因为你在配置kafka的时候指定了它的名字。 &#xff08;2&#xff09;通过 ls 命令可以查看 kafka 相关信息。 [zk: …
阅读更多...
InsCode实践分享：如何实现自动化代码审查和质量控制？

InsCode实践分享：如何实现自动化代码审查和质量控制？

文章目录 文章目录 概要 整体架构流程 InsCode的解释 技术展示 小结 概要 InsCode是一款面向中小型企业的代码审查和自动化质量控制工具。本文将分享如何使用InsCode来实现自动化代码审查和质量控制&#xff0c;帮助企业在代码开发和维护过程中降低风险&#xff0c;提高效率和…
阅读更多...
Java最全面试题专题---2、Java集合容器（1）

Java最全面试题专题---2、Java集合容器（1）

集合容器概述 什么是集合 **集合框架&#xff1a;**用于存储数据的容器。 集合框架是为表示和操作集合而规定的一种统一的标准的体系结构。 任何集合框架都包含三大块内容&#xff1a;对外的接口、接口的实现和对集合运算的算法。 **接口&#xff1a;**表示集合的抽象数据类…
阅读更多...
基于springboot实现的人力资源管理系统

基于springboot实现的人力资源管理系统

一、系统架构 前端&#xff1a;html | js | css | jquery | bootstrap 后端&#xff1a;springboot | mybatis 环境&#xff1a;jdk1.7 | mysql | maven 二、代码及数据库 三、功能介绍 01. 登录页 02. 首页 03. 员工管理 04. 奖惩管理 05. 合同管理 06. 薪酬管理 07.…
阅读更多...
Python从入门到精通五：Python函数

Python从入门到精通五：Python函数

函数介绍 学习目标&#xff1a; 快速体验函数的使用了解函数的作用 函数&#xff1a;是组织好的&#xff0c;可重复使用的&#xff0c;用来实现特定功能的代码段。 我们使用过的&#xff1a;input()、print()、str()、int()等都是Python的内置函数。 为什么要学习、使用函…
阅读更多...
WPS没保存关闭了怎么恢复数据？3个方法，完成数据恢复！

WPS没保存关闭了怎么恢复数据？3个方法，完成数据恢复！

“我今天在使用WPS时&#xff0c;突然有点急事出去了一趟&#xff0c;但是我忘记保存文档了&#xff0c;回来之后发现电脑自动关机了&#xff0c;我的文档也没了&#xff01;这可怎么办呢&#xff1f;有什么办法可以找回这些数据吗&#xff1f;” 在快节奏的工作中&#xff0c;…
阅读更多...
软件科技成果鉴定测试有什么好处?注意事项有哪些?

软件科技成果鉴定测试有什么好处?注意事项有哪些?

软件科技成果鉴定测试是指对软件科技成果进行检测和评估的过程。通过这个测试&#xff0c;可以评估软件科技成果的技术水平、功能性能以及可靠性&#xff0c;并为相关单位和个人提供科学的评价依据。 　　 一、进行软件科技成果鉴定测试有以下好处&#xff1a; 　　1、客观评价…
阅读更多...
专业的内外网文件摆渡系统，如何帮助企业提升协作效率？

专业的内外网文件摆渡系统，如何帮助企业提升协作效率？

伴随着全球数字化转型的持续深入&#xff0c;数字经济的蓬勃发展&#xff0c;数据资产已成为非常重要的生产要素。近年来&#xff0c;全球数据泄密事件频发&#xff0c;数据泄密事件的平均成本逐年攀升。考虑到业务安全需要&#xff0c;绝大多数企业会考虑网络隔离&#xff0c;…
阅读更多...
功能有更新 | Bonree ONE 权限版本新增环境、资源域、角色概念

功能有更新 | Bonree ONE 权限版本新增环境、资源域、角色概念

近期&#xff0c;博睿数据根据一体化智能可观测平台 Bonree ONE 产品本身&#xff0c;以及用户反馈进行持续的更新和优化。继第01期 RUM 增强 APP 端快照配置全量会话回放与自定义协议网络请求采集功能之后&#xff0c;以下为 Bonree ONE 产品功能更新报告第02期内容&#xff0…
阅读更多...
SpringCloud微服务（简略笔记二）

SpringCloud微服务（简略笔记二）

Docker 概念 docker和虚拟机的差异 * docker是一个系统进程&#xff1b;虚拟机是在操作系统中的操作系统 * docker体积小&#xff0c;启动速度&#xff0c;性能好&#xff0c;虚拟机体积大&#xff0c;启动速度慢&#xff0c;性能一般 镜像和容器 镜像&#xff08;image&…
阅读更多...
QT 基础篇

QT 基础篇

目录 QPushButton QT帮助文档 QT 对象树 QPushButton QPushButton是Qt图形界面控件中的一种&#xff0c;看英文的意思&#xff0c;他就是按钮&#xff0c;是最基本的图形控件之一。在我们的最基本的项目中&#xff0c;运行: 是一个空白的窗体&#xff0c;里面什么也没有&am…
阅读更多...
LED透镜粘接UV胶是一种特殊的UV固化胶

LED透镜粘接UV胶是一种特殊的UV固化胶

LED透镜粘接UV胶是一种特殊的UV固化胶&#xff0c;用于固定和粘合LED透镜。 它具有以下特点&#xff1a; 1. 高透明度&#xff1a;LED透镜粘接UV胶具有高透明度&#xff0c;可以确保光线的透过性&#xff0c;不影响LED的亮度和效果。 2. 快速固化&#xff1a;经过UV紫外线照射…
阅读更多...
ICC2：low power与pg strategy（pg_std_cell_conn）

ICC2：low power与pg strategy（pg_std_cell_conn）

我正在「拾陆楼」和朋友们讨论有趣的话题，你⼀起来吧？ 拾陆楼知识星球入口 以low power复杂设计为例，power rail是如何产生的: set pd_list{{DEFAULT_VA VDD_DIG VDD_DIG VSS} {PD_DSP VDD_DIG VDD_DSP VSS} } ;#两个电源域，DEFAULT_VA和PD_DSP是对应voltage area名字，…
阅读更多...
【华为数据之道学习笔记】3-10元数据管理架构及策略

【华为数据之道学习笔记】3-10元数据管理架构及策略

元数据管理架构包括产生元数据、采集元数据、注册元数据和运 维元数据。 产生元数据&#xff1a; 制定元数据管理相关流程与规范的落地方案&#xff0c;在IT产品开发过程中实现业务元数据与技术元数据的连接。 采集元数据&#xff1a; 通过统一的元模型从各类IT系统中自动采集元…
阅读更多...
贪心算法：理论基础 分发饼干 摆动序列 最大子序和

贪心算法：理论基础 分发饼干 摆动序列 最大子序和

理论基础 什么是贪心算法&#xff1f; 贪心的本质是选择每一阶段的局部最优&#xff0c;从而达到全局最优。什么时候用贪心算法&#xff1f; 贪心算法并没有固定的套路。唯一的难点就是如何通过局部最优&#xff0c;推出整体最优。如何验证可不可以用贪心算法&#xff1f; 最…
阅读更多...
恢复出厂设置后在 Android 上恢复照片的 6 种常用方法

恢复出厂设置后在 Android 上恢复照片的 6 种常用方法

恢复出厂设置可帮助您删除电子设备的所有信息并将其恢复到原始系统状态。但是&#xff0c;如果您不小心按下了恢复出厂设置按钮并从 Android 设备中删除了所有难忘的照片&#xff0c;该怎么办&#xff1f;好吧&#xff0c;您无需担心&#xff0c;因为可以通过以下一些方法来恢复…
阅读更多...
ArkUI List组件

ArkUI List组件

我们在column中使用foreach循环渲染数据的时候&#xff0c;如果数据过多&#xff0c;超出屏幕高度&#xff0c;会出现隐藏的情况。 class Item {name: stringimage: ResourceStrprice: numberdiscount: numberconstructor(name: string, image: ResourceStr, price: number,dis…
阅读更多...
人人都能用的AI编程助手 CodeGeeX

人人都能用的AI编程助手 CodeGeeX

视频版&#xff1a;人人都能用的Ai编程助手——CodeGeeX 大家好&#xff0c;我是凌览。 现在距离 AI 大火已经快有一年啦&#xff0c;作为程序员可不得准备一款AI帮咱们干点活。本文分享一款 AI 工具 CodeGeeX&#xff0c;帮助大家提高一波学习和工作效率。 CodeGeeX 是什么…
阅读更多...
springcloud微服务篇--1.认识微服务

springcloud微服务篇--1.认识微服务

一、服务架构演变。 单体架构&#xff1a; 将业务的所有功能集中在一个项目中开发&#xff0c;打成一个包部署。 优点&#xff1a;架构简单 &#xff0c;部署成本低。 缺点&#xff1a;耦合度高 分布式架构 根据业务功能对系统进行拆分&#xff0c;每个业务模块作为独立项…
阅读更多...
spring国际化 - i18n

spring国际化 - i18n

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 本…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023