简单的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>
分享到:
相关推荐
XUL文档介绍。E文的。有需要的下载吧。呵呵
java运行依赖jar包
java运行依赖jar包
java运行依赖jar包
一组工具,用于在xforms支持下生成基于XUL的表单。
企业信息网格中XUL-SQL技术的研究.pdf
分布式信息集成中XUL-SQL问题的研究.pdf
XUL#是ac#库,用于使用Mozilla XUL用户界面编写Web和独立应用程序。 可以将同一应用程序托管到ASP.NET或Windows.Form(或Mono)语言中:C#,XUL,HTML
Xul Dev意味着Xul开发环境。 IDE旨在设计Xul接口并以任何编程语言编写程序。 IDE用Scriptol C ++编写,并且以源代码形式和二进制可执行文件形式提供。
通过网络上的任何Firefox浏览器控制AmaroK。
由于无法从Maven repository中下载依赖,因此提供kettle相关的jar包需要手动安装到maven仓库中,并提供了pom.xml作为参考
自己写的一个xul的小程序。本程序包含了xul程序的基本框架,是初学者入门的不错的选择。下载后,直接在firefox上安装,会在状态栏出现helloworld标签。 也是自己编辑本示例,将文件后缀改为zip,解压就可以看到示例...
EDS日历集成 EDS日历集成是Thunderbird附加组件。 它将Evolution Data Server与Thunderbird日历同步。 Gnome日期和时间小程序使用EDS显示日历事件。 多亏了这个附加组件,您将获得有关即将发生的事件的不错的系统...
Luxor是Java中的开源XML UI语言(XUL)工具包,可让您使用XML来构建UI,其中包括Web服务器,门户引擎(支持RSS),模板引擎(Velocity),脚本解释器(Python)和更多的。
XUL(XML UI语言)项目提供了免费的测试套件,以帮助确保不同的XUL电机/浏览器之间的互操作性,以及免费的开放源代码展示示例(又名蓝图),以演示XML在创建UI方面的强大功能。
XUL的一种方言,实现了Mozilla XUL的《第四稿》的大部分内容。 XML用户界面语言(XUL)是一种用于轻松创建GUI应用程序的方法。 Lux XUL通过Jython 2.1支持Python脚本。
XUL 是经过测试的真正的应用程序框架。事实上,即将发布的 Firefox 4.0 不仅仅是由 XUL 构建的,但它提供了一个 XUL 运行时环境,允许任何 Firefox 用户运行其他 XUL 应用程序。在本教程,您开始使用 XUL 进行编程,...
XUL4Java是一个基于Java的XML UI框架,可让您跨Hetrogenous Architecture构建功能丰富的跨平台应用程序,从而构建富客户端,桌面,Web和移动应用程序。 “一劳永逸”
XUL4J是jXUL源代码的另一个分支。 基于Java的XUL引擎,基于Mozilla XUL 1.4。 该库将在LGPL下发布。
xulib是JavaScript和其他语言的实用程序类库,可帮助更高效地开发远程Mozilla XUL应用程序