Expand是ArcGIS JavaScript API 4.3推出的一个widget(控件),用于承载一个HTML DOM元素,可以把一个自己编写的div或者是一个其他的Esri widget控件放到Expand里面。Expand在地图上显示为一个小方块按钮,点击可以展开或关闭它所承载的内容。关于Expand控件的详细内容,请查看:https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Expand.html

下面将一个表单div和一个echarts图表放到Expand中。


一、代码框架

  框架中包括HTML的基本语句、在线API的引入、切片图层的创建并添加到Map对象中等,详细内容请查看:[ArcGIS API for JavaScript 4.8] Sample Code-Get Started-MapView,SceneView简介ArcGIS JavaScript API4.8 底图选择的几种方案

 <html>
 <head>
     <meta charset="utf-8">
     <!-- 移动端优化 -->
     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
     <title>将展示内容(div、iframe)放在Expand控件中</title>

     <!-- JS API 引入 -->
     <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
     <script src="https://js.arcgis.com/4.8/"></script>

     <!-- 设置样式 -->
     <style>
         html,body,#viewDiv{
             margin:0;
             padding:0;
             height:100%;
             width:100%;
         }
     </style>

     <!-- JS API 调用代码 -->
     <script>
         require([
             "esri/Map",
             "esri/views/MapView",
             "esri/layers/TileLayer",

             "dojo/domReady!"],function(Map,MapView,TileLayer){
                 var mapTileLayer=new TileLayer({
                     url:"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
                 });
                 var map=new Map({
                     layers:[mapTileLayer]
                 });

                 var view=new MapView({
                     container:"viewDiv",
                     map:map,
                     center:[118.79647, 32.05838],  //南京城区
                     zoom:10
                 });
         });
     </script>
 </head>

 <body>
     <div id="viewDiv"></div>
 </body>
 </html>

  

二、创建一个表单div并放到Expand中

  为了更好看的样式,引入Bootstrap框架,要注意Bootstrap的引入要放在JS API引入之前,否则会出现multipleDefine的错误。这里使用Bootstrap在线CDN,也可以下载到本地引用。这里有个小提示,在编写HTML代码时,复制href=".."或src=".."中的网址并在浏览器中打开(如果可以,或在编辑器中双击直接打开),如果浏览器出现所引用文件的代码,则说明网址没有错误,否则要检查网址是不是有错误。

     <!-- 在JS API引入之前 引入 Bootstrap -->
     <!-- 新 Bootstrap4 核心 CSS 文件 -->
     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
     <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
     <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
     <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
     <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
     <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

  

  

  在<body>标签内进行表单div的编写。将这个div放在承载地图的viewDiv的后面(后面会有解释)。关于使用Bootstrap框架编写表单的详细内容,请查看:使用Bootstrap框架写一个注册\登录界面

     <!-- 表单div -->
     <div id="div1">
         <h3>这是一个表单</h3>
         <form>
             <div class="form-group">
                 <label for="name">景点名称:</label>
                 <input type="text" class="form-control" id="name" autocomplete="off">
             </div>
             <div class="form-group">
                 <label for="date">游玩日期:</label>
                 <input type="text" class="form-control" id="date" autocomplete="off">
             </div>
             <div class="form-group">
                 <label for="money">花费:</label>
                 <input type="text" class="form-control" id="money" autocomplete="off">
             </div>
             <div class="form-group">
                 <label for="company">同行:</label>
                 <input type="text" class="form-control" id="company" autocomplete="off">
             </div>
             <div class="form-group">
                 <label for="feeling">感受:</label>
                 <textarea class="form-control" rows="5" id="feeling"></textarea>
                 <input type="button" class="btn btn-info" value="一个button" id="btnLight">
             </div>
         </form>
     </div>

  保存后打开网页,发现右侧多了一个竖直滚动条。下拉看到刚才编写的表单放在了承载地图的viewDiv的下面。如果编写表单的代码放在了<div id="viewDiv"></div>的前面,那页面上方是表单,下方是地图。虽然这个表单div是要放在Expand控件中的,但是页面在加载地图时会有等待时间,往往HTML DOM元素先于Expand控件加载出来。所以将表单div放到地图下方,当Expand控件还没有加载出来时,页面不会突兀地出现一个表单。

  

  下面编写Expand控件,并将这个表单放到Expand中。Expand的构造函数中,view表示Expand所贴附的那个视图;content是承载的HTML DOM元素或API提供的widget(控件),其值是DOM元素的ID值或控件的变量名;expandIconClass是Expand按钮的符号,其值是一个表示符号的字符串,可以在这里选择自己喜欢的符号:https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/index.html;expandTooltip设置鼠标在Expand控件上悬停时显示的提示信息;expanded设置Expand在加载完成后是打开状态还是折叠状态,缺省为折叠状态。

     <!-- JS API 调用代码 -->
     <script>
         require([
             "esri/Map",
             "esri/views/MapView",
             "esri/layers/TileLayer",

             "esri/widgets/Expand",

             "dojo/domReady!"],function(Map,MapView,TileLayer,Expand){
                 var mapTileLayer=new TileLayer({
                     url:"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
                 });
                 var map=new Map({
                     layers:[mapTileLayer]
                 });

                 var view=new MapView({
                     container:"viewDiv",
                     map:map,
                     center:[118.79647, 32.05838],  //南京城区
                     zoom:10
                 });    

                 //Expand承载表单div
                 var div1Expand=new Expand({
                     view:view,
                     content:div1,
                     expandIconClass:"esri-icon-edit",  //Expand按钮符号
                     expandTooltipe:"一个表单",  //鼠标悬停时显示的提示
                     expanded:false,  //默认折叠(缺省)
                 });
                 view.ui.add(div1Expand,"top-left");
         });
     </script>

  

  为表单div设置宽度,使其更好看些。可以在<div>标签中添加style属性,也可以在<head>头标签中设置<style></style>css样式。

     <!-- 表单div -->
     <div id="div1" style="width:200px;">
         <h3>这是一个表单</h3>
         <form>
             <div class="form-group">
                 <label for="name">景点名称:</label>
                 <input type="text" class="form-control" id="name" autocomplete="off">
             </div>
             <div class="form-group">
                 <label for="date">游玩日期:</label>
                 <input type="text" class="form-control" id="date" autocomplete="off">
             </div>
             <div class="form-group">
                 <label for="money">花费:</label>
                 <input type="text" class="form-control" id="money" autocomplete="off">
             </div>
             <div class="form-group">
                 <label for="company">同行:</label>
                 <input type="text" class="form-control" id="company" autocomplete="off">
             </div>
             <div class="form-group">
                 <label for="feeling">感受:</label>
                 <textarea class="form-control" rows="5" id="feeling"></textarea>
                 <input type="button" class="btn btn-info" value="一个button" id="btnLight">
             </div>
         </form>
     </div>

  

三、创建一个echarts图表并放到Expand中

  echarts是百度公司开发的JavaScript开源可视化库,提供丰富的图表制作功能,具体请查看:http://echarts.baidu.com/。echarts没有在线的CDN,我们在官网下载后将echarts.js文件拷贝在当前目录下。在<head>中引用echarts.js。与引入Bootstrap情况相同,在引入echarts.js时,要先于JS API引入,否则会出现multipleDefine的错误。

  

     <!-- 在JS API引入之前 引入 echarts -->
     <script src="echarts.js"></script>

  

  在表单div后编写一个echarts图表div,这里不对echarts代码进行解释了。

     <!-- echarts图表div -->
     <div id="div2" style="width:600px;height:370px;">
         <script>
             var myChart = echarts.init(document.getElementById('div2'));
             option = {
                 title: {
                     text: '06-16 ~ 07-16 9:30am 各景区月平均人数',
                     x: 'center'
                 },
                 tooltip: {
                     trigger: 'item',
                     formatter: "{a} <br/>{b} : {c} ({d}%)"
                 },
                 legend: {
                     x: 'center',
                     y: 'bottom',
                     data: ['夫子庙', '中山陵', '雨花台', '总统府', '玄武湖', '红山森林动物园', '侵华日军南京大屠杀遇难同胞纪念馆']
                 },
                 toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: {
                            show: false,
                            type: ['pie', 'funnel']
                        },
                        restore: { show: false },
                        saveAsImage: { show: false }
                    }
                 },
                 calculable: true,
                 series: [
                     {
                         // name:'面积模式',
                         type: 'pie',
                         radius: [40, 150],
                         center: ['50%', '50%'],
                         roseType: 'area',
                         data: [
                             { value: 10062, name: '夫子庙' },
                             { value: 4076, name: '中山陵' },
                             { value: 2362, name: '雨花台' },
                             { value: 230, name: '总统府' },
                             { value: 837, name: '玄武湖' },
                             { value: 396, name: '红山森林动物园' },
                             { value: 82, name: '侵华日军南京大屠杀遇难同胞纪念馆' },
                         ]
                     }
                 ]
             };
             myChart.setOption(option);
         </script>
     </div>

  

  编写Expand代码,将echarts图表放到Expand控件中。

  

  为了更好的表现效果,更换echarts图表div的背景颜色,设置成0.8不透明度的白色。

     <!-- echarts图表div -->
     <div id="div2" style="width:600px;height:370px;background-color:rgba(255,255,255,0.8);">
         <script>
             var myChart = echarts.init(document.getElementById('div2'));
             option = {
                 title: {
                     text: '06-16 ~ 07-16 9:30am 各景区月平均人数',
                     x: 'center'
                 },
                 tooltip: {
                     trigger: 'item',
                     formatter: "{a} <br/>{b} : {c} ({d}%)"
                 },
                 legend: {
                     x: 'center',
                     y: 'bottom',
                     data: ['夫子庙', '中山陵', '雨花台', '总统府', '玄武湖', '红山森林动物园', '侵华日军南京大屠杀遇难同胞纪念馆']
                 },
                 toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: {
                            show: false,
                            type: ['pie', 'funnel']
                        },
                        restore: { show: false },
                        saveAsImage: { show: false }
                    }
                 },
                 calculable: true,
                 series: [
                     {
                         // name:'面积模式',
                         type: 'pie',
                         radius: [40, 150],
                         center: ['50%', '50%'],
                         roseType: 'area',
                         data: [
                             { value: 10062, name: '夫子庙' },
                             { value: 4076, name: '中山陵' },
                             { value: 2362, name: '雨花台' },
                             { value: 230, name: '总统府' },
                             { value: 837, name: '玄武湖' },
                             { value: 396, name: '红山森林动物园' },
                             { value: 82, name: '侵华日军南京大屠杀遇难同胞纪念馆' },
                         ]
                     }
                 ]
             };
             myChart.setOption(option);
         </script>
     </div>

修改div背景颜色

  

  这里也可以修改div的宽高,在Expand中会有相应改变。

     <!-- echarts图表div -->
     <div id="div2" style="width:1000px;height:600px;background-color:rgba(255,255,255,0.8);">
         <script>
             var myChart = echarts.init(document.getElementById('div2'));
             option = {
                 title: {
                     text: '06-16 ~ 07-16 9:30am 各景区月平均人数',
                     x: 'center'
                 },
                 tooltip: {
                     trigger: 'item',
                     formatter: "{a} <br/>{b} : {c} ({d}%)"
                 },
                 legend: {
                     x: 'center',
                     y: 'bottom',
                     data: ['夫子庙', '中山陵', '雨花台', '总统府', '玄武湖', '红山森林动物园', '侵华日军南京大屠杀遇难同胞纪念馆']
                 },
                 toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: {
                            show: false,
                            type: ['pie', 'funnel']
                        },
                        restore: { show: false },
                        saveAsImage: { show: false }
                    }
                 },
                 calculable: true,
                 series: [
                     {
                         // name:'面积模式',
                         type: 'pie',
                         radius: [40, 150],
                         center: ['50%', '50%'],
                         roseType: 'area',
                         data: [
                             { value: 10062, name: '夫子庙' },
                             { value: 4076, name: '中山陵' },
                             { value: 2362, name: '雨花台' },
                             { value: 230, name: '总统府' },
                             { value: 837, name: '玄武湖' },
                             { value: 396, name: '红山森林动物园' },
                             { value: 82, name: '侵华日军南京大屠杀遇难同胞纪念馆' },
                         ]
                     }
                 ]
             };
             myChart.setOption(option);
         </script>
     </div>

修改div宽高

四、将表单div和echarts图表div放到一个新的HTML页面中,并通过Iframe引用并放到Expand控件中

  通过以上步骤,我们已经实现了将一个表单div和一个echarts图表div放到Expand控件中,但这么做,在当前HTML页面(我们称之为主页面)的<head>标签内引入了很多外部的css和js文件,<body>标签内也写了很多内容,显得有些冗余了。

  我们可以将div放到一个新的HTML页面,并通过<iframe>标签引用这个HTML页面并放到Expand控件中。这样,很多内容就从主页面迁移到了新的HTML页面。下面编写一个新的HTML页面iframe_div1.html,盛放表单div。这是一个新的HTML页面,所以不需要的引用文件就可以不引入了,比如JS API。同时,主页面中用不到的css或js外部文件引用也可以删掉了。(如果在主页面的<body>标签内添加了一个<iframe>,而<iframe>引入的HTML页面中要用到某些css或js文件,应该在那个新的HTML页面中引入文件,而不是在主页面中)。下面是iframe_div2.html的代码:

 <html>
 <head>
     <meta charset="utf-8">
     <title></title>

     <!-- 新 Bootstrap4 核心 CSS 文件 -->
     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
     <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
     <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
     <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
     <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
     <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
 </head>

 <body>
     <!-- 表单div -->
     <div id="div1" style="width:200px;background-color:rgba(255,255,255,0.8);">
         <h3>这是一个表单</h3>
         <form>
             <div class="form-group">
                 <label for="name">景点名称:</label>
                 <input type="text" class="form-control" id="name" autocomplete="off">
             </div>
             <div class="form-group">
                 <label for="date">游玩日期:</label>
                 <input type="text" class="form-control" id="date" autocomplete="off">
             </div>
             <div class="form-group">
                 <label for="money">花费:</label>
                 <input type="text" class="form-control" id="money" autocomplete="off">
             </div>
             <div class="form-group">
                 <label for="company">同行:</label>
                 <input type="text" class="form-control" id="company" autocomplete="off">
             </div>
             <div class="form-group">
                 <label for="feeling">感受:</label>
                 <textarea class="form-control" rows="5" id="feeling"></textarea>
                 <input type="button" class="btn btn-info" value="一个button" id="btnLight">
             </div>
         </form>
     </div>
 </body>
 </html>

  

  更新主页面中代码,删除关于表单div的代码(因为已经移到了iframe_div1.html这里),并添加<iframe>标签以引用iframe_div1.html,同时更改Expand控件的构造函数,将content的值更换为iframe的ID值。

                 //Expand承载表单div
                 var div1Expand=new Expand({
                     view:view,
                     content:iframe_div1,
                     expandIconClass:"esri-icon-edit",  //Expand按钮符号
                     expandTooltipe:"一个表单",  //鼠标悬停时显示的提示
                     expanded:false,  //默认折叠(缺省)
                 });
                 view.ui.add(div1Expand,"top-left");
     <!-- 表单div -->
     <iframe src="iframe_div1.html" id="iframe_div1"></iframe>

  

  虽然之前为表单div1设置过了样式,但这里因为div1放到了iframe_div1.html中,主页面中通过<iframe>标签引用了iframe_div1.html,所以在Expand控件中显示的是iframe_div1.html而不是div1!(虽然div1放到了iframe_div1.html中..)这么说想表达的是,为div1设置样式与为iframe_div1设置样式是不同的。为div1设置样式是iframe_div1中具体内容的样式(因为iframe_div1的内容就是div1),而为iframe_div1设置样式是为了其在Expand控件中的表现形式。(iframe_div1是<iframe>元素的ID值,这个元素引用了iframe_div1.html)

  为iframe_div1设置宽高,反复调试,设置最合适的宽高值。frameborder设置iframe是否显示边框,值为"0"不显示,值为"1"显示。

     <!-- 表单div -->
     <iframe src="iframe_div1.html" id="iframe_div1" frameborder="0" style="width:210px;height:610px;"></iframe>

  

  虽然之前设置了div1的背景颜色,但那是对于div来说的,在iframe_div1.html这个页面中,div1的背景颜色是不透明度0.8的白色。但这并不意味着iframe_div1放到控件中,它的背景色也是这样。需要设置iframe_div1的属性。

     <!-- 表单div -->
     <iframe src="iframe_div1.html" id="iframe_div1" frameborder="0" style="width:210px;height:610px;background-color:rgba(255,255,255,0.8);"></iframe>

  可是运行结果显示,Expand控件中iframe的背景颜色并没有变..(没有解决,不知道是什么问题。希望如果读者看到这里,可以自己尝试解决问题,并告诉我问题出在哪里

  同样地,新建HTML页面iframe_div2.html,将echarts图表div的内容放到iframe_div2.html中。下面是iframe_div2.html的代码:

 <html>
 <head>
     <meta charset="utf-8">
     <title></title>

     <!-- 在JS API引入之前 引入 echarts -->
     <script src="echarts.js"></script>
 </head>

 <body>
     <!-- echarts图表div -->
     <div id="div2" style="width:600px;height:370px;background-color:rgba(255,255,255,0.8);">
         <script>
             var myChart = echarts.init(document.getElementById('div2'));
             option = {
                 title: {
                     text: '06-16 ~ 07-16 9:30am 各景区月平均人数',
                     x: 'center'
                 },
                 tooltip: {
                     trigger: 'item',
                     formatter: "{a} <br/>{b} : {c} ({d}%)"
                 },
                 legend: {
                     x: 'center',
                     y: 'bottom',
                     data: ['夫子庙', '中山陵', '雨花台', '总统府', '玄武湖', '红山森林动物园', '侵华日军南京大屠杀遇难同胞纪念馆']
                 },
                 toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: {
                            show: false,
                            type: ['pie', 'funnel']
                        },
                        restore: { show: false },
                        saveAsImage: { show: false }
                    }
                 },
                 calculable: true,
                 series: [
                     {
                         // name:'面积模式',
                         type: 'pie',
                         radius: [40, 150],
                         center: ['50%', '50%'],
                         roseType: 'area',
                         data: [
                             { value: 10062, name: '夫子庙' },
                             { value: 4076, name: '中山陵' },
                             { value: 2362, name: '雨花台' },
                             { value: 230, name: '总统府' },
                             { value: 837, name: '玄武湖' },
                             { value: 396, name: '红山森林动物园' },
                             { value: 82, name: '侵华日军南京大屠杀遇难同胞纪念馆' },
                         ]
                     }
                 ]
             };
             myChart.setOption(option);
         </script>
     </div>
 </body>
 </html>

  

  修改主页面代码。更改Expand构造函数中content属性值,为iframe设置宽高及背景颜色(背景颜色依然未更改)。

  

  虽然背景颜色不是想象中的0.8不透明度的白色,但我发现了一些“猫腻”。

  

  将iframe_div2的宽高都增大100px,看得更清楚。

     <!-- echarts图表div -->
     px;height:500px;background-color:rgba(255,255,255,0.8);"></iframe>

  

  图中iframe_div2的背景颜色确实更改了,只是div2本身也带有背景颜色,两者叠加就变得不那么透明了。在iframe_div2.html中,将div2的背景颜色去掉。iframe_div2变成了我们想要的背景颜色。

  

  但是这种解决方法对iframe_div1不管用..

五、使用div放到Expand中和使用iframe放到Expand中的区别与联系

  两种方法都可以实现将想要展示的内容放到API Expand控件中。但div是写在主页面中的,这意味着主页面要引入很多外部的css和js文件,<body>标签内也要写很多内容;而iframe方案是把div放到了一个新的HTML页面里,在主页面中只是创建了一个<iframe>标签,这个标签内包含新页面的引用。从下面的控制台信息中可以看到,<iframe>标签引用的两个HTML文件,其实是作为Sources(资源)引入到主页面的。所以,如果Expand控件中要展示的内容很少,用div写在主页面中就好了;如果展示的内容挺多,那就放到新的HTML页面中,再用<iframe>标签引用这个页面,这样结构更清晰些。

  

  同时,这两种方法都存在一个共同的问题,就是地图和div同时加载的问题。注意下图右侧的滚动条,上方是还未加载出来的地图div(其实是我把网络关上了,正常情况下,滚动条是一闪而过的,地图可以很快加载出来并将两个div放到Expand控件中),而下方的表单div和echarts图表div已经加载出来了(或两个iframe),这样就很尴尬..。可以设置div的display属性为none以暂时解决这个问题。可是当div放到Expand控件后,display值依然是none,怎么改变display的值又是一个问题。(未解决这个问题)

  

六、总结

  全部代码:

 <html>
 <head>
     <meta charset="utf-8">
     <!-- 移动端优化 -->
     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
     <title>将展示内容(div、iframe)放在Expand控件中</title>

     <!-- JS API 引入 -->
     <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
     <script src="https://js.arcgis.com/4.8/"></script>

     <!-- 设置样式 -->
     <style>
         html,body,#viewDiv{
             margin:0;
             padding:0;
             height:100%;
             width:100%;
         }
     </style>

     <!-- JS API 调用代码 -->
     <script>
         require([
             "esri/Map",
             "esri/views/MapView",
             "esri/layers/TileLayer",

             "esri/widgets/Expand",

             "dojo/domReady!"],function(Map,MapView,TileLayer,Expand){
                 var mapTileLayer=new TileLayer({
                     url:"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
                 });
                 var map=new Map({
                     layers:[mapTileLayer]
                 });

                 var view=new MapView({
                     container:"viewDiv",
                     map:map,
                     center:[118.79647, 32.05838],  //南京城区
                     zoom:10
                 });    

                 //Expand承载表单div
                 var div1Expand=new Expand({
                     view:view,
                     content:iframe_div1,
                     expandIconClass:"esri-icon-edit",  //Expand按钮符号
                     expandTooltipe:"一个表单",  //鼠标悬停时显示的提示
                     expanded:false,  //默认折叠(缺省)
                 });
                 view.ui.add(div1Expand,"top-left");

                 //Expand承载echarts图表div
                 var div2Expand=new Expand({
                     view:view,
                     content:iframe_div2,
                     expandIconClass:"esri-icon-pie-chart",  //Expand按钮符号
                     expandTooltipe:"一个echarts图表",  //鼠标悬停时显示的提示
                     expanded:false,  //默认折叠(缺省)
                 });
                 view.ui.add(div2Expand,"top-left");
         });
     </script>
 </head>

 <body>
     <div id="viewDiv"></div>

     <!-- 表单div -->
     <iframe src="iframe_div1.html" id="iframe_div1" frameborder="0" style="width:210px;height:610px;background-color:rgba(255,255,255,0.8);"></iframe>

     <!-- echarts图表div -->
     <iframe src="iframe_div2.html" id="iframe_div2" frameborder="0" style="width:650px;height:400px;background-color:rgba(255,255,255,0.8);"></iframe>
 </body>
 </html>

主页面

 <html>
 <head>
     <meta charset="utf-8">
     <title></title>

     <!-- 新 Bootstrap4 核心 CSS 文件 -->
     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
     <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
     <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
     <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
     <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
     <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
 </head>

 <body>
     <!-- 表单div -->
     <div id="div1" style="width:200px;">
         <h3>这是一个表单</h3>
         <form>
             <div class="form-group">
                 <label for="name">景点名称:</label>
                 <input type="text" class="form-control" id="name" autocomplete="off">
             </div>
             <div class="form-group">
                 <label for="date">游玩日期:</label>
                 <input type="text" class="form-control" id="date" autocomplete="off">
             </div>
             <div class="form-group">
                 <label for="money">花费:</label>
                 <input type="text" class="form-control" id="money" autocomplete="off">
             </div>
             <div class="form-group">
                 <label for="company">同行:</label>
                 <input type="text" class="form-control" id="company" autocomplete="off">
             </div>
             <div class="form-group">
                 <label for="feeling">感受:</label>
                 <textarea class="form-control" rows="5" id="feeling"></textarea>
                 <input type="button" class="btn btn-info" value="一个button" id="btnLight">
             </div>
         </form>
     </div>
 </body>
 </html>

iframe_div1.html

 <html>
 <head>
     <meta charset="utf-8">
     <title></title>

     <!-- 在JS API引入之前 引入 echarts -->
     <script src="echarts.js"></script>
 </head>

 <body>
     <!-- echarts图表div -->
     <div id="div2" style="width:600px;height:370px;">
         <script>
             var myChart = echarts.init(document.getElementById('div2'));
             option = {
                 title: {
                     text: '06-16 ~ 07-16 9:30am 各景区月平均人数',
                     x: 'center'
                 },
                 tooltip: {
                     trigger: 'item',
                     formatter: "{a} <br/>{b} : {c} ({d}%)"
                 },
                 legend: {
                     x: 'center',
                     y: 'bottom',
                     data: ['夫子庙', '中山陵', '雨花台', '总统府', '玄武湖', '红山森林动物园', '侵华日军南京大屠杀遇难同胞纪念馆']
                 },
                 toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: {
                            show: false,
                            type: ['pie', 'funnel']
                        },
                        restore: { show: false },
                        saveAsImage: { show: false }
                    }
                 },
                 calculable: true,
                 series: [
                     {
                         // name:'面积模式',
                         type: 'pie',
                         radius: [40, 150],
                         center: ['50%', '50%'],
                         roseType: 'area',
                         data: [
                             { value: 10062, name: '夫子庙' },
                             { value: 4076, name: '中山陵' },
                             { value: 2362, name: '雨花台' },
                             { value: 230, name: '总统府' },
                             { value: 837, name: '玄武湖' },
                             { value: 396, name: '红山森林动物园' },
                             { value: 82, name: '侵华日军南京大屠杀遇难同胞纪念馆' },
                         ]
                     }
                 ]
             };
             myChart.setOption(option);
         </script>
     </div>
 </body>
 </html>

iframe_div2.html

  文中例子的分享链接:https://pan.baidu.com/s/1tACw1lAIa0v0NQqJ8CtD_g

将展示内容(div、iframe)放在Expand控件中的更多相关文章

  1. 在RichTextBox控件中显示RTF格式文件

    实现效果: 知识运用:    RichTextBox控件的LoadFile方法 //将文件内容加载到RichTextBox控件中 public void LoadFile(string path,Ri ...

  2. 关于WEB开发下面DIV层被OCX控件拦住问题

    控件分为有窗口控件与无窗口控件,无窗口控件很好办,如flash控件,可以通过添加wmode属性来解决挡住DIV层这个问题,添加的代码如下: 解决无窗口控件挡住DIV: 1 <param  nam ...

  3. .net获取select控件中的文本内容

    .net获取select控件中的文本内容 2009-11-28 21:19小V古 | 分类:C#/.NET | 浏览1374次 <select id="SecType" st ...

  4. delphi Components[i]清除所有edit控件中的内容

    (* 一般的清空combobox方法 combobox1.clear; ... combobox9.clear; *)   procedure TForm1.Button1Click(Sender: ...

  5. 实现TableLayout布局下循环取出TableRow控件中的文字内容到list集合

    布局方式为TableLayout,利于实现表单样式展现. <!-- 详情内容区域 --> <ScrollView android:layout_above="@id/id_ ...

  6. 【VC版】如何获取其他进程中ListView控件中的内容

    如果需要C#版的,可以看下我之前写的:C#如何获取其他程序ListView控件中的内容 获取其他进程的数据需要使用到以下几个函数: VirtualAllocEx() VirtualFreeEx() W ...

  7. 02、获取 WebView 控件中,加载的 HTML 网页内容

    在开发 app 的时候,WebView 是经常使用的控件.而且有时需要向 WebView 中的 html 内容 注入额外的 js 进行操作.这里记录一下在当前 WebView 控件中,获取 html ...

  8. Flex 列表控件中的操作

    主要操作包括:显示提示,使用图标,编辑列表条目中数据. 1.使用数据提示: 当鼠标停留在条目上时,可以显示该条目的相关数据提示. 当利用滚动条时,可以显示滚动条的相关提示. 在列表控件中使用showD ...

  9. OpenCV 2.2版本号以上显示图片到 MFC 的 Picture Control 控件中

    OpenCV 2.2 以及后面的版本号取消掉了 CvvImage.h 和CvvImage.cpp 两个文件,直接导致了苦逼的程序猿无法调用里面的显示函数来将图片显示到 MFC 的 Picture Co ...

随机推荐

  1. 开源一个WEB版本GEF,基于SVG的网页流程图框架

    8月开始断断续续的制作这个web gef,没有任何依赖,完全原生js开发,目前已经完成了雏形,基本上可以在项目里应用了. 下图展示的是demo1的效果,包括拖拽,生成连线,点击生成\取消墙体,整个de ...

  2. 一个virtualbox开机即aborted的问题解决

    问题: 之前想装最新的virtualbox版本,从官网下载了virtualbox最新的5点几的版本,使用sudo dpkg -i *.deb进行安装的. 然而,在virtualbox中启动了ubunt ...

  3. QEMU VCPU热插特性

    最近学习QEMU中VCPU热插特性,需要了解QEMU中VCPU热插的整个流程,VCPU热插是QEMU主板的一个feature. 1:这里先分析一下QEMU的主板模拟,主板在QEMU的设备模型中对应的是 ...

  4. typedef 和 #define 的区别

    本文已迁移至: http://www.danfengcao.info/c/c++/2014/02/25/difference-between-define-and-typedef.html typed ...

  5. PHP从mysql获取数据的方法

    <?php require "database.php"; //读取数据库中的数据 $sql_1 = "SELECT * FROM test_table" ...

  6. HTML 5 video 标签跨浏览器兼容

    <video width="320" height="240" controls>   <source src="movie.mp4 ...

  7. 【转】C# Linq 交集、并集、差集、去重

    using System.Linq; List<string> ListA = new List<string>(); List<string> ListB = n ...

  8. GUID分区与MBR分区

    1.MBR分区表类型的磁盘主引导记录(Master Boot Record,缩写:MBR),又叫做主引导扇区,它仅仅包含一个64个字节的硬盘分区表.由于每个分区信息需要16个字节,所以对于采用MBR型 ...

  9. Eclipse里面启用genymotion

    E:/Users/zhuxuekui/AppData/Local/Android/sdk as里面的SDK目录 1.打开eclipse并从云仓库里面下载genymotion插件 注意:这里面有一个坑, ...

  10. DataList分页-增加自动编号列

    <asp:DataList ID="dl_XUDAXIA" runat="server"> <HeaderTemplate> <t ...