blob: c8c3e527c7f502d9f813df2373c2c4fde042921d (
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
|
---
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><tabbox id="tablist"></p>
<p> <tabs></p>
<p> <!-- tab elements go here --></p>
<p> </tabs></p>
<p> <tabpanels></p>
<p> <!-- tabpanel elements go here --></p>
<p> </tabpanels></p>
<p></tabbox></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><tabbox></p>
<p> <tabs></p>
<p> <tab label="Mail"/></p>
<p> <tab label="News"/></p>
<p> </tabs></p>
<p> <tabpanels></p>
<p> <tabpanel id="mailtab"></p>
<p> <checkbox label="Automatically check for mail"/></p>
<p> </tabpanel></p>
<p> <tabpanel id="newstab"></p>
<p> <button label="Clear News Buffer"/></p>
<p> </tabpanel></p>
<p> </tabpanels></p>
<p></tabbox></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><vbox flex="1"></p>
<p> </p>
<p><tabbox selectedIndex="1"></p>
<p> <tabs></p>
<p> <tab label="Search"/></p>
<p> <tab label="Options"/></p>
<p> </tabs></p>
<p> <tabpanels></p>
<p> <tabpanel id="searchpanel" orient="vertical"></p>
<p> </p>
<p> <description></p>
<p> Enter your search criteria below and select the Find button to begin</p>
<p> the search.</p>
<p> </description></p>
<p> </p>
<p> <spacer style="height: 10px"/></p>
<p> </p>
<p> <groupbox orient="horizontal"></p>
<p> <caption label="Search Criteria"/></p>
<p> </p>
<p> <menulist id="searchtype"></p>
<p> <menupopup></p>
<p> <menuitem label="Name"/></p>
<p> <menuitem label="Size"/></p>
<p> <menuitem label="Date Modified"/></p>
<p> </menupopup></p>
<p> </menulist></p>
<p> <spacer style="width: 10px;"/></p>
<p> <menulist id="searchmode"></p>
<p> <menupopup></p>
<p> <menuitem label="Is"/></p>
<p> <menuitem label="Is Not"/></p>
<p> </menupopup></p>
<p> </menulist></p>
<p> </p>
<p> <spacer style="height: 10px"/></p>
<p> <textbox id="find-text" flex="1" style="min-width: 15em;"/></p>
<p> </p>
<p> </groupbox></p>
<p> </tabpanel></p>
<p> <tabpanel id="optionspanel" orient="vertical"></p>
<p> <checkbox id="casecheck" label="Case Sensitive Search"/></p>
<p> <checkbox id="wordscheck" label="Match Entire Filename"/></p>
<p> </tabpanel></p>
<p> </tabpanels></p>
<p></tabbox></p>
</td>
</tr>
</tbody>
</table>
<p><img alt=""></p>
<p>元素tab硬件放在了窗口的主要内容外面。你可以看到两标签，search和options。点击每一个都会将相应的标签页显示出来。如图中显示，两个选项出现在第二个标签上。第一个标签看起来与之前的更像，除了有顶部的标签之外。</p>
<p>下一节，我们来看看如何创建内容的网格（grid）</p>
|
