aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/mozilla/tech/xul/tutorial/tabboxes/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 21:46:22 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 21:46:22 -0500
commita065e04d529da1d847b5062a12c46d916408bf32 (patch)
treefe0f8bcec1ff39a3c499a2708222dcf15224ff70 /files/zh-cn/mozilla/tech/xul/tutorial/tabboxes/index.html
parent218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (diff)
downloadtranslated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.gz
translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.bz2
translated-content-a065e04d529da1d847b5062a12c46d916408bf32.zip
update based on https://github.com/mdn/yari/issues/2028
Diffstat (limited to 'files/zh-cn/mozilla/tech/xul/tutorial/tabboxes/index.html')
-rw-r--r--files/zh-cn/mozilla/tech/xul/tutorial/tabboxes/index.html125
1 files changed, 0 insertions, 125 deletions
diff --git a/files/zh-cn/mozilla/tech/xul/tutorial/tabboxes/index.html b/files/zh-cn/mozilla/tech/xul/tutorial/tabboxes/index.html
deleted file mode 100644
index c8c3e527c7..0000000000
--- a/files/zh-cn/mozilla/tech/xul/tutorial/tabboxes/index.html
+++ /dev/null
@@ -1,125 +0,0 @@
----
-title: 分页组
-slug: Mozilla/Tech/XUL/Tutorial/Tabboxes
-tags:
- - tabbox
-translation_of: Archive/Mozilla/XUL/Tutorial/Tabboxes
----
-<p>选择对话框中经常出现标签页,这里我们将会了解如何创建它们。</p>
-<h3 id="分页组">分页组</h3>
-<p>在应用程序的选择窗口中经常出现典型的标签页。在窗口的顶部会出现一系列的标签。用户可以通过点击相应的标签来查看不同的选项集合。当你有很多选项而无法在一个屏幕中完全显示的时候非常有用。</p>
-<p>XUL也提供了一种方法来创建这样的对话框。包含五种新的元素,下面详细的介绍这几个元素。</p>
-<p><strong>tabbox</strong> 最外层的格子,含有顶部的标签和标签页。</p>
-<p><strong>tabs </strong>含有独立标签页的内部格。即这是一排标签</p>
-<p><strong>tabpanels</strong> 页面的容器</p>
-<p><strong>tabpanel </strong>一个单独的页面的主体。你可以将一个页面的内容放在里面。第一个tabpanel对应于第一个标签页,第二个对应第二个,等等。</p>
-<p>元素tabbox含有两个子元素,一个tabs元素和一个tabpanels元素。用法如下:</p>
-<table>
- <tbody>
- <tr>
- <td style="width: 568px;">
- <p>&lt;tabbox id="tablist"&gt;</p>
- <p>  &lt;tabs&gt;</p>
- <p>    &lt;!-- tab elements go here --&gt;</p>
- <p>  &lt;/tabs&gt;</p>
- <p>  &lt;tabpanels&gt;</p>
- <p>    &lt;!-- tabpanel elements go here --&gt;</p>
- <p>  &lt;/tabpanels&gt;</p>
- <p>&lt;/tabbox&gt;</p>
- </td>
- </tr>
- </tbody>
-</table>
-<p>元素tab放在tabs里面,这与常规的box很像。元素tab与box其实没有什么不同的。Tab可以容纳任何类型的元素。不同的是,tab的面板一次只显示一个页面,与deck很相像。</p>
-<p>每个标签页的内容应该放到每个tabpanel元素内部。他们不是在tab元素内部的。Tab元素的内容出现在顶部。</p>
-<p>每个tabpanel元素成为显示时的一个页面。最大的页面的尺寸用作整个tabbox的尺寸。</p>
-<h4 id="分页组实例">分页组实例</h4>
-<p>例子1:</p>
-<p><img alt=""></p>
-<table>
- <tbody>
- <tr>
- <td style="width: 568px;">
- <p>&lt;tabbox&gt;</p>
- <p>  &lt;tabs&gt;</p>
- <p>    &lt;tab label="Mail"/&gt;</p>
- <p>    &lt;tab label="News"/&gt;</p>
- <p>  &lt;/tabs&gt;</p>
- <p>  &lt;tabpanels&gt;</p>
- <p>    &lt;tabpanel id="mailtab"&gt;</p>
- <p>      &lt;checkbox label="Automatically check for mail"/&gt;</p>
- <p>    &lt;/tabpanel&gt;</p>
- <p>    &lt;tabpanel id="newstab"&gt;</p>
- <p>      &lt;button label="Clear News Buffer"/&gt;</p>
- <p>    &lt;/tabpanel&gt;</p>
- <p>  &lt;/tabpanels&gt;</p>
- <p>&lt;/tabbox&gt;</p>
- </td>
- </tr>
- </tbody>
-</table>
-<p>这里有两个标签页,一个mail一个news。当点击news标签的时候,带有'Clear News Buffer'按钮的页面会出现。</p>
-<p>当前选择的标签元素有一个selected属性值为true。这可以改变当前选择的标签页。一次只能有一个标签的selected属性为true。</p>
-<h4 id="标签页的位置">标签页的位置</h4>
-<p>最后,你可以改变标签页的位置以使他们出现这个页面的任意位置。没有特殊的语法。你可以简单的使用orient和dir属性来实现。注意在布局的时候记住tab元素就像一般的格子,而tabbox元素更像是常规的竖直容器,tabs元素更像是默认为水平的容器格子。</p>
-<p>例如,要将标签放到左边,可以将tabs元素的朝向改为竖直的。然后调整tabbox使其具有水平朝向。这会使得标签出现在左边而不是顶部。注意改变tabpanels元素的朝向没有影响,因为标签页是相互覆盖的。</p>
-<p>也可以通过将tabs元素放在tabpanels元素后面来实现将标签放在右边或者下面。或者,也可以将tabbox的dir属性设置为reverse来实现。但是你最好将标签放在上面,否则在某些流行的主题下可能看起来不是很好。</p>
-<h3 id="为查找文件对话框添加标签页。">为查找文件对话框添加标签页。</h3>
-<p>让我们为查找文件的对话框添加第二个panel。我们将会创建一个选项标签(并默认选择)来包含一些搜索选项。这可能不是最好的接口。但我们使用它来说明标签的使用。顶部的文字和搜索选择各种需要放在第一个标签中,我们将会添加一些选项在第二个标签中。进度条和按钮可以放在主窗口中,在标签外部。</p>
-<table>
- <tbody>
- <tr>
- <td style="width: 568px;">
- <p>&lt;vbox flex="1"&gt;</p>
- <p> </p>
- <p>&lt;tabbox selectedIndex="1"&gt;</p>
- <p>  &lt;tabs&gt;</p>
- <p>    &lt;tab label="Search"/&gt;</p>
- <p>    &lt;tab label="Options"/&gt;</p>
- <p>  &lt;/tabs&gt;</p>
- <p>  &lt;tabpanels&gt;</p>
- <p>   &lt;tabpanel id="searchpanel" orient="vertical"&gt;</p>
- <p> </p>
- <p>    &lt;description&gt;</p>
- <p>     Enter your search criteria below and select the Find button to begin</p>
- <p>     the search.</p>
- <p>    &lt;/description&gt;</p>
- <p> </p>
- <p>    &lt;spacer style="height: 10px"/&gt;</p>
- <p> </p>
- <p>    &lt;groupbox orient="horizontal"&gt;</p>
- <p>      &lt;caption label="Search Criteria"/&gt;</p>
- <p> </p>
- <p>      &lt;menulist id="searchtype"&gt;</p>
- <p>        &lt;menupopup&gt;</p>
- <p>          &lt;menuitem label="Name"/&gt;</p>
- <p>          &lt;menuitem label="Size"/&gt;</p>
- <p>          &lt;menuitem label="Date Modified"/&gt;</p>
- <p>        &lt;/menupopup&gt;</p>
- <p>      &lt;/menulist&gt;</p>
- <p>      &lt;spacer style="width: 10px;"/&gt;</p>
- <p>      &lt;menulist id="searchmode"&gt;</p>
- <p>        &lt;menupopup&gt;</p>
- <p>          &lt;menuitem label="Is"/&gt;</p>
- <p>          &lt;menuitem label="Is Not"/&gt;</p>
- <p>        &lt;/menupopup&gt;</p>
- <p>      &lt;/menulist&gt;</p>
- <p> </p>
- <p>      &lt;spacer style="height: 10px"/&gt;</p>
- <p>      &lt;textbox id="find-text" flex="1" style="min-width: 15em;"/&gt;</p>
- <p> </p>
- <p>    &lt;/groupbox&gt;</p>
- <p>   &lt;/tabpanel&gt;</p>
- <p>   &lt;tabpanel id="optionspanel" orient="vertical"&gt;</p>
- <p>    &lt;checkbox id="casecheck" label="Case Sensitive Search"/&gt;</p>
- <p>    &lt;checkbox id="wordscheck" label="Match Entire Filename"/&gt;</p>
- <p>   &lt;/tabpanel&gt;</p>
- <p> &lt;/tabpanels&gt;</p>
- <p>&lt;/tabbox&gt;</p>
- </td>
- </tr>
- </tbody>
-</table>
-<p><img alt=""></p>
-<p>元素tab硬件放在了窗口的主要内容外面。你可以看到两标签,search和options。点击每一个都会将相应的标签页显示出来。如图中显示,两个选项出现在第二个标签上。第一个标签看起来与之前的更像,除了有顶部的标签之外。</p>
-<p>下一节,我们来看看如何创建内容的网格(grid)</p>