Question

我以声明方式创建了一个简单的浮动窗格（下面的代码）。一切都是好的。我有一个单击它的按钮，浮动窗格将打开。问题是，如果我再次单击该按钮，浮动窗格位置将从之前的位置更改。如何设置浮动窗格的位置。另一个问题是top，left和position：绝对不适用于我的浮动窗格。 enter image description here

    <body  class="claro" role="main">

<div id="bc" style="width:100%; height:100%; padding: 5px;" dojoType="dijit.layout.BorderContainer">
    <div id="header" dojoType="dijit.layout.ContentPane" region="top" splitter="true">

    </div>

    <div dojoType="dojox.layout.ExpandoPane"
         splitter="true"
         duration="125"
         region="left"

         previewOnDblClick="true"
         id="leftPane"
         maxWidth="275"
         style="width: 275px;">
        <div dojoType="dijit.layout.TabContainer" attachParent="true" tabPosition="bottom" tabStrip="true">
            <div dojoType="dijit.layout.ContentPane" title="Legend">

                <div id="legendDiv"></div>
            </div>
            <div dojoType="dijit.layout.AccordionContainer" title="Search" style="width:275px;" attachParent="true">
                <div dojoType="dijit.layout.ContentPane" title="Attribute search">
                    <div class="searchBar">
                        <p>
                            <label for="searchBox" style="float: left;">Search:</label>
                            <input id="searchBox" name="searchBox" style="float: left;">
                                <span id="runSearchIcon" style="border: none; floast: left; padding: 3px;">

                                </span>
                        </p>
                    </div>
                    <ul id="dojoList"></ul>
                </div>
                <div dojoType="dijit.layout.ContentPane" title="spatial search">
                    <ul id="dijitList"></ul>
                </div>

            </div>

        </div>
    </div>
    <div dojoType="dijit.layout.ContentPane" region="center" id="centerPane" tabStrip="true">

        <div id="mymap" style="width:100%;height:100%">   </div>








        <div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"
             title="A floating pane" data-dojo-props="resizable:false, dockable:true,closable:false, title:'Tools'"
             style="position:absolute;top: 100px;;left:0;width:70px;height:150px;visibility:hidden;">
            This is the content of the pane!
        </div>

        <div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Show me', onClick:function(){dijit.byId('dFloatingPane').show();}" style="position:absolute;top: 150px;left: 20px;"></div>

    </div>
</div>

</div>
</body>

Answer 1

简单的解决方案只是创建一个div并设置位置相对，位置相对控制绝对，这里是示例代码例如。检查并理解

   <div style="position:relative">
      <div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"
         title="A floating pane" data-dojo-props="resizable:false, dockable:true,closable:false, title:'Tools'"
         style="position:absolute; top: 100px; left:0; width:70px;height:150px; visibility:hidden;">
        This is the content of the pane!
    </div>

    <div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Show me', onClick:function(){dijit.byId('dFloatingPane').show();}" style="position:absolute;top: 150px;left: 20px;"></div>

   </div>

位置：相对控制位置：绝对，所以你可以设置你的顶部或底部位置符合你的dessign thanku，希望你理解我的观点。

Answer 2

最简单的方法是设置位置：使用domStyle将Button上的每次单击设置为第一个位置。

     domStyle.set("dFloatingPane",{
                position:"absolute",
                top:"100px",
                left:"0px"
            });

如何在dojo中设置浮动窗格的位置？

2 个答案: