blob: 172190858c83c99d593549da602fdd2dc96a4f53 (
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
|
---
title: 分割线
slug: Mozilla/Tech/XUL/Tutorial/Splitters
translation_of: Archive/Mozilla/XUL/Tutorial/Splitters
---
<p>我们来看看如何向一个窗口添加分隔线。</p>
<h3 id="分隔box"> 分隔box</h3>
<p>有时候你可能会想将一个窗口分成两节，而使用户可以改变这两节的尺寸。一个例子是mozilla的浏览器窗口，你可以通过拖动两个结构之间的小条来改变侧边栏的尺寸。你也可以点击旁边的标记隐藏这个侧边栏</p>
<h4 id="元素splitter">元素splitter</h4>
<p>这个特性是由一个叫做splitter的元素来实现的。它可以在两个节之间创建一个较小的条，可以让用户来改变两边的大小。你可以将splitter放在任何想要放置的地方，这样就可以改变在同一个格子里前后元素的大小了当在水平box中放置一个splitter的时候，将会水平的改变大小。当放在竖直的box中的时候，就可以改变竖直方向的大小了。</p>
<p>元素splitter的用法如下：</p>
<table>
<tbody>
<tr>
<td style="width: 568px;">
<p><splitter</p>
<p> id="identifier"</p>
<p> state="open"</p>
<p> collapse="before"</p>
<p> resizebefore="closest"</p>
<p> resizeafter="closest"></p>
</td>
</tr>
</tbody>
</table>
<p>属性如下：</p>
<p>属性id 全局唯一标识</p>
<p>属性state 指出splitter的状态。默认设为open，将分割面板分开，否则设置为collapse，将其中一个隐藏，另一个占据整个空间</p>
<p>属性collapse 这表明当点击隐藏标记的时候隐藏哪一边。设置为before则隐藏前面的元素，如果设置为after则隐藏分割线后面的元素。如果设置为none，也是默认的值，当点击隐藏标记的时候都不会隐藏。</p>
<p>属性resizebefore 当分割线被拖动的时候。其左边或者上面的元素会改变大小。这一属性说明哪一个元素改变大小。设置为closest会使左边离分割线最近的立即改变大小，设置为farther则左边离分割线最远的元素将会最先改变大小。默认值为closest。</p>
<p>属性resizeafter当分割线被拖动的时候。其右边或者下面的元素会改变大小。这一属性说明哪一个元素改变大小。设置为closest会使右边离分割线最近的立即改变大小，设置为farther则右边离分割线最远的元素会改变大小。这个属性还可以设置为grow，这种情况下分割线右边的部分不会改变大小，相反的，整个格子会改变大小。默认值为closest。</p>
<p>如果设置了collapse属性，还可以添加一个grippy元素在splitter里面，这个元素可以用来销毁元素。</p>
<p>分割线旁边的元素的width和height属性会在splitter拖动的时候进行调整。准确的说是根据resizebefore和resizeafter属性来调整。</p>
<h4 id="Splitter的例子">Splitter的例子</h4>
<p>例子1：</p>
<table>
<tbody>
<tr>
<td style="width: 568px;">
<p><hbox flex="1"></p>
<p> <iframe id="content-1" width="60" height="20" src="w1.html"/></p>
<p> <splitter collapse="before" resizeafter="farthest"></p>
<p> <grippy/></p>
<p> </splitter></p>
<p> <iframe id="content-2" width="60" height="20" src="w2.html"/></p>
<p> <iframe id="content-3" width="60" height="20" src="w3.html"/></p>
<p> <iframe id="content-4" width="60" height="20" src="w4.html"/></p>
<p></hbox></p>
</td>
</tr>
</tbody>
</table>
<p><img alt=""></p>
<p>这里创建了4个iframe以及一个分割线，分割线在第一个和第二个iframe之间。属性collapse设置为before，也就是当隐藏标记点击的时候，第一个frame会消失。</p>
<p>这个splitter的resizeafter属性设置为farther。也就是说当拖动splitter的时候，其后最远的元素会改变大小。也就是frame4会改变大小。</p>
<p>没有对resizebefore设置值，因此其默认值是closest。这里，分割线之前只有一个splitter，因此frame1会改变大小。</p>
<p>Frame2和frame3只有在frame4达到最小值时才会改变大小。</p>
<p><img alt="" style="">、<img alt=""></p>
<p>也可以在一个窗口上放置多个splitter。同样的也可以隐藏其他元素，而不仅仅是frame。</p>
<h3 id="查找文件对话框例子"> 查找文件对话框例子</h3>
<p>让我们看看给查找文件对话框添加一个splitter之后是个什么样子。一个可能是在对话框中添加查找结果，在搜索选项和按钮之间。分割线可以让你隐藏或者查看搜索结果。</p>
<table>
<tbody>
<tr>
<td style="width: 568px;">
<p></tabbox></p>
<p> </p>
<p> <iframe src="results.html"/></p>
<p> <splitter collapse="before" resizeafter="grow"></p>
<p> <grippy/></p>
<p> </splitter></p>
<p> </p>
<p> <hbox></p>
</td>
</tr>
</tbody>
</table>
<p>这里添加了一个iframe和一个splitter。这里在tabbox之后不需要spacer了，可以将其移除。Frame的内容包含在一个'<code>results.html</code>'文件里面，现在创建这个文件并将其放在任何地方。以后我们会用一个结果列表来代替它。</p>
<p>这个splitter的collapse属性设置为before，就是说分割线之前的元素将会被隐藏。这里就是这个iframe。下面又一个隐藏标志点击之后的图。</p>
<p>属性resizeafter设置为grow，这样分割线之后的元素将会在分割线向下拖动的时候向下移动。Frame中的内容的大小可以变到任何尺寸。注意，窗口自己不会改变大小，你也会发现这是一个水平分割线，因为是放在竖直box里面的。</p>
<p>正常状态</p>
<p><img alt=""></p>
<p>隐藏后状态</p>
<p><img alt=""></p>
<p>接下来将会介绍如何创建工具条</p>
|
