这一节描述如何为堆中的元素进行定位
堆子元素的位置
通常,stack的子元素为与堆的大小匹配会自动扩展。然而,你也可以将其子元素放在指定的位置。例如,如果一个堆有两个按钮子元素,一个房子左边缘20像素,距顶部50像素。第二个可以房子距离左边缘100像素而距离顶部5像素。
可以通过设置两个属性来指定子元素的位置,水平方向上使用left属性,竖直方向上使用top属性。如果你在stack的子元素中不指定这些属性,就会扩展以匹配堆的尺寸。
例子1:
<stack> <button label="Goblins" left="5" top="5"/> <button label="Trolls" left="60" top="20"/> <button label="Vampires" left="10" top="60"/> </stack> |
这个堆有三个子元素,每个元素都使用了left和top属性来定位。这里所有的子元素都是按钮,但是并不是所有的子元素必须是同一类型。可以是任意元素,包括格子或者其他堆。
堆的大小由所有紫云山的位置来决定,总会将大小调整到所有子元素都可见的大小。如果你将left属性设置为400,堆将会有一个400加上元素宽度的宽度。你也可以通过各种样式的不同属性如width。Max-width等来重写这个尺寸。
也可以通过脚本来调整left和top的值,这样就会使元素移动。堆的优点是当一个指定位置元素位置发生变化时,其他元素不会受到影响。如果在格子中移动子元素,其他元素可能会动态的改它们的位置。
你也可以将元素重叠起来。当绘制子元素的时候,元素会按照它们出现在堆中的顺序出现。就是说,第一个子元素在最后面。最后一个元素出现在顶部。你可以使用DOM函数来改变子元素的顺序。
在响应鼠标事件的时候,顶部的元素会最先获取这个事件。也就是说如果有两个按钮重叠起来了,最上面的那个按钮会捕获到鼠标点击的事件。
下一节描述标签格子(tabboxes),与面板相似但有自己的外观