分割线

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

 分隔box

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

元素splitter

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

元素splitter的用法如下:

<splitter

    id="identifier"

    state="open"

    collapse="before"

    resizebefore="closest"

    resizeafter="closest">

属性如下:

属性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:

<hbox flex="1">

  <iframe id="content-1" width="60" height="20" src="w1.html"/>

  <splitter collapse="before" resizeafter="farthest">

    <grippy/>

  </splitter>

  <iframe id="content-2" width="60" height="20" src="w2.html"/>

  <iframe id="content-3" width="60" height="20" src="w3.html"/>

  <iframe id="content-4" width="60" height="20" src="w4.html"/>

</hbox>

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

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

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

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

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

 查找文件对话框例子

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

</tabbox>

 

  <iframe src="results.html"/>

  <splitter collapse="before" resizeafter="grow">

   <grippy/>

  </splitter>

 

 <hbox>

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

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

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

正常状态

隐藏后状态

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

文档标签和贡献者

 此页面的贡献者: ziyunfei, JumuFENG
 最后编辑者: ziyunfei,