diff options
Diffstat (limited to 'files/zh-cn/mozilla/tech/xul/tutorial/grids/index.html')
| -rw-r--r-- | files/zh-cn/mozilla/tech/xul/tutorial/grids/index.html | 175 |
1 files changed, 0 insertions, 175 deletions
diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/grids/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/grids/index.html deleted file mode 100644 index 47201b797c..0000000000 --- a/files/zh-cn/mozilla/tech/xul/tutorial/grids/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -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> |