XUL_教程/列表控件

列表控件

列表控件用来在列表中显示许多的项目。用户可以从列表中选择一个项。

XUL提供两种类型的元素去创建列表，listbox元素用于创建多行的列表框，和menulist元素用于创建下拉列表框。它们的工作方法类似于在HTML中的 select元素，它们执行的功能相同，但XUL的元素包括更多的特性。

简单列表框使用listbox元素创建列表框，和使用listitem元素创建每个项目。例如，这个列表框有四行，每个项目使用一行。

例1 : Source View

<listbox>
  <listitem label="Butter Pecan"/>
  <listitem label="Chocolate Chip"/>
  <listitem label="Raspberry Ripple"/>
  <listitem label="Squash Swirl"/>
</listbox>

如HTML中的option元素，你可以使用value为每个项指定一个值。你也可以在脚本中使用这个值。列表框会默认设置一个合适的尺寸，但你可以通过rows属性来控制尺寸。通过设置它来确定在列表框中显示的行数。如果列表包括的项超出这个值，在显示时将会出现滚动条。

下面这个例子演示这些不同的特性：

例2 : Source View

<listbox rows="3">
  <listitem label="Butter Pecan" value="bpecan"/>
  <listitem label="Chocolate Chip" value="chocchip"/>
  <listitem label="Raspberry Ripple" value="raspripple"/>
  <listitem label="Squash Swirl" value="squash"/>
</listbox>

这个例子已改成一次只显示3行。已经为列表中的每个项目添加了值。列表框还有其他的一些特性，将在后面进行描述。

多列列表框

列表框也支持多列。每个单元格可以有独有的内容，即使只使用文本。当用户选择列表中的一个项目时，当前的行将被选中。你不能只选中其中的一个单元格。

在列表框中有两个标签可以使用。listcols元素用来对列信息进行控制，每个列指定一个listcol元素。在列表框中你将需要为每个列指定一个listcol元素。

listcell元素用于一行中的每个单元格。 如果你需要3列，你就需要增加3个listcell元素到每个listitem里面。要给单元格指定文本内容，替换listcell元素里面的label属性。

一个简单的例子，如果只有一个列，你也需要将 label属性直接地填充在listitem元素里面的listcell元素中, 看起来像前面的例子里一样。

下面是一个有2列和3行的列表框的例子：

例3 : Source View

<listbox>
  <listcols>
    <listcol/>
    <listcol/>
  </listcols>
  <listitem>
    <listcell label="George"/>
    <listcell label="House Painter"/>
  </listitem>
  <listitem>
    <listcell label="Mary Ellen"/>
    <listcell label="Candle Maker"/>
  </listitem>
  <listitem>
    <listcell label="Roger"/>
    <listcell label="Swashbuckler"/>
  </listitem>
</listbox>

表头行

列表框一直允许使用一个特殊的表头行。 这和正常的行显示有很大不同。你可以使用它来创建列头。有两个新的元素可以使用。

listhead元素用于表头行，就像listitem元素用于普通行。表头行不是普通行，因此使用脚本去获取列表的首行时获得的将是表头行的下一行。

listheader元素用于表头行里的单元格。使用 label属性设置表头行单元格的标签。

这是一个带表头行的简单例子:

例4 : Source View

<listbox>

  <listhead>
    <listheader label="Name"/>
    <listheader label="Occupation"/>
  </listhead>

  <listcols>
    <listcol/>
    <listcol flex="1"/>
  </listcols>

  <listitem>
    <listcell label="George"/>
    <listcell label="House Painter"/>
  </listitem>
  <listitem>
    <listcell label="Mary Ellen"/>
    <listcell label="Candle Maker"/>
  </listitem>
  <listitem>
    <listcell label="Roger"/>
    <listcell label="Swashbuckler"/>
  </listitem>

</listbox>

在这个例子中，flex属性用于制作灵活的列。这个属性将在最后一节中说明，这里它允许列进行水平扩展。你可以调整窗口的大小去查看列根据窗口而进行伸缩的效果。如果你水平缩小，表格中的标签会自动截成带省略号(...)的样子。你可以在表格或项中使用crop属性的值为none去禁止标签被截。

下拉列表

在HTML里可以使用select元素创建下拉列表。用户可以在文本框内看到一个单选并且点击箭头或其他类似按钮文本制做成不同的选项。其他的选择将会显示在一个弹出的窗口中。 XUL有一个menulist元素可以实现这种效果。它是使用在一个文本框的旁边加一个按钮。选中这个名字是因为当它被选中时会弹出一个菜单。

描述一个下拉列表需要三个元素。第一个是menulist 元素， 在按钮的旁边创建一个文本输入框。第二，menupopup，当按钮被点击时创建并显示弹出窗口。第三，menuitem，创建单独的选择。

下面的范例很好地描述了它的语法：

Example 5 : Source View

<menulist label="Bus">
  <menupopup>
    <menuitem label="Car"/>
    <menuitem label="Taxi"/>
    <menuitem label="Bus" selected="true"/>
    <menuitem label="Train"/>
  </menupopup>
</menulist>

这个菜单列表包括了四个项，全部都使用一个menuitem 元素。要显示菜单里的项，点击菜单列表中的箭头按钮。当一个被选中，它会在菜单列表中显示为选中。selected属性用于设置哪个被默认选中。

可编辑的菜单列表

默认情况，你只可以从列表中进行选择。你不能在它上面输入你自己的文本。一个特别的菜单列表允许编辑文件框中的文本。例如，浏览器的地址输入框有一个下拉列表去选择以前输入过的地址，但你也可以输入你自己的地址。

创建一个可编辑的菜单列表，像下面这样添加editable 属性:

例6 : Source View

<menulist editable="true">
  <menupopup>
    <menuitem label="www.mozilla.org"/>
    <menuitem label="www.xulplanet.com"/>
    <menuitem label="www.dmoz.org"/>
  </menupopup>
</menulist>

这里创建的地址输入框由三个预设的选择，用户可以从中选择或者他们可以在文本框内输入一个他们自己的地址。用户输入的文本不会添加到新的选择中。因为label属性没有用在这个例子中，默认是空的。

在下一节我们将会学习creating progress meters。