html - 如何在 dojo 中设置 float Pane 的位置?

标签 html css dojo

我以声明方式创建了一个简单的 float Pane (以下代码)。一切都很好。我有一个单击它的按钮, float Pane 将打开。问题是,如果我再次单击该按钮, float Pane 的位置就会从以前的位置发生变化。我如何设置 float Pane 的位置。另一个问题是顶部、左侧和position:absolute不适用于我的 float Pane 。 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>

最佳答案

最简单的方法是使用 domStyle 将每次单击 Button 时的 position:absolut 设置为第一个位置。

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

关于html - 如何在 dojo 中设置 float Pane 的位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31370201/

相关文章:

html - 将 2 个表格的单元格列对齐在一起

html - 如何使用@foreach 将表格中最后一行的文本设为粗体?

javascript - DOJO 是否有类似于 .ajaxComplete() 的方法来监听多个 AJAX 调用何时完成或成功?

grails - 在grails 2.2.3上安装本地dojo插件

javascript - CSS/Javascript 自动滚动到顶部

javascript - 如何配置 dojo.FilteringSelect 以匹配通配符值?

html - 如何垂直居中图像并使其填充可用宽度

css - Html <div> 元素背景图像不显示,div 内也没有任何内容

javascript - 如何为 slider 的分页按钮创建简单的下一个和上一个触发按钮?

javascript - 如何使用 jquery 更改表格单元格背景颜色