xul elements - tabbox _Web前端

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>