Layui弹窗带标签可切换图表的应用Demo

最新推荐文章于 2024-06-06 23:20:58 发布
最新推荐文章于 2024-06-06 23:20:58 发布
阅读量973 收藏 9
点赞数 5
文章标签： layui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51759592/article/details/135260883
版权

提供Layui弹窗带页签的Demo写法

文章目录

前言

之前因为有需求，需要开发Layui的弹出框，同时弹窗框需要支持，页签点击切换内容，特此整理了这一篇文章，提供给需要的人。话不多说，请看展示的效果。

一、展示效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
如果有需要你可以接着看下去，下面我将提供源码，被提供详细分析，希望能便利您的二次开发。

二、详细代码

1.代码

Demo代码如下（示例）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Layui弹窗Demo</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/css/layui.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.min.js"></script>
  <style>
  	/*控制标题栏颜色*/
   .layui-layer-title{
	background-color: deepskyblue;
    }
    /*控制弹窗与内容直接边距*/
    #popupContent .layui-tab{
    	margin-top: 0;
    }
    #popupContent .layui-tab-card {
    border-width: 0px !important;
    border-style: solid; 
    border-radius: 2px !important;
    box-shadow: 0 0px 0px 0 rgba(0,0,0,.1); 
    }
  </style>
</head>
<body>
  <button class="layui-btn" id="openPopup">打开弹窗</button>
  <div id="popupContent" style="display: none;height: 100%;overflow: hidden;" >
    <div class="layui-tab layui-tab-card" lay-filter="test-hash">
     <ul class="layui-tab-title" id="tabContainer">
       <li class="layui-this"lay-id="1">内容</li>
       <li lay-id="2">表格</li>
       <li lay-id="3">图表</li>
     </ul>
     <div class="layui-tab-content">
       <div class="layui-tab-item layui-show" >
          	<p>
          		简单的内容展示<br>
          		简单的内容展示<br>
           		简单的内容展示<br>
          		简单的内容展示<br>
          		简单的内容展示<br>
          		简单的内容展示<br>
          		简单的内容展示<br>
           		简单的内容展示<br>
          		简单的内容展示<br>
          		简单的内容展示<br>
          		简单的内容展示<br>
          		简单的内容展示<br>
          		简单的内容展示<br>
          		简单的内容展示<br>
          	</p>
       </div>
       <div class="layui-tab-item" >
            <div class="tab-item-container">
              <label class="layui-input-inline custom-label">测试:</label>
              <div class="layui-input-block layui-inline custom-input">
               <input type="text" class="layui-input"  disabled>
              </div>
            </div>
            <div class="tab-item-container">
              <label class="layui-input-inline custom-label">测试:</label>
              <div class="layui-input-block layui-inline custom-input">
               <input type="text" class="layui-input"  disabled>
              </div>
            </div>
            <div class="tab-item-container">
              <label class="layui-input-inline custom-label">测试:</label>
              <div class="layui-input-block layui-inline custom-input">
               <input type="text" class="layui-input"  disabled>
              </div>
            </div>
            <div class="tab-item-container">
              <label class="layui-input-inline custom-label">测试:</label>
              <div class="layui-input-block layui-inline custom-input">
               <input type="text" class="layui-input"  disabled>
              </div>
            </div>
            <div class="tab-item-container">
              <label class="layui-input-inline custom-label">测试:</label>
              <div class="layui-input-block layui-inline custom-input">
               <input type="text" class="layui-input"  disabled>
              </div>
            </div>
            <div class="tab-item-container">
              <label class="layui-input-inline custom-label">测试:</label>
              <div class="layui-input-block layui-inline custom-input">
               <input type="text" class="layui-input"  disabled>
              </div>
            </div>
            <div class="tab-item-container">
              <label class="layui-input-inline custom-label">测试:</label>
              <div class="layui-input-block layui-inline custom-input">
               <input type="text" class="layui-input"  disabled>
              </div>
            </div>
       </div>
       <div class="layui-tab-item" >
             <div id="chart" style="width: 600px; height: 267px;"></div>
       </div>
     </div>
     </div>
 </div>

 <script>
// 	使用layer与element模块
 layui.use(['layer', 'element'], function() {
// 	对两个模块进行引用
  var layer = layui.layer;
  var element = layui.element;
      // 初始化 ECharts 实例
    var chart = echarts.init(document.getElementById('chart'));
    
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '柱状图示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };

    // 使用刚指定的配置项和数据显示图表
    chart.setOption(option);
//绑定按钮点击事件
  $('#openPopup').click(function() {
    layer.open({
      type: 1,
      title: '弹出框详情',
      area: ['40%', '55%'],
      content: $('#popupContent'),
      success:function(layero, index) {

      },
    });
  });
});
 </script>
</body>
</html>

2.简单释义

 layer.open({
      type: 1,
      title: '弹出框详情',
      area: ['40%', '55%'],
      content: $('#popupContent'),
      success:function(layero, index) {

      },
    });
  });

此处为弹出时间控制弹出大小、弹出框标题、弹出框对应内容；

  	/*控制标题栏颜色*/
   .layui-layer-title{
	background-color: deepskyblue;
    }
    /*控制弹窗与内容直接边距*/
    #popupContent .layui-tab{
    	margin-top: 0;
    }
    #popupContent .layui-tab-card {
    border-width: 0px !important;
    border-style: solid; 
    border-radius: 2px !important;
    box-shadow: 0 0px 0px 0 rgba(0,0,0,.1); 
    }

此处为样式控制，控制标签栏内容嵌入弹窗，同时，不受边距线等影响。

   // 初始化 ECharts 实例
    var chart = echarts.init(document.getElementById('chart'));
    
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '柱状图示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };

    // 使用刚指定的配置项和数据显示图表
    chart.setOption(option);

此处为ercharts图生成可根据需要切换成动态数据生成。

总结

有需要的可以直接复制源码使用，采用layui、ercharts、jQuery适用于二次开发，有需要自取，不喜勿喷谢谢，自取之后请帮忙点个赞谢谢。

呼啦啦呼啦啦啦啦啦啦
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layuiDemo.zip
10-05
layui的小例子案例的jsp页面，可以用来给各位参考和学习
Layui 搭建一个页面demo（表格table,切换element，修改页码样式，搜索，修改加载样式）
阿……莫西林杀菌室
03-06 2282
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt; &lt;title&
使用Layui解决C#弹窗的问题
最新发布
2301_76524781的博客
06-06 206
如示例效果是这个样子的，样式、大小都可以自己更改。当你点击 添加类型 时，就会在本页面弹出一个小窗体。这个弹窗里面的内容是单独的一个页面，所有你可以在页面里进行数据库的内容操作。然后安装图片中的代码进行操作即可。设置自己想要的效果，然后调用自己想要弹出来的页面。c#本身是没有弹窗控件的，一般用的都是a标签进行页面跳转，但是今天我发现了一种我想要的，页面内即可弹窗的方法，非常简单，而且实用。首先你得需要一个连接，可以进行链接跳转，这里我们需要进行链接的我们自定义的js方法。上诉操作都做完了，就已经完成了。
Layui的一个简单的demo
MW
04-17 1685
先看效果图 代码在我码云上地址：https://gitee.com/mw0309/simple_demo_of_layui
layui 数据表格绑定demo
热门推荐
coral33333的博客
04-21 1万+
layui版本：v2.2.6html展示&lt;table class="layui-hide" id="test" lay-filter="useruv"&gt;&lt;/table&gt;js展示layui.use('table', function(){ //这个代表引用layui文件modules里面的table.js,所以检查modules是否有table.js         va...
使用Layui框架集成ECharts技术实现数据可视化
奇妙的Bug之旅
11-06 3032
而Layui框架作为一个轻量级的前端UI框架，提供了丰富的组件和工具，使得集成ECharts技术变得更加简单和高效。本文将详细介绍如何使用Layui框架集成ECharts技术，并提供相关实例代码，帮助开发者快速实现数据可视化。至此，我们已经完成了使用Layui框架集成ECharts技术的基本步骤。通过这些步骤，我们可以快速实现数据可视化，提升用户体验和界面效果。首先，在HTML文件中引入Layui和ECharts的依赖文件。完成上述步骤后，ECharts图表将在指定的容器中渲染出来。
layui搭建管理后台系统
weixin_43811651的博客
07-23 1万+
先上最终效果图： 点击左侧的菜单树可以显示在导航栏中 下面是具体步骤： ①下载layui https://www.layui.com/ ②项目结构介绍 html：存放静态界面 img：存放图片 json：模拟请求数据，展示用 layui：步骤一下载的文件 ③源码 index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> ...
layui后台多标签框架html
10-09
3. **多标签页模块**：利用layui的tab组件，实现标签页的添加、关闭和切换。 4. **内容区域**：承载各种业务功能的界面，例如数据表格、表单、图表等，这些都可以通过layui的组件快速搭建。 5. **权限管理**：根据...
Web Echarts+layui 统计图表demo实例 (统计深圳市旅游景点信息)
10-14
在本项目中，"Web Echarts+layui 统计图表demo实例 (统计深圳市旅游景点信息)" 是一个基于Echarts和layui框架开发的数据可视化应用。Echarts是中国百度公司开源的一个JavaScript图表库，它提供了丰富的图表类型，如...
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
10-18
然而，在实际应用中，可能会遇到Tab切换时图表不正确显示的问题，这通常是因为图表控件未能根据新的容器尺寸自适应调整。本文将详细介绍如何解决这个常见问题，特别关注使用Highcharts图表控件的情况。 首先，...
SSM 整合 Layui Echarts图表
06-26
SSM整合Layui Echarts图表是一个典型的Java Web开发中的实践，主要涉及到Spring、Spring MVC和MyBatis（SSM）三大框架与Layui前端框架以及Echarts数据可视化库的结合。这篇详解将深入讨论如何在实际项目中实现这样的...
Chartlet图表控件Demo源码.zip
06-18
"Chartlet图表控件Demo源码.zip"是一个包含Chartlet图表控件的示例源代码压缩包。这个压缩包主要用于展示如何在应用程序中使用Chartlet图表控件来创建和显示各种数据可视化效果。Chartlet控件是软件开发中常用的一种...
layui入门
qq_63531917的博客
07-08 2920
链接: 官方网站(已经下线) 链接: 参考网址(已经下线) 首先打开我们的参考网站点击文档下翻 找到获得layui，就可以看到下载方式码云和GitHub 博主这边演示以前官网下载方式 点击下线的官网地址，直接点击下载，会有一个压缩包 然后我们解压到我们电脑的一个文件夹 到这就下载好了首先我们建立一个项目，然后把我们layui相关的js文件和其他依赖导入，因为这些依赖和js都是静态的所以我们一般都放在一个静态文件夹里。 建立一个工程，在web工程下面建立一个static文件夹，在在static建立
layui框架与EChart来生成饼状图，并且可以按照时间条件来生成饼状图
fzxyxf1314的博客
03-24 1254
layui框架与EChart来生成饼状图，并且可以按照时间条件来生成饼状图 - 知识干货、满满的，越努力越幸运
【小小Demo】SpringBoot+Layui文件上传与下载
Java_Wxlin的博客
05-31 1213
文件上传、下载、预览
javaweb基础之layui小demo练习
weixin_44093711的博客
11-15 1059
什么是Servlet Servlet 运行在服务端的Java小程序，是sun公司提供一套规范（接口），用来处理客户端请求、响应给浏览器的动态资源。但servlet的实质就是java代码，通过java的API 动态的向客户端输出内容 servlet三个技术点： 1）servlet技术 2）filter技术—过滤器 3）listener技术—监听器 快速入门 1）创建类继承HttpServlet类 2）覆盖doGet和doPost 3）在web.xml中进行servlet的配置 配置： 其中url-patter
Layui+Pyecharts图表使用
z60015260的博客
06-20 799
说明:前端使用layui, 后端flask+pyecharts一.Layui 2.html页面 三.Pychearts参数介绍 1.代码 2.参数全局配置项可通过 方法设置InitOpts:初始化配置项TitleOpts:标题配置项ToolboxOpts:工具箱配置项BrushOpts:区域选择组件配置项LegendOpts:图例配置项VisualMapOpts:视觉映射配置项TooltipOpts:提示框配置项...
Layui实现Eharts图表
XIATWO
09-24 3062
前言： SpringBoot+Layui项目中想要实现Echarts图表展示 资源下载网址： Layui，Echarts 操作： 1. 在Layui的拓展模块 lay-module 目录下 新建 echarts 文件夹（名字任意），将下载好的Echarts源代码Js文件放入。 2. 修改Layui 全局配置文件（lay-config.js) 配置格式： //config的设置是全局的 layui.config({ base: '/res/js/' //假设这是你存放拓展模...
Layui的tag标签
weixin_38924500的博客
12-01 5470
1.页面显示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <
Excel数据分析高级应用图表制作
05-09
Excel数据分析高级应用图表制作

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值