mozilla
您的搜索结果

    增加更多的元素

    添加元素

     

     

    « Previous Next »

      

     

        我们继续通过为findfile对话框添加一些box来讨论box。

    为 find files 的例子添加元素

    Edit section

        现在我们将为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>
    
    Image:boxfinal1.png

        加了两个 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>
    
    Image:boxfinal2.png

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

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

    Find files example so far Source View


         下一章,create stacks.

     

    « Previous Next »

      

     

     

    文档标签和贡献者

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