MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

层和卡片

有时候需要将元素按照一系列重叠的卡片一样进行显示。堆和面板元素可以达到这一目的。

 容器

每一个XUL格子元素都是一个可以容纳其他元素的容器。有很多具有特殊样式的格子,例如工具条和标签面板。标签box可以创建不带有任何特殊属性的最简单格子。然而,具有特殊样式的格子与常规的格子一样对其内部的元素进行排列,只是他们有附加特性而已。

事实上,很多组件可以容纳其他元素。我们已经看到了按钮可以容纳除了默认元素之外的其他元素。滚动条也是也是一种特殊的格子类型,如果你不提供元素的话,他们会自己创建自己的元素。它也会自己处理滑块的运动。

接下来的几节,我们会介绍一些用来容纳其他元素的元素。他们都是有特殊样式的格子,可以将格子的所有属性都用在这些元素上。

  堆

元素stack是一个简单的格子,与其他格子的工作模式一样,只是它的子元素将会处于所有其他元素的最上面。第一个子元素会在最下面。第二个紧接着第一个,接着是第三个,等等。在一个堆中可以堆上任意多的元素。

属性orient没有什么意义,因为堆中的子元素都是一个在一个的上面,而不是一个紧挨一个的。堆的大小由最大的子元素的大小决定。但你可以使用CSS属性的width,height,min-width和其他相关属性来控制堆和他的子元素。

元素stack可以在需要为已经存在的元素添加状态指示器时使用。例如,进度条可能会用一个直条和上面一个label来创建。

带有阴影的堆

为了方便的使用stack元素,可能需要为它仿制很多CSS属性。比如像下面这样为它创建一个文字阴影的效果:

例子1:

<stack>

  <description value="Shadowed" style="padding-left: 1px; padding-top: 1px; font-size: 15pt"/>

  <description value="Shadowed" style="color: red; font-size: 15pt;"/>

</stack>

两个description元素都创建了一个大小为15点的文字。首先是通过在左边和顶部添加一个1像素的偏移。这样的结果是重复绘制文字'Shadowed'但会与另一个有一点点的偏移。

这种方法的比使用text-shadow有一些优势,因为你可以完全将主体文字与阴

影分开进行控制。它可以有自己的字体,下划线或者大小。(你甚至可以制作阴影闪烁的效果)。这在mozilla不支持CSS的文字阴影时也很有用。缺点是阴影的存在使得堆的尺寸变大了。。阴影效果对于创建禁用的按钮的外观很有用:

例子2:

<stack style="background-color: #C0C0C0">

  <description value="Disabled" style="color: white; padding-left: 1px; padding-top: 1px;"/>

  <description value="Disabled" style="color: grey;"/>

</stack>

这样安排文字和阴影颜色在某些平台上会产生禁用的外观

注意,鼠标点击或者按键按下的事件是在堆上顶部元素,即堆中的最后一个元素。就意味着按钮只有是堆中最后一个元素的时候才能工作。

  面板

元素deck也是和stack一样只在顶部显示一个子元素,但是面板一次只显示一个子元素。这对向导接口非常有用,其中一系列相似的面板顺序显示。你可以通过使面板中的内容发生变化而只创建一个窗口,而不是创建多个独立的窗口和导航按钮。

与堆相似,deck元素的直接子元素组成ianb的页面。面板的显示页面可以通过改变设置selectedIndex属性来控制显示出来的子元素。索引是一个数字,可以指定哪一个页面将会显示。页面索引起始值为0.因此第一个子元素的page0,第二个是page1,等等。

例子3:

<deck selectedIndex="2">

  <description value="This is the first page"/>

  <button label="This is the second page"/>

  <box>

    <description value="This is the third page"/>

    <button label="This is also the third page"/>

  </box>

</deck>

这里有三个页面,默认为显示第三个。第三个页面是一个格子,里面有两个元素。格子里面的元素和格子本身组成了一个页面。面板的大小是子元素中最大的大小这里就是第三个页面。

你可以在脚本中改变selectedIndex属性来对页面进行切换。更多关于这个方面的介绍在事件和DOM的章节

下一节将会描述如何定位堆中的元素

文档标签和贡献者

 此页面的贡献者: ziyunfei, JumuFENG, soundbbg
 最后编辑者: ziyunfei,