题
我有一个像这样定义的可拖动YUI面板
new YAHOO.widget.Panel("parameters", {
fixedcenter: true,
constraintoviewport: true,
underlay: "shadow",
visible: false,
close: true,
draggable: true,
width: "350px" });
当显示面板时,我希望它始终可见,即使滚动窗口也是如此。
由于 fixedcenter:true
,情况也是如此。问题是,当滚动窗口时,即使将窗口拖到其他位置,面板也会将自身定位到窗口的中心。
如何修改上面的定义,以便在滚动窗口时面板的位置相对于窗口保持不变?
解决方案
将面板容器包裹在具有固定位置的包装元素中,例如
<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中测试过它。
我已发布了一个自包含示例的来源,该示例将证明此工作正常。
其他提示
根据文档,将fixedcenter设置为:
&quot; contains&quot; 启用固定中心定位,与true一样 选项。但是,不像将属性设置为true,当 如果叠加层太大,则属性设置为“包含” 视口,当用户滚动时,它不会自动居中 或调整窗口大小(直到窗口大到足以包含窗口 覆盖)。这在Overlay具有两个标题的情况下非常有用 用户可能需要访问的页脚UI控件。
http://developer.yahoo.com/yui/docs/ YAHOO.widget.Overlay.html
不隶属于 StackOverflow