Question

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

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

当显示面板时，我希望它始终可见，即使滚动窗口也是如此。由于fixedcenter: true，情况也是如此。问题是，当滚动窗口时，即使将窗口拖到其他位置，面板也会将自身定位到窗口的中心。

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

Answer 1

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

<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中测试过它。

我已经posted the source了一个自包含的例子，证明了这一点。

Answer 2

根据文档，将fixedcenter设置为：

“包含”启用固定中心定位，与true一样选项。但是，不像将属性设置为true，当如果叠加层太大，则属性设置为“包含” 视口，当用户滚动时，它不会自动居中或调整窗口大小（直到窗口大到足以包含窗口覆盖）。这在Overlay具有两个标题的情况下非常有用用户可能需要访问的页脚UI控件。

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

YUI面板和滚动

2 个答案: