0

我需要用 9 个 YUI 面板构建一个 3 x 3 的页面。

我可以用 YUI 网格构建 3 个 33% 的垂直列。3 个面板出现在三列中。但是,当我在每列中放置 3 个面板(显示在另一个下方)时,它会相互堆叠。我想我应该给 x,y 坐标来对齐它,但是面板高度可能会有所不同,所以我可能需要动态确定 x,y 坐标。

代码有点像这样(在 Django 中使用 - 扩展主页面的子页面将其作为面板内容): -

<div id="doc3">
<div id="bd" role="main">
<div class="yui-gb">
<div class="yui-u first">
{% block panel1 %}{% endblock %}
{% block panel2 %}{% endblock %}
{% block panel3 %}{% endblock %}
</div>
<div class="yui-u">
{% block panel4 %}{% endblock %}
{% block panel5 %}{% endblock %}
{% block panel6 %}{% endblock %}
</div>
<div class="yui-u">
{% block panel7 %}{% endblock %}
{% block panel8 %}{% endblock %}
{% block panel9 %}{% endblock %}
</div>
</div>
</div>
</div>

我渲染使用: -

YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { width:"390px", visible:true, constraintoviewport:true } );
YAHOO.example.container.panel1.render();

我尝试使用上下文来做一些事情,比如将一个面板与另一个面板的底部对齐,比如给context:["panel1","bl","tl]应该位于 panel1 下方的面板。但似乎没有帮助。

Any pointers to do this - position YUI panels one below another in a YUI grid?

4

1 回答 1

0

As of now used below to position one panel below another. Found the underlay (shadow, matte etc) not to be moving, set it for "none" as of now. Need to research some more.

panel4y = YAHOO.util.Dom.getY('panel1') + document.getElementById("panel1").offsetHeight + 10;
YAHOO.util.Dom.setY('panel4',panel4y);
于 2011-02-28T11:30:14.293 回答