分割线

我们来看看如何向一个窗口添加分隔线。

 分隔box

有时候你可能会想将一个窗口分成两节，而使用户可以改变这两节的尺寸。一个例子是mozilla的浏览器窗口，你可以通过拖动两个结构之间的小条来改变侧边栏的尺寸。你也可以点击旁边的标记隐藏这个侧边栏

元素splitter

这个特性是由一个叫做splitter的元素来实现的。它可以在两个节之间创建一个较小的条，可以让用户来改变两边的大小。你可以将splitter放在任何想要放置的地方，这样就可以改变在同一个格子里前后元素的大小了当在水平box中放置一个splitter的时候，将会水平的改变大小。当放在竖直的box中的时候，就可以改变竖直方向的大小了。

元素splitter的用法如下：

属性如下：

属性id  全局唯一标识

属性state 指出splitter的状态。默认设为open，将分割面板分开，否则设置为collapse，将其中一个隐藏，另一个占据整个空间

属性collapse 这表明当点击隐藏标记的时候隐藏哪一边。设置为before则隐藏前面的元素，如果设置为after则隐藏分割线后面的元素。如果设置为none，也是默认的值，当点击隐藏标记的时候都不会隐藏。

属性resizebefore 当分割线被拖动的时候。其左边或者上面的元素会改变大小。这一属性说明哪一个元素改变大小。设置为closest会使左边离分割线最近的立即改变大小，设置为farther则左边离分割线最远的元素将会最先改变大小。默认值为closest。

属性resizeafter当分割线被拖动的时候。其右边或者下面的元素会改变大小。这一属性说明哪一个元素改变大小。设置为closest会使右边离分割线最近的立即改变大小，设置为farther则右边离分割线最远的元素会改变大小。这个属性还可以设置为grow，这种情况下分割线右边的部分不会改变大小，相反的，整个格子会改变大小。默认值为closest。

如果设置了collapse属性，还可以添加一个grippy元素在splitter里面，这个元素可以用来销毁元素。

分割线旁边的元素的width和height属性会在splitter拖动的时候进行调整。准确的说是根据resizebefore和resizeafter属性来调整。

Splitter的例子

例子1：

这里创建了4个iframe以及一个分割线，分割线在第一个和第二个iframe之间。属性collapse设置为before，也就是当隐藏标记点击的时候，第一个frame会消失。

这个splitter的resizeafter属性设置为farther。也就是说当拖动splitter的时候，其后最远的元素会改变大小。也就是frame4会改变大小。

没有对resizebefore设置值，因此其默认值是closest。这里，分割线之前只有一个splitter，因此frame1会改变大小。

Frame2和frame3只有在frame4达到最小值时才会改变大小。

、

也可以在一个窗口上放置多个splitter。同样的也可以隐藏其他元素，而不仅仅是frame。

 查找文件对话框例子

让我们看看给查找文件对话框添加一个splitter之后是个什么样子。一个可能是在对话框中添加查找结果，在搜索选项和按钮之间。分割线可以让你隐藏或者查看搜索结果。

这里添加了一个iframe和一个splitter。这里在tabbox之后不需要spacer了，可以将其移除。Frame的内容包含在一个'results.html'文件里面，现在创建这个文件并将其放在任何地方。以后我们会用一个结果列表来代替它。

这个splitter的collapse属性设置为before，就是说分割线之前的元素将会被隐藏。这里就是这个iframe。下面又一个隐藏标志点击之后的图。

属性resizeafter设置为grow，这样分割线之后的元素将会在分割线向下拖动的时候向下移动。Frame中的内容的大小可以变到任何尺寸。注意，窗口自己不会改变大小，你也会发现这是一个水平分割线，因为是放在竖直box里面的。

正常状态

隐藏后状态

接下来将会介绍如何创建工具条