Layui深入

已于 2023-12-12 08:58:46 修改
阅读量1.6k 收藏 26
点赞数 27
分类专栏： 付费 文章标签： layui 前端 javascript
于 2023-12-12 08:57:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64180190/article/details/134939902
版权

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>

效果图：

李浩东@
关注
  • 27
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ASP.NET MVC+Layui数据分页的实现和说明
01-08
前言      在学习过程中，因为对前端开发并不是很深入，学习的前端框架也很少:Bootstrap、Echarts、EasyUI等。当接触到Layui时，认识到它是一套强大的模块化前端框架，使用Layui提供的各种组件，可以帮助我们迅速搭建前端界面。对于一些非专业前端开发者、服务端开发者、以及小型后台管理系统开发者来说，Layui还是比较合适的。它的上手非常容易，官方API也十分详细，但是在我初次使用这个框架的时候，还是遇到了很多坑，一个个踩过之后才能完美避坑。     这里记录下使用Layui对数据进行分页展示的实现    前端:Layui框架 后台:ASP.NET MVC    效果图:(
深入理解jQuery layui分页控件的使用
10-21
jquery layui分页控件在项目开发阶段经常用到，下面通过本文给大家介绍jQuery layui分页控件的使用，非常不错，感兴趣的朋友一起看下吧
SpringBoot+Layui后台管理系统.zip
12-26
当然可以，以下是一份关于您的Java SpringBoot项目的简介描述： 探索Java的SpringBoot魔法 亲爱的开发者们，准备好一起踏上这次深入Java的SpringBoot之旅了吗？如果您正在寻找一个现代化、高效且易于扩展的开发框架，那么这个SpringBoot项目将是您的理想选择。 主要特点： 快速开发：SpringBoot通过自动配置和约定大于配置的原则，大大简化了项目设置和开发过程。 易于扩展：SpringBoot与生俱来的灵活性使您可以轻松集成各种服务和数据库，以满足您日益增长的需求。 安全性：内置的安全特性，如OAuth2和Spring Security，确保您的应用程序安全无虞。 微服务支持：SpringBoot是微服务架构的理想选择，可以帮助您构建模块化、可扩展的应用程序。 社区支持：全球的开发者社区意味着您可以在遇到问题时找到大量的资源和支持。 无论您是初出茅庐的Java新手，还是经验丰富的开发者，这个项目都将为您提供一个深入了解SpringBoot的机会。无论您是想学习新的技能，还是想提高现有应用程序的性能，这个项目都将是您的宝贵资源。 内容概览 项目设置和初始化 控制器设计和实现 数据持久化与数据库集成 安全性和身份验证 性能优化和监控 部署和生产环境考虑 现在，是时候让您的Java技能得到充分发挥，并掌握SpringBoot的魔法了！这个项目将带领您从基础到高级，探索SpringBoot的每一个角落。
java Servlet+Mybatis+Layui实现的CRM客户关系管理系统
04-18
该项目未使用spring框架，实现了用户登录，权限控制，数据统计，以及市场活动、线索、客户、联系人、合同的CRUD，使用Proxy实现Service层的动态代理，实现DAO层事务控制，有助于深入理解web项目 运行环境 jdk8+tomcat7+mysql+IntelliJ IDEA 项目技术(必填) java servlet+mybatis+layui+jquery+echarts 登录地址：http://localhost:8080/crm/pages/login.jsp 账号密码：zuidaima 123 登录界面 市场活动 添加市场活动 线索管理 关联市场活动 线索转换 客户管理 联系人 添加交易 用户管理 角色管理 权限管理 注意事项 初次使用Layui，前端代码中有的功能有多种实现方式，代码被注释了，如果有需要可以根据自己的需要替换，注意看注释说明，账号密码是admin，123或zuidaima 123 关于项目部署，使用idea打开项目（使用eclipse的话需要新建一个空项目然后将源码中的src、web文件夹里的内容拷贝到对应的src和webContent中），导入
layui输入框input只能输入数字和小数点
q8688的博客
02-02 3295
layui输入框input输入类型限制
Layui评分组件Rate的深入使用
chenyx
09-01 2468
最近做一个项目的时候，碰到一个需求是做一个评价系统，需要有一个星级评定就考虑了一下Layui的rate组件。 在页面上画一个星级评分按照官网说明即可，现在就说说这个rate进行取值与赋值的操作。 <script> layui.use(['rate'],function(){ var rate = layui.rate; rate.render({ elem: '#stars' ...
初次使用Layui
一剑轻语
09-19 1922
背景：公司项目全面改为使用layui，刚好我现在负责一个新项目，第一次使用layui。刚改革的时候看了一下layui，但是当时负责的项目不用改成layui格式的。所以这是第一次做 官网：https://www.layui.com/           官网文件看了一会，但是我看的都是按照项目需要用的来看的           因为主要负责监控项目进度，解决其他同事bug，和数据以及前端沟通，...
02 Layui底层方法
qq_48968230的博客
03-10 926
主要学习了Layui官网文档中的基础库，包括基础框架支撑。
LayUI之入门篇
kissship的博客
07-11 3060
LayUI（或称为LayUI前端框架）是一个基于JavaScript的UI框架，旨在简化Web界面开发的过程。它由贤心（诚意出品）开发，提供了丰富的CSS组件和JavaScript交互插件，使开发者能够快速构建出美观、灵活的网页界面。简洁易用：LayUI提供了简单明了的API文档和丰富的示例，使开发者能够快速上手使用。响应式设计：LayUI的组件都经过精心设计，能够自动适应不同屏幕大小和设备。模块化开发：LayUI采用了模块化的开发思想，开发者可以按需加载需要的模块，减少资源浪费。
layui type类型
weixin_30498921的博客
01-21 1676
在layer弹出层中分为5个类型，这种类型的返回值是Number类型，默认是0； layer中5种类型传入的值有：0(信息框，默认是0），1（页面层），2（iframe层)，3（加载层），4（tips层） https://blog.csdn.net/u012994320/article/details/83065352 转载于:https://www.cnblogs.com/Ly426/...
layui问题汇总
什么都干的派森
05-05 3289
问题索引： 1.form表单 1.form表单 html: <form class="layui-form" action="" lay-filter="example"> <!-- ------------------------------------------ --> <div class="layui-form-item"> <la...
layui input type=‘number‘ 限制不能输负数问题
qq_39702981的博客
09-30 8332
<input type="number" min="0" class="layui-input stock" value="{{item.stock}}" /> 设置min='0'最小为0就不会出现负数
layui input输入框 限制只能输入数字和小数点
weixin_58215878的博客
04-23 3173
5:开始不能为0 且不能输入小数。1.只允许输入整数数字。2.允许输入1位小数。3:允许输入两位小数。4:允许输入三位小数。
Layui设置table表格中时间的显示格式
雾林小妖的博客
05-27 189
Layui中设置时间格式，Layui中设置时间的显示格式
记录layui-table中操作列的宽度随着权限变化而变化
cngm110的博客
05-29 180
数据表格table中操作列依据权限不同自动调整宽度
layui实现表格根据数据来勾选已保存的数据
WANGkaiyuan666的博客
05-29 161
【代码】layui实现表格根据数据来勾选已保存的数据。
layui layer弹出框按回车键无限弹出问题解决
最新发布
weixin_44448873的博客
05-30 126
【代码】layui layer弹出框按回车键无限弹出问题解决。
viewer.js 在layui中使用，并且实现表格中点击预览，点击图片名称定位到表格中某一条数据并高亮显示
qq_43086723的博客
05-28 204
viewer.js 在layui中使用，并且实现表格中点击预览，点击图片名称定位到表格中某一条数据并高亮显示
layui extend
05-07
layui extend 是 layui 框架的扩展模块，它提供了一些额外的功能和组件，可以帮助开发者更方便地构建 Web 应用程序。通过 layui extend，你可以扩展 layui 的功能，添加自定义的模块和组件。 一些常见的 layui extend 功能包括： 1. 数据表格扩展：layui extend 提供了更强大的数据表格功能，支持排序、筛选、分页等操作，并且可以自定义表格的样式和行为。 2. 表单验证扩展：layui extend 提供了更多的表单验证规则和方法，可以方便地对表单进行验证，并给出相应的提示信息。 3. 弹窗扩展：layui extend 提供了更多样式和功能丰富的弹窗组件，可以实现各种弹窗效果，如提示框、确认框、加载框等。 4. 富文本编辑器扩展：layui extend 提供了富文本编辑器组件，可以方便地在网页中添加富文本编辑功能，支持插入图片、链接、表格等操作。 5. 图表扩展：layui extend 提供了图表组件，可以方便地在网页中绘制各种类型的图表，如折线图、柱状图、饼图等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值