Fatal编程技术网
  • html/
  • Html 如何更改dojo浮动窗格图标的位置？

Html 如何更改dojo浮动窗格图标的位置？

html css dojo

Html 如何更改dojo浮动窗格图标的位置？,html,css,dojo,Html,Css,Dojo,我对使用dojo工具包是新手。我创建了一个浮动窗格并在其中添加了一些工具。问题是浮动窗格图标默认位于页面上（左下）。我想把位置改为顶部。如何更改浮动窗格的位置？ 无标题页 html，正文{ 身高：100%； 宽度：100%； 保证金：0； 填充：0； 溢出：隐藏； } #我的地图{ 填充：0； } 要求（[“dojo/parser”、“esri/InfoTemplate”、“esri/layers/FeatureLayer”、“esri/map”、“dijit/Toolbar”、“esri/

我对使用dojo工具包是新手。我创建了一个浮动窗格并在其中添加了一些工具。问题是浮动窗格图标默认位于页面上（左下）。我想把位置改为顶部。如何更改浮动窗格的位置？ 


无标题页
html，正文{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
溢出：隐藏；
}
#我的地图{
填充：0；
}
要求（[“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”]、函数（解析器、信息模板）{
parser.parse（）；
var sr=新的esri.SpatialReference（{wkid:4326}）；
//创建数据块对象
var Startexent=新esri几何体范围（-88.27,17.47，-88.16,17.54，sr）；
//创建地图对象并将其加载到“mymap”中
var map=new esri.map（“mymap”，{extent:startexent}）；
var layer3=新esri.layers.FeatureLayer（“http://...:6080/arcgis/rest/services/bestaurants/MapServer/0“，{外场：[“*”]}）；
var layer2=新esri.layers.FEATUREAYER（“http://...:6080/arcgis/rest/services/bestaurants/MapServer/1“，{外场：[“*”]}）；
//var layer=新esri.layers.ArcGISDynamicMapServiceLayer（“http://...:6080/arcgis/rest/services/bestaurants/MapServer");
map.addLayer（第2层）；
地图添加层（第3层）；
//传奇
VarLegend=newESRI.dijit.legend（{map:map}，“legendDiv”）；
legend.startup（）；
//概述
var overview=new esri.dijit.OverviewMap（{map:map}）；
概述.startup（）；
//鳞片
var scalebar=new esri.dijit.scalebar（{map:map}）；
//导航工具栏
要求（[“esri/Toolbar/navigation”、“dojo/on”、“dojo/parser”、“dijit/registry”、“dijit/Toolbar”、“dijit/form/Button”、“dojo/domReady！”、“esri/layers/FeatureLayer”、“esri/InfoTemplate”、“dijit/form/Button”]，
函数（导航、打开、解析器、注册表）{
parser.parse（）；
导航工具栏=新导航（地图）；
在（导航工具栏上，“onExtentHistoryChange”，ExtentThistoryChangeHandler）；
registry.byId（“zoomin”）。在（“单击”）上，函数（）{
导航工具栏。激活（导航。放大）；
});
registry.byId（“zoomout”）。打开（“单击”，函数（）{
导航工具栏。激活（导航。缩小）；
});
registry.byId（“zoomfullext”）。打开（“单击”，函数（）{
navToolbar.zoomToFullExtent（）；
});
registry.byId（“zoomprev”）。打开（“单击”，函数（）{
navToolbar.zoomtoprevent（）；
});
registry.byId（“zoomnext”）。在（“单击”上，函数（）{
navToolbar.zoomtonextent（）；
});
registry.byId（“pan”）。在（“单击”）上，函数（）{
navToolbar.activate（Navigation.PAN）；
});
registry.byId（“停用”）。在（“单击”）上，函数（）{
navToolbar.deactivate（）；
});
函数extendThistoryChangeHandler（）{
registry.byId（“zoomprev”）.disabled=navToolbar.isFirstExtent（）；
registry.byId（“zoomnext”）.disabled=navToolbar.isLastExtent（）；
}
});
var t=“${NAME}[${RATING}/5]
”+
“${WEBSITE}
”+“${DESCRIPTION}”；
//创建信息模板对象并传递模板
var infoTemplate=新的esri.infoTemplate（“识别”，t）；
//指定infotemplate，使其应用于此应用程序中的每个功能
第三层：设置信息模板（infoTemplate）；
}); 
放大
缩小
完整范围
前范围
下一个范围
平底锅
使停止工作
问题似乎出在您的
dijit.layout.ContentPane
布局没有监听ContentPane的
区域：top
部分

首先，它应该有助于纠正布局的一般顺序。如果您想首先使用“top”内容窗格，请将其放在您的
dijit.layout.BorderContainer
中。文档表明，这应该在没有实际的div排序的情况下工作，但既然不是这样，那么肯定是其他地方出了问题

其次，您似乎没有设置内容窗格的大小。Dojo文档建议您需要设置大小：

使用CSS–顶部和底部的高度以及侧面的宽度，以像素或百分比为单位指定边缘区域的大小。您可以指定高度为100px的顶部区域和宽度为50%的左侧区域。中心不得在CSS中指定任何尺寸，因为它会自动调整大小以填充剩余空间

请记住，对于区域：顶部、中心、底部仅应用高度样式，而不应用宽度；左侧和右侧面板仅应用宽度样式

请参阅（因为LayoutContainer是ContentPane的基类），以了解有关区域及其工作方式的更多信息。

如何通过编程或声明方式创建浮动窗格？。上面的代码没有显示浮动窗格的代码。@frank我编辑了我的问题。感谢您需要更改浮动窗格的样式属性
它不起作用。当浮动最小化时，它会更改导航浮动窗格（图2），而不会更改浮动窗格图标位置（图1）。

<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>