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>
