DIV CSS 佈局教程網

列表控件用來在列表中顯示許多的項目。用戶可以從列表中選擇一個項。

　　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屬性沒有用在這個例子中，默認是空的。