mozilla

比较版本

XUL_教程/列表控件

更改版本

修订版 272927:

由 宋晓光 在 进行的修订 272927

修订版 221687:

由 宋晓光 在 进行的修订 221687

标题:
XUL_教程/列表控件
列表控件
网址缩略名:
XUL_教程/列表控件
XUL_教程/列表控件
标签:
XUL_教程
内容:

修订版 272927
修订版 221687
t7    <p>t
8      {{ PreviousNext("XUL Tutorial:Numeric Controls", "XUL Tutor
>ial:Progress Meters") }} 
9    </p>
10    <p>
11      &nbsp;
12    </p>
13    <h3 id=".E5.88.97.E8.A1.A8.E6.8E.A7.E4.BB.B6" name=".E5.88.97
>.E8.A1.A8.E6.8E.A7.E4.BB.B6"> 
14      列表控件
15    </h3>
16    <p>
17      列表控件用来在列表中显示许多的项目。用户可以从列表中选择一个项。
18    </p>
19    <p>
20      XUL提供两种类型的元素去创建列表,<code>{{ XULElem("listbox") }}</code>元素用于
>创建多行的列表框,和<code>{{ XULElem("menulist") }}</code>元素用于创建下拉列表框。它们的工作 
>方法类似于在HTML中的 <code>select</code>元素,它们执行的功能相同,但XUL的元素包括更多的特性。 
21    </p>
22    <p>
23      简单列表框使用<code>{{ XULElem("listbox") }}</code>元素创建列表框,和使用<cod
>e>{{ XULElem("listitem") }}</code>元素创建每个项目。例如,这个列表框有四行,每个项目使用一行。 
24    </p>
25    <p>
26      {{ Block-title("例1") }}&nbsp;: {{ Xultu-sv("ex_lists_1.xul"
>) }} 
27    </p>
28    <div class="float-right">
29      <img alt="图像:lists1.png" class=" internal" src="/@api/deki/
>files/2628/=Lists1.png"> 
30    </div>
31    <pre>
32&lt;listbox&gt;
33  &lt;listitem label="Butter Pecan"/&gt;
34  &lt;listitem label="Chocolate Chip"/&gt;
35  &lt;listitem label="Raspberry Ripple"/&gt;
36  &lt;listitem label="Squash Swirl"/&gt;
37&lt;/listbox&gt;
38</pre>
39    <p>
40      如HTML中的<code>option</code>元素,你可以使用<code>{{ XULAttr("value")
> }}</code>为每个项指定一个值。你也可以在脚本中使用这个值。列表框会默认设置一个合适的尺寸,但你可以通过<code>{{  
>XULAttr("rows") }}</code>属性来控制尺寸。通过设置它来确定在列表框中显示的行数。如果列表包括的项超出这个值 
>,在显示时将会出现滚动条。 
41    </p>
42    <p>
43      下面这个例子演示这些不同的特性:
44    </p>
45    <p>
46      {{ Block-title("例2") }}&nbsp;: {{ Xultu-sv("ex_lists_2.xul"
>) }} 
47    </p>
48    <pre>
49&lt;listbox rows="3"&gt;
50  &lt;listitem label="Butter Pecan" value="bpecan"/&gt;
51  &lt;listitem label="Chocolate Chip" value="chocchip"/&gt;
52  &lt;listitem label="Raspberry Ripple" value="raspripple"/&gt;
53  &lt;listitem label="Squash Swirl" value="squash"/&gt;
54&lt;/listbox&gt;
55</pre>
56    <p>
57      这个例子已改成一次只显示3行。已经为列表中的每个项目添加了值。列表框还有其他的一些特性,将在后面进行描述。
58    </p>
59    <h3 id=".E5.A4.9A.E5.88.97.E5.88.97.E8.A1.A8.E6.A1.86" name="
>.E5.A4.9A.E5.88.97.E5.88.97.E8.A1.A8.E6.A1.86"> 
60      多列列表框
61    </h3>
62    <p>
63      列表框也支持多列。每个单元格可以有独有的内容,即使只使用文本。当用户选择列表中的一个项目时,当前的行将被选中。你不能只
>选中其中的一个单元格。 
64    </p>
65    <p>
66      在列表框中有两个标签可以使用。<code>{{ XULElem("listcols") }}</code>元素用来对列
>信息进行控制,每个列指定一个<code>{{ XULElem("listcol") }}</code>元素。在列表框中你将需要为每 
>个列指定一个<code>{{ XULElem("listcol") }}</code>元素。 
67    </p>
68    <p>
69      <code>{{ XULElem("listcell") }}</code>元素用于一行中的每个单元格。 如果你需要3
>列,你就需要增加3个<code>{{ XULElem("listcell") }}</code>元素到每个<code>{{ XUL 
>Elem("listitem") }}</code>里面。要给单元格指定文本内容,替换<code>{{ XULElem("list 
>cell") }}</code>元素里面的<code>{{ XULAttr("label") }}</code>属性。 
70    </p>
71    <p>
72      一个简单的例子,如果只有一个列,你也需要将 <code>{{ XULAttr("label") }}</code>属性
>直接地填充在<code>{{ XULElem("listitem") }}</code>元素里面的<code>{{ XULElem 
>("listcell") }}</code>元素中, 看起来像前面的例子里一样。 
73    </p>
74    <p>
75      下面是一个有2列和3行的列表框的例子:
76    </p>
77    <p>
78      {{ Block-title("例3") }}&nbsp;: {{ Xultu-sv("ex_lists_3.xul"
>) }} 
79    </p>
80    <pre>
81&lt;listbox&gt;
82  &lt;listcols&gt;
83    &lt;listcol/&gt;
84    &lt;listcol/&gt;
85  &lt;/listcols&gt;
86  &lt;listitem&gt;
87    &lt;listcell label="George"/&gt;
88    &lt;listcell label="House Painter"/&gt;
89  &lt;/listitem&gt;
90  &lt;listitem&gt;
91    &lt;listcell label="Mary Ellen"/&gt;
92    &lt;listcell label="Candle Maker"/&gt;
93  &lt;/listitem&gt;
94  &lt;listitem&gt;
95    &lt;listcell label="Roger"/&gt;
96    &lt;listcell label="Swashbuckler"/&gt;
97  &lt;/listitem&gt;
98&lt;/listbox&gt;
99</pre>
100    <h3 id=".E8.A1.A8.E5.A4.B4.E8.A1.8C" name=".E8.A1.A8.E5.A4.B4
>.E8.A1.8C"> 
101      表头行
102    </h3>
103    <p>
104      列表框一直允许使用一个特殊的表头行。 这和正常的行显示有很大不同。你可以使用它来创建列头。有两个新的元素可以使用。
105    </p>
106    <p>
107      <code>{{ XULElem("listhead") }}</code>元素用于表头行,就像<code>{{ XU
>LElem("listitem") }}</code>元素用于普通行。表头行不是普通行,因此使用脚本去获取列表的首行时获得的将是表 
>头行的下一行。 
108    </p>
109    <p>
110      <code>{{ XULElem("listheader") }}</code>元素用于表头行里的单元格。使用 <co
>de>{{ XULAttr("label") }}</code>属性设置表头行单元格的标签。 
111    </p>
112    <p>
113      这是一个带表头行的简单例子:
114    </p>
115    <p>
116      {{ Block-title("例4") }}&nbsp;: {{ Xultu-sv("ex_lists_4.xul"
>) }} 
117    </p>
118    <div class="float-right">
119      <img alt="Image:morelists1.png" class=" internal" src="/@ap
>i/deki/files/2629/=Morelists1.png"> 
120    </div>
121    <pre>
122&lt;listbox&gt;
123 
124  &lt;listhead&gt;
125    &lt;listheader label="Name"/&gt;
126    &lt;listheader label="Occupation"/&gt;
127  &lt;/listhead&gt;
128 
129  &lt;listcols&gt;
130    &lt;listcol/&gt;
131    &lt;listcol flex="1"/&gt;
132  &lt;/listcols&gt;
133 
134  &lt;listitem&gt;
135    &lt;listcell label="George"/&gt;
136    &lt;listcell label="House Painter"/&gt;
137  &lt;/listitem&gt;
138  &lt;listitem&gt;
139    &lt;listcell label="Mary Ellen"/&gt;
140    &lt;listcell label="Candle Maker"/&gt;
141  &lt;/listitem&gt;
142  &lt;listitem&gt;
143    &lt;listcell label="Roger"/&gt;
144    &lt;listcell label="Swashbuckler"/&gt;
145  &lt;/listitem&gt;
146 
147&lt;/listbox&gt;
148</pre>
149    <p>
150      在这个例子中,<code>{{ XULAttr("flex") }}</code>属性用于制作灵活的列。这个属性将在最
>后一节中说明,这里它允许列进行水平扩展。你可以调整窗口的大小去查看列根据窗口而进行伸缩的效果。如果你水平缩小,表格中的标签会自动截 
>成带省略号(...)的样子。你可以在表格或项中使用<code>{{ XULAttr("crop") }}</code>属性的值为< 
>code>none</code>去禁止标签被截。 
151    </p>
152    <h3 id=".E4.B8.8B.E6.8B.89.E5.88.97.E8.A1.A8" name=".E4.B8.8B
>.E6.8B.89.E5.88.97.E8.A1.A8"> 
153      下拉列表
154    </h3>
155    <p>
156      在HTML里可以使用<code>select</code>元素创建下拉列表。用户可以在文本框内看到一个单选并且点击箭头
>或其他类似按钮文本制做成不同的选项。其他的选择将会显示在一个弹出的窗口中。 XUL有一个<code>{{ XULElem("men 
>ulist") }}</code>元素可以实现这种效果。它是使用在一个文本框的旁边加一个按钮。选中这个名字是因为当它被选中时会弹出 
>一个菜单。 
157    </p>
158    <p>
159      描述一个下拉列表需要三个元素。第一个是<code>{{ XULElem("menulist") }}</code> 元
>素, 在按钮的旁边创建一个文本输入框。第二,<code>{{ XULElem("menupopup") }}</code>,当按钮 
>被点击时创建并显示弹出窗口。第三,<code>{{ XULElem("menuitem") }}</code>,创建单独的选择。 
160    </p>
161    <p>
162      下面的范例很好地描述了它的语法:
163    </p>
164    <p>
165      {{ Block-title("Example 5") }}&nbsp;: {{ Xultu-sv("ex_lists
>_5.xul") }} 
166    </p>
167    <div class="float-right">
168      <img alt="Image:inputs2.png" class=" internal" src="/@api/d
>eki/files/2627/=Inputs2.png"> 
169    </div>
170    <pre>
171&lt;menulist label="Bus"&gt;
172  &lt;menupopup&gt;
173    &lt;menuitem label="Car"/&gt;
174    &lt;menuitem label="Taxi"/&gt;
175    &lt;menuitem label="Bus" selected="true"/&gt;
176    &lt;menuitem label="Train"/&gt;
177  &lt;/menupopup&gt;
178&lt;/menulist&gt;
179</pre>
180    <p>
181      这个菜单列表包括了四个项,全部都使用一个<code>{{ XULElem("menuitem") }}</code> 
>元素。要显示菜单里的项,点击菜单列表中的箭头按钮。当一个被选中,它会在菜单列表中显示为选中。<code>{{ XULAttr("s 
>elected") }}</code>属性用于设置哪个被默认选中。 
182    </p>
183    <h4 id=".E5.8F.AF.E7.BC.96.E8.BE.91.E7.9A.84.E8.8F.9C.E5.8D.9
>5.E5.88.97.E8.A1.A8" name=".E5.8F.AF.E7.BC.96.E8.BE.91.E7.9A.84.E 
>8.8F.9C.E5.8D.95.E5.88.97.E8.A1.A8"> 
184      可编辑的菜单列表
185    </h4>
186    <p>
187      默认情况,你只可以从列表中进行选择。你不能在它上面输入你自己的文本。一个特别的菜单列表允许编辑文件框中的文本。例如,浏
>览器的地址输入框有一个下拉列表去选择以前输入过的地址,但你也可以输入你自己的地址。 
188    </p>
189    <p>
190      创建一个可编辑的菜单列表,像下面这样添加<code>{{ XULAttr("editable") }}</code> 
>属性: 
191    </p>
192    <p>
193      {{ Block-title("例6") }}&nbsp;: {{ Xultu-sv("ex_lists_6.xul"
>) }} 
194    </p>
195    <pre>
196&lt;menulist editable="true"&gt;
197  &lt;menupopup&gt;
198    &lt;menuitem label="www.mozilla.org"/&gt;
199    &lt;menuitem label="www.xulplanet.com"/&gt;
200    &lt;menuitem label="www.dmoz.org"/&gt;
201  &lt;/menupopup&gt;
202&lt;/menulist&gt;
203</pre>
204    <p>
205      这里创建的地址输入框由三个预设的选择,用户可以从中选择或者他们可以在文本框内输入一个他们自己的地址。用户输入的文本不会
>添加到新的选择中。因为<code>{{ XULAttr("label") }}</code>属性没有用在这个例子中,默认是空的。 
206    </p>
207    <p>
208      在下一节我们将会学习<a href="/cn/XUL_%E6%95%99%E7%A8%8B/Progress_Mete
>rs" title="cn/XUL_教程/Progress_Meters">creating progress meters</a 
>>。 
209    </p>
210    <p>
211      {{ PreviousNext("XUL Tutorial:Numeric Controls", "XUL Tutor
>ial:Progress Meters") }} 
212    </p>
213    <p>
214      {{ languages( { "ja": "ja/XUL_\u6559\u7a0b/\u5217\u8868\u63
>a7\u4ef6", "pl": "pl/Kurs_XUL/Kontrolki_list", "en" :"en/XUL_Tuto 
>rial/List_Controls" }) }} 
215    </p>

返回历史