blob: 47201b797cd2cdd0841923b04201c2f9b0cfc587 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
---
title: 网格
slug: Mozilla/Tech/XUL/Tutorial/Grids
translation_of: Archive/Mozilla/XUL/Tutorial/Grids
---
<p>XUL有一系列的元素来创建表格布局</p>
<h3 id="XUL的表格布局"> XUL的表格布局</h3>
<p>使用grid元素可以在XUL中使用一系列的元素来进行元素的布局。这与HTML中的table有很大的相似性。网格本身不会有任何的显示，它仅仅是使用行和列的形式来定位其他元素。</p>
<p>一个网格内部的元素排列成行。在grid里面，你需要声明两种东西，columns和rows。正如HTML的table，你可以将label和button等内容放在row里面。但是，grid只支持单独的row或者单独的column，因此你可以将内容放在rows里面或者columns里面。通常是使用rows。但是在grid中你还是可以使用column并制定其大小和显示方式。或者你可以将内容放在columns里面，然后用row来指定其显示方式。首先看看以row的方式组织元素的方法。</p>
<h4 id="声明一个网格">声明一个网格</h4>
<p>使用rows标签来声明一系列的row。Rows必须是grid的子元素。在rows里面你可以添加row元素，row用在每一行。在row元素中你可以放任何你想要的内容在里面。</p>
<p>相似的，列由columns来声明。其中有单独的column元素，每个你想添加的列都是一个column元素。</p>
<p>用一个例子更容易理解。</p>
<p>例子1：</p>
<p><img alt=""></p>
<table>
<tbody>
<tr>
<td style="width: 568px;">
<p><grid flex="1"></p>
<p> <columns></p>
<p> <column flex="2"/></p>
<p> <column flex="1"/></p>
<p> </columns></p>
<p> <rows></p>
<p> <row></p>
<p> <button label="Rabbit"/></p>
<p> <button label="Elephant"/></p>
<p> </row></p>
<p> <row></p>
<p> <button label="Koala"/></p>
<p> <button label="Gorilla"/></p>
<p> </row></p>
<p> </rows></p>
<p></grid></p>
</td>
</tr>
</tbody>
</table>
<p>添加了一个两行两列的grid。每个列由一个column标签声明。每一列都设置了flex属性。每行航油两个元素都是半年。每个单元格不需要进行声明，可以直接将内容放在row元素里面。</p>
<h4 id="带有更多元素的网格">带有更多元素的网格</h4>
<p>你可以使用任何元素来代替上面的button元素，。如果你想要一个详细的关于容纳多个元素的单元，你可以使用嵌套的hbox或者其他box元素。一个hbox元素是一个单一的元素，但是你可以在里面放任意多的元素。例如：</p>
<p>例子2：</p>
<table>
<tbody>
<tr>
<td style="width: 568px;">
<p><grid flex="1"></p>
<p> </p>
<p> <columns></p>
<p> <column/></p>
<p> <column flex="1"/></p>
<p> </columns></p>
<p> </p>
<p> <rows></p>
<p> <row></p>
<p> <label control="doctitle" value="Document Title:"/></p>
<p> <textbox id="doctitle" flex="1"/></p>
<p> </row></p>
<p> <row></p>
<p> <label control="docpath" value="Path:"/></p>
<p> <hbox flex="1"></p>
<p> <textbox id="docpath" flex="1"/></p>
<p> <button label="Browse..."/></p>
<p> </hbox> </p>
<p> </row></p>
<p> </rows></p>
<p> </p>
<p></grid></p>
</td>
</tr>
</tbody>
</table>
<p><img alt=""></p>
<p>注意第二列的第二行，含有一个box，box里面有一个文本框和一个按钮。你可以添加嵌套的box或者在里面放置另外一个grid。</p>
<p>由于第二行和文本框都设置了flex属性，所以改变窗口尺寸的时候文本框会改变大小，而其他元素不会改变。</p>
<p>一列的宽度由该列中最宽的元素决定。同牙膏的一行的高度由这一行中最高的元素决定。你可以使用minwidth和maxwidth以及相关的属性来对尺寸作更多的定义。</p>
<h4 id="按列组织">按列组织</h4>
<p>你也可以在列中添加元素，这样一来，row元素就只是用来表示有多少行了。</p>
<p>例子3：</p>
<table>
<tbody>
<tr>
<td style="width: 568px;">
<p><grid></p>
<p> <rows></p>
<p> <row/></p>
<p> <row/></p>
<p> <row/></p>
<p> </rows></p>
<p> </p>
<p> <columns></p>
<p> <column></p>
<p> <label control="first" value="First Name:"/></p>
<p> <label control="middle" value="Middle Name:"/></p>
<p> <label control="last" value="Last Name:"/></p>
<p> </column></p>
<p> <column></p>
<p> <textbox id="first"/></p>
<p> <textbox id="middle"/></p>
<p> <textbox id="last"/></p>
<p> </column></p>
<p> </columns></p>
<p> </p>
<p></grid></p>
</td>
</tr>
</tbody>
</table>
<p>这个网格有桑航两列。元素row仅仅表示有多少行。你可以添加flex属性来使其自适应。内容在每一列中。</p>
<p>如果你在列和行中都填内容，内容将会相互覆盖，不过他们会在grid中合适的进行排列。就像在网格中有堆元素一样。</p>
<p>Grid中元素的顺序决定了哪一个会显示在上面，哪一个在下面。如果rows元素放在columns元素后面，在rows中的内容会显示在上面。如果columns放在rows元素后面，列中的内容会显示在上面。事件的获取也一样。</p>
<h4 id="网格自适应">网格自适应</h4>
<p>网格的一个优点是在一系列嵌套box中你可以创建在水平和竖直方向上都自适应的单元格。你可以通过使用flex属性在row和column元素上来实现。下面的例子说明了这一点：</p>
<p>例子4：</p>
<table>
<tbody>
<tr>
<td style="width: 568px;">
<p><grid flex="1"></p>
<p> <columns></p>
<p> <column flex="5"/></p>
<p> <column/></p>
<p> <column/></p>
<p> </columns></p>
<p> <rows></p>
<p> <row flex="10"></p>
<p> <button label="Cherry"/></p>
<p> <button label="Lemon"/></p>
<p> <button label="Grape"/></p>
<p> </row></p>
<p> <row flex="1"></p>
<p> <button label="Strawberry"/></p>
<p> <button label="Raspberry"/></p>
<p> <button label="Peach"/></p>
<p> </row></p>
<p> </rows></p>
<p></grid></p>
</td>
</tr>
</tbody>
</table>
<p>第一列和所有两行都设置为自适应。这样的结果是第一列中的单元格在水平方向上自适应，另外每个单元格都会在竖直方向上自适应，因为两行都是自适应的，不过第一行还不止这样。第一列和第一行的单元格将会在水平方向上以5的倍率伸缩，在竖直方向上以10的倍率伸缩。</p>
<p>元素grid也要设置flex属性，这样所有的网格才能自适应，否则就只会在一个方向上自适应。</p>
<h3 id="列宽扩展">列宽扩展</h3>
<p>让很多行和列中的一个单元格扩展是没有意义的。但是可以让一行或者一列整个的扩展。为了实现这一点只需要在rows元素中添加一个元素。比如可以使用一个box样式。让回将其他元素放在里面。下面是一个简单的例子：</p>
<p>例子5：</p>
<table>
<tbody>
<tr>
<td style="width: 568px;">
<p><grid></p>
<p> <columns></p>
<p> <column flex="1"/></p>
<p> <column flex="1"/></p>
<p> </columns></p>
<p> </p>
<p> <rows></p>
<p> <row></p>
<p> <label value="Northwest"/></p>
<p> <label value="Northeast"/></p>
<p> </row></p>
<p> <button label="Equator"/></p>
<p> <row></p>
<p> <label value="Southwest"/></p>
<p> <label value="Southeast"/></p>
<p> </row></p>
<p> </rows></p>
<p></grid></p>
</td>
</tr>
</tbody>
</table>
<p>按钮将会扩展以适合整个grid的宽带，因为它不是一个grid的行中的元素。你也可以将相似的方式用在两个列中。这样就会扩展以一与网格的高度相适应。你可以在行和列上都使用，如果你想这样做。</p>
<p>下一节我们来看看内容面板</p>
|
