YUI 面板和滚动答案

【问题标题】：YUI Panel and scrollingYUI 面板和滚动
【发布时间】：2010-10-12 02:01:59
【问题描述】：

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

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

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

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

【问题讨论】：

标签： scroll yui panel

【解决方案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 的一个独立的例子来证明这个工作。

【讨论】：

【解决方案2】：

根据文档，将固定中心设置为：

"contained" 启用固定中心定位，与真正的选项。但是，与将属性设置为 true 不同的是，当属性设置为“包含”，如果覆盖对于视口，当用户滚动时它不会自动居中或调整窗口大小（直到窗口大到足以容纳覆盖）。这在覆盖具有两个标题的情况下很有用用户可能需要访问的页脚 UI 控件。

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

【讨论】：