2

我有一个像这样定义的可拖动 YUI 面板

new YAHOO.widget.Panel("parameters", {
                        fixedcenter: true,
                        constraintoviewport: true,
                        underlay: "shadow",
                        visible: false,
                        close: true,
                        draggable: true,
                        width: "350px" });

显示面板时，我希望它始终可见，即使在窗口滚动时也是如此。情况也是如此，感谢fixedcenter: true. 问题是，当窗口滚动时，面板会将自身定位到窗口的中心，即使它之前被拖到其他地方也是如此。

我应该如何修改上述定义，以便在滚动窗口时面板的位置相对于窗口保持不变？

4

2 回答 2

4

将您的面板容器包装在具有固定定位的包装元素中，例如

<div id="wrapper" style="position: fixed">
    <div id="parameters">
        <div class="hd">Header</div>
        <div class="bd">Hello, this is my awesome panel.</div>
        <div class="ft">Footer</div>
    </div>
</div>

构建没有fixedcenter配置属性的面板，并在渲染后立即将面板居中，例如

var panel = new YAHOO.widget.Panel("parameters", {
        constraintoviewport: true,
        underlay: "shadow",
        visible: false,
        close: true,
        draggable: true,
        width: "350px"
    });
panel.render();
panel.center();

当窗口滚动时，面板现在应该保持在相同的位置。我只在 Firefox 3.0 和 Internet Explorer 7 和 8 中对此进行了测试。

我已经发布了一个独立示例的源代码，该示例将演示此工作。

于 2009-03-25T06:24:25.300 回答
0

根据文档，将 fixedcenter 设置为：

"contained"启用固定中心定位，与 true 选项一样。但是，与将属性设置为 true 不同的是，当属性设置为“包含”时，如果叠加层对于视口来说太大，则在用户滚动或调整窗口大小时不会自动居中（直到窗口足够大包含覆盖）。这在 Overlay 同时具有用户可能需要访问的页眉和页脚 UI 控件的情况下很有用。

http://developer.yahoo.com/yui/docs/YAHOO.widget.Overlay.html

于 2013-02-19T15:24:15.983 回答