天天看点

FireFox扩展 在XUL的tabbox标签中引入一个网页

tabbox是多页签的容器

tabs中的tab是用来表示页签的头部

tabpanels下的tabpannel是页签的内容

tabs中元素顺序与tabpannel元素顺序对应

引入网页在tabpanel中使用browser也可以使用iframe

<tabbox id="tab_list" flex="1" >
      <tabs>
        <tab label="javaeye"/>
        <tab label="网易" />
      </tabs>
      <tabpanels class="tps" flex="1">
        <tabpanel>
          <browser id="page_content" type="content" flex="1" src="http://www.iteye.com" />
        </tabpanel>
        <tabpanel>
          <browser id="page_content" type="content" flex="1" src="http://www.163.com" />
        </tabpanel>
      </tabpanels>
    </tabbox>
           

上面代码中flex属性,非常重要,如果没有这个属性显示会有很大问题

官网对flex的解释:

flex

Type: string (representing an integer)

Indicates the flexibility of the element, which indicates how an element's container distributes remaining empty space among its children. Flexible elements grow and shrink to fit their given space. Elements with larger flex values will be made larger than elements with lower flex values, at the ratio determined by the two elements. The actual value is not relevant unless there are other flexible elements within the same container. Once the default sizes of elements in a box are calculated, the remaining space in the box is divided among the flexible elements, according to their flex ratios. Specifying a flex value of 0 has the same effect as leaving the flex attribute out entirely.

效果如附件所示

[img]http://dl.iteye.com/upload/attachment/338755/78c2affc-3c6a-3e4e-8663-58beba33ae77.jpg[/img]