简单的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" οnselect="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>