xul elements -- tabbox

简单的XUL控件很好理解，可以对比Html找到答案。为了更进一步了解他的优点，看一些稍为复杂一点的控件--Tab。

      在没有使用XUL之前，要实现一个Tab，可能需要几个按钮，几个panel或div，再加上一些脚本来控制，比较麻烦，虽然有些第三方的东西可以实现 Tab功能，例如微软的TabContrl，但始终觉得不方便，需要安装第三方的空间。今天看了看XUL中的Tab，感觉这种控件才是我们想要的。

      首先来看看一个Tab的结构

<tabbox id="tablist">
  <tabs>
    -- tab elements go here --
  </tabs>
  <tabpanels>
    -- tabpanel elements go here --
  </tabpanels>
</tabbox>

      很好理解
      tabbox标签定义了整个tab的容器，下面有两个子容器，一个是tabs,一个是tabpanels，tabs容器里包含了所有的tab按钮，而 tabpanels里包含所有的panel显示，tab按钮与panel是一对一的，即如果tabs里有3个tab，则tabpanels里需要有3个 tabpanel与之对应，下面看一个实际例子：

<tabbox>
  <tabs>
    <tab label="Mail"/>
    <tab label="News"/>
  </tabs>
  <tabpanels>
    <tabpanel id="mailtab">
      <checkbox label="Automatically check for mail"/>
    </tabpanel>
    <tabpanel id="newstab">
      <button label="Clear News Buffer"/>
    </tabpanel>
  </tabpanels>
</tabbox>

      显示效果如下：

So esay,So Cool

      有时候tabpanel里面的内容比较多，还可以分成多个xul页面来编辑

tabButton.xul

<?xml version="1.0"?> 
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<?xul-overlay href="tab1.xul"?>
<?xul-overlay href="tab2.xul"?>

<window id="findfile-window"    
title="Find Files"    
orient="horizontal"    
xmlns=http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
> 

<tabbox id="TabBox1" style="margin-top: 3px;" flex="1">
  <tabs id="Tabs1" onselect="alert(event.target.selectedItem.id);"/>
  <tabpanels id="TabPanels1" flex="1" align="stretch" />
</tabbox>

</window>

tab1.xul

<?xml version="1.0"?> 
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<overlay id="tab1overlay"
        xmlns=http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul

  xmlns:html=http://www.w3.org/1999/xhtml
>
<tabbox id="TabBox1" flex="1">
 <tabs id="Tabs1">
  <tab id="tab1" label="tab1"></tab>
 </tabs>
 <tabpanels id="TabPanels1" flex="1" align="stretch">
  <tabpanel id="tabpanel1">
   <label id="label1" value="This is Tab1"/>
  </tabpanel>
 </tabpanels>
</tabbox>
</overlay>

tab2.xul

<?xml version="1.0"?> 
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<overlay id="tab2overlay"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
"
  xmlns:html="http://www.w3.org/1999/xhtml
">
<tabbox id="TabBox1" flex="1">
 <tabs id="Tabs1">
  <tab id="tab2" label="tab2"></tab>
 </tabs>
 <tabpanels id="TabPanels1" flex="1" align="stretch">
  <tabpanel id="tabpanel2">
   <label id="label2" value="This is Tab2"/>
  </tabpanel>
 </tabpanels>
</tabbox>
</overlay>