个人中心
gpt4 book ai didi

html - 如何更改 dojo float Pane 图标的位置？

转载 作者：行者123 更新时间：2023-11-28 07:35:19 24 4
gpt4 key购买 nike

我是 dojo 工具包的新手。我创建了一个 float Pane 并在其中添加了一些工具。问题是 float Pane 图标默认位于页面下方(左下角)。我想将位置更改为顶部。如何更改 float Pane 的位置？ enter image description here enter image description here 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
   <link  rel="stylesheet" href="http://.../arcgis_js_api/library/3.13/3.13/esri/css/esri.css">
<script type="text/javascript" src="http://.../arcgis_js_api/library/3.13/3.13/init.js"></script>
<script type="text/javascript" src="http://.../js/dojo/dojo.js"></script>
<link rel="stylesheet" href="http://.../js/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" href="http://.../arcgis_js_api/library/3.13/3.13/dojox/layout/resources/FloatingPane.css" />
 <link rel="stylesheet" href="http://.../arcgis_js_api/library/3.13/3.13/dojox/layout/resources/ResizeHandle.css" />
<link  rel="stylesheet" href="http://.../arcgis_js_api/library/3.13/3.13/dojox/layout/resources/ExpandoPane.css">
<script type="text/javascript" src="jsapi_vsdoc10_v38.js"></script>
<style>
   html, body {
    height: 100%;
    width: 100%;
    margin: 0; 
    padding: 0;
    overflow:hidden;
  }

  #mymap{
    padding:0;
  }



</style>

   <script>

       require(["dojo/parser", "esri/InfoTemplate", "esri/layers/FeatureLayer", "esri/map", "dijit/Toolbar", "esri/dijit/Legend", "esri/dijit/OverviewMap", "esri/dijit/Scalebar", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dijit/registry", "dojox/layout/ExpandoPane", "dojox/layout/FloatingPane", "dijit/form/Button"], function (parser, Infotemplate) {
           parser.parse();

           var sr = new esri.SpatialReference({ wkid: 4326 });
           //create the extent object
           var startExtent = new esri.geometry.Extent(-88.27, 17.47, -88.16, 17.54, sr);
           //create the map object and load it into the 'mymap'
           var map = new esri.Map("mymap", { extent: startExtent });

           var layer3 = new esri.layers.FeatureLayer("http://...:6080/arcgis/rest/services/bestaurants/MapServer/0", { outFields: ["*"] });

           var layer2 = new esri.layers.FeatureLayer("http://...:6080/arcgis/rest/services/bestaurants/MapServer/1", { outFields: ["*"] });
           //var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://...:6080/arcgis/rest/services/bestaurants/MapServer");

           map.addLayer(layer2);
           map.addLayer(layer3);


           // legend
           var legend = new esri.dijit.Legend({ map: map }, "legendDiv");
           legend.startup();
           //overview
           var overview = new esri.dijit.OverviewMap({ map: map });
           overview.startup();
           //scalbar
           var scalebar = new esri.dijit.Scalebar({ map: map });
           //navigation toolbar

           require(["esri/toolbars/navigation", "dojo/on", "dojo/parser", "dijit/registry", "dijit/Toolbar", "dijit/form/Button", "dojo/domReady!", "esri/layers/FeatureLayer", "esri/InfoTemplate", "dijit/form/button"],
        function (Navigation, on, parser, registry) {
            parser.parse();
            navToolbar = new Navigation(map);
            on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

            registry.byId("zoomin").on("click", function () {
                navToolbar.activate(Navigation.ZOOM_IN);
            });

            registry.byId("zoomout").on("click", function () {
                navToolbar.activate(Navigation.ZOOM_OUT);
            });

            registry.byId("zoomfullext").on("click", function () {
                navToolbar.zoomToFullExtent();
            });

            registry.byId("zoomprev").on("click", function () {
                navToolbar.zoomToPrevExtent();
            });

            registry.byId("zoomnext").on("click", function () {
                navToolbar.zoomToNextExtent();
            });

            registry.byId("pan").on("click", function () {
                navToolbar.activate(Navigation.PAN);
            });

            registry.byId("deactivate").on("click", function () {
                navToolbar.deactivate();
            });

            function extentHistoryChangeHandler() {
                registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
                registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
            }

        });


           var t = "<b>${NAME}</b> [${RATING}/5]<br>" +
"${WEBSITE}<br>" + "${DESCRIPTION}";
           //create the info template object and pass the template
           var infoTemplate = new esri.InfoTemplate("Identify", t);
           //assign the infotemplate so it applies on every feature in this

           layer3.setInfoTemplate(infoTemplate);







       }); 
   </script>

</head>

<body class="tundra" >



       <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainer" style="width:100%;height:100%;">

  <div data-dojo-type="dojox.layout.ExpandoPane" title="Legend" data-dojo-props="title: 'legend', maxWidth:225, splitter:true, region:'leading'" style="width: 225px;">
   <div id="legendDiv"></div>
  </div>
  <div data-dojo-type="dijit.layout.ContentPane" id="mymap" data-dojo-props="splitter:true, region:'center'">

  </div>

   <div data-dojo-type="dijit.layout.ContentPane" id="top" data-dojo-props="splitter:true, region:'top'">

<div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Navigation', onClick:function(){dijit.byId('dFloatingPane').show();}"></div>
<!-- makes example preview div big enough: --><div style="height:30px;width:100%;"></div>

  </div>

</div>




    <div data-dojo-type="dojox/layout/FloatingPane" id="dFloatingPane" 
   title="A floating pane" data-dojo-props="resizable:false, dockable:true, title:'Navigation' ,closable: false",
   style="position:absolute;top:100px;left:300px;width:100px;height:300px;visibility:show;">


      <div data-dojo-type="dijit/form/Button" id="zoomin"   >Zoom In</div>
      <div data-dojo-type="dijit/form/Button" id="zoomout" >Zoom Out</div>
      <div data-dojo-type="dijit/form/Button" id="zoomfullext" >Full Extent</div>
      <div data-dojo-type="dijit/form/Button" id="zoomprev" >Prev Extent</div>
      <div data-dojo-type="dijit/form/Button" id="zoomnext" >Next Extent</div>
      <div data-dojo-type="dijit/form/Button" id="pan" >Pan</div>
      <div data-dojo-type="dijit/form/Button" id="deactivate" >Deactivate</div>
    </div>





</body>
</html>

最佳答案

问题似乎出在您的 dijit.layout.ContentPane 布局没有监听 Co​​ntentPane 的 region: top 部分。

首先，它应该有助于更正布局的一般顺序。如果您首先想要“顶部”ContentPane，请将它放在您的 dijit.layout.BorderContainer 中的第一个位置。文档表明这应该可以在没有实际排序 div 的情况下工作，但由于它不是，所以一定是其他地方出了问题。

其次，您似乎没有设置 ContentPanes 的大小。 Dojo 文档建议您需要设置大小:

Sizes are specified for the edge regions in pixels or percentage using CSS – height for top and bottom and width for the sides. You might specify a top region of height:100px and a left region of width:50%. The center must not have any dimensions specified in CSS as it resizes automatically to fill the remaining space.

请记住，对于区域:top、center、bottom 仅应用高度样式而不应用宽度；左右面板仅应用宽度样式。

参见 dijit/layout/LayoutContainer documentation (因为 LayoutContainer 是 ContentPane 的基类)以获取有关区域及其工作方式的更多信息。

关于html - 如何更改 dojo float Pane 图标的位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31244449/

24 4 0
文章推荐： swift - 如何使用 Siesta Swift 使另一个 ViewController 的发布请求返回的响应对象附加到 TableViewController
文章推荐： swift/AppleScript : Cannot run apple script from Swift code
文章推荐： ios - 快速应用程序崩溃并出现错误 Bootstrap BKSProcessErrorDomain
文章推荐： javascript - angularjs 和范围问题(我认为)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com