为 find files 的例子添加元素

    现在我们将为findfile对话框添加一些元素，首先添加选择其他检索信息的能力（如尺寸和数据）：

<hbox>
  <menulist id="searchtype">
    <menupopup>
      <menuitem label="Name"/>
      <menuitem label="Size"/>
      <menuitem label="Date Modified"/>
    </menupopup>
  </menulist>
  <spacer style="width: 10px;"/>
  <menulist id="searchmode">
    <menupopup>
      <menuitem label="Is"/>
      <menuitem label="Is Not"/>
    </menupopup>
  </menulist>
  <spacer style="width: 10px;"/>
  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
</hbox>

    加了两个 drop down boxes 。一个 spacer 加进来用于分割各元素，每个空白有10像素，你会看到当窗口尺寸改变时，文本框会改变尺寸而其他元素不会 ，也会看到标签被移除了。

    如果垂直的改变窗口尺寸，元素不会改变尺寸，这是因为他们在水平的box中。 Find 和 Cancel 按钮总在春光看的底部是合适的。这很容易通过在两个水平box间添加空白实现。

<spacer style="height: 10px"/>
<hbox>
  <menulist id="searchtype">
    <menupopup>
      <menuitem label="Name"/>
      <menuitem label="Size"/>
      <menuitem label="Date Modified"/>
    </menupopup>
  </menulist>
  <spacer style="width: 10px;"/>
  <menulist id="searchmode">
    <menupopup>
      <menuitem label="Is"/>
      <menuitem label="Is Not"/>
    </menupopup>
  </menulist>
  <spacer style="width: 10px;"/>
  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
</hbox>

<spacer style="height: 10px" flex="1"/>

<hbox>

    现在当窗口改变尺寸，这两个按钮会移动以确保总在窗口的底部。 spacer 被添加在标题和检索条件之间。

    在检索条件上画上边框可能会更好看。可以使用 CSS border 属性或使用 groupbox 元素，第一种方法需要设置box的样式。我们使用后一种方法。  groupbox 可以画出适合当前主题的漂亮的边框。

    把box改为 groupbox：

<groupbox orient="horizontal">
  <caption label="Search Criteria"/>
  <menulist id="searchtype">
  .
  .
  .
  <spacer style="width: 10px;"/>
  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
</groupbox>

   当然还有其他的美化方案，比如让组框延伸到窗口底边。也可以修饰一下边界让他们看起来更漂亮。

    我们会在这个教程中看到更多关于box的例子及其功能因为我们还有在findfile对话框中添加新的元素。

Find files example so far Source View