xul标签简单使用

xul文档：http://172.20.16.162/www.xulplanet.com/tutorials/xultu/index.html
xul标签的详细使用：https://developer.mozilla.org/en/XUL_Reference

xul文件的创建：

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

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

按钮：

<button id="butt_1" label="Normal" disabled="false" accesskey="a"/>

文本：

<label value="This is some text" control="butt_id"/>

<description>
  This longer section of text is displayed.
</description>

图片：

<image id="img_id" src="images/banner.jpg"/>

文本输入框：

<textbox id="some-password" type="password" maxlength="8"/>
<textbox multiline="true"
           value="This is some text that could wrap onto multiple lines."/>

复选框：

<checkbox id="case-sensitive" checked="true" label="Case sensitive"/>

单选按钮组：

<radiogroup>
  <radio id="orange" label="Orange"/>
  <radio id="violet" selected="true" label="Violet"/>
  <radio id="yellow" label="Yellow"/>
</radiogroup>

单列列表：

<listbox>
  <listitem label="Butter Pecan" value="bpecan"/>
  <listitem label="Chocolate Chip" value="chocchip"/>
  <listitem label="Raspberry Ripple" value="raspripple"/>
  <listitem label="Squash Swirl" value="squash"/>
</listbox>

多列有标题列表：

<listbox>
  <listhead>
    <listheader label="Name"/>
    <listheader label="Occupation"/>
  </listhead>

  <listcols>
    <listcol/>
    <listcol/>
  </listcols>

  <listitem>
    <listcell label="George"/>
    <listcell label="House Painter"/>
  </listitem>
  <listitem>
    <listcell label="Mary Ellen"/>
    <listcell label="Candle Maker"/>
  </listitem>
  <listitem>
    <listcell label="Roger"/>
    <listcell label="Swashbuckler"/>
  </listitem>
</listbox>

下拉列表：

<menulist label="Bus">
  <menupopup>
    <menuitem label="Car"/>
    <menuitem label="Taxi"/>
    <menuitem label="Bus" selected="true"/>
    <menuitem label="Train"/>
  </menupopup>
</menulist>

进度条：

<progressmeter id="identifier" mode="determined" value="0%"/>

定位格：

<spacer flex="1"/>

分组框：

<groupbox>
  <caption label="Answer"/>
  <description value="Banana"/>
  <description value="Tangerine"/>
  <description value="Phone Booth"/>
  <description value="Kiwi"/>
</groupbox>

层：

<stack style="background-color: #C0C0C0">
  <description value="Disabled" style="color: white; padding-left: 1px; padding-top: 1px;"/>
  <description value="Disabled" style="color: grey;"/>
</stack>

<stack>
  <button label="Goblins" left="5" top="5"/>
  <button label="Trolls" left="60" top="20"/>
  <button label="Vampires" left="10" top="60"/>
</stack>

卡片：

<deck selectedIndex="2">
  <description value="This is the first page"/>
  <button label="This is the second page"/>
  <box>
    <description value="This is the third page"/>
    <button label="This is also the third page"/>
  </box>
</deck>

分页组：

<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>

表格：

<grid flex="1">
  <columns>
    <column flex="2"/>
    <column flex="1"/>
  </columns>

  <rows>
    <row>
      <button label="Rabbit"/>
      <button label="Elephant"/>
    </row>
    <row>
      <button label="Koala"/>
      <button label="Gorilla"/>
    </row>
  </rows>
</grid>

内容面板：

<iframe id="content-body" src="http://www.mozilla.org" flex="1"/>

<browser src="http://www.mozilla.org" flex="1"/>

Splitters：

<splitter collapse="before" resizeafter="farthest">
  <grippy/>
</splitter>

滚动条：

<scrollbar
    id="identifier"
    orient="horizontal"
    curpos="20"
    maxpos="100"
    increment="1"
    pageincrement="10"/>

工具栏：

<toolbox>
  <toolbar id="nav-toolbar">
    <toolbarbutton label="Back"/>
    <toolbarbutton label="Forward"/>
  </toolbar>
</toolbox>

菜单栏：

<toolbox flex="1">
  <menubar id="sample-menubar">
    <menu id="file-menu" label="File">
      <menupopup id="file-popup">
        <menuitem label="New"/>
        <menuitem label="Open"/>
        <menuitem label="Save"/>
        <menuseparator/>
        <menuitem label="Exit"/>
      </menupopup>
    </menu>
    <menu id="edit-menu" label="Edit">
      <menupopup id="edit-popup">
        <menuitem label="Undo"/>
        <menuitem label="Redo"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

<toolbox flex="1">
  <menubar id="sample-menubar">
    <menu id="file-menu" label="File">
      <menupopup id="file-popup">
        <menu id="new-menu" label="New">
          <menupopup id="new-popup">
            <menuitem label="Window"/>
            <menuitem label="Message"/>
          </menupopup>
        </menu>
        <menuitem label="Open"/>
        <menuitem label="Save"/>
        <menuseparator/>
        <menuitem label="Exit"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

弹出式菜单：

<popupset>
  <popup id="clipmenu">
    <menuitem label="Cut"/>
    <menuitem label="Copy"/>
    <menuitem label="Paste"/>
  </popup>
</popupset>

滚动菜单：

<arrowscrollbox orient="vertical" flex="1" style="max-height:150px;">
  <button label="Red"/>
  <button label="Blue"/>
  <button label="Green"/>
  <button label="Yellow"/>
  <button label="Orange"/>
  <button label="Silver"/>
  <button label="Lavender"/>
  <button label="Gold"/>
  <button label="Turquoise"/>
  <button label="Peach"/>
  <button label="Maroon"/>
  <button label="Black"/>
</arrowscrollbox>

分隔线：

  <separator class="groove-thin"/>