XUL controls

以下の表は XUL が提供するユーザインタフェースコントロールの一覧です。それらがどのように使われるのかの手順を追ったガイドは XUL チュートリアルを、リファレンス情報は XUL リファレンスを参照してください。

<button>

ユーザが押すことのできるボタン。

<button label="保存" accesskey="S"/>
Image:Controlsguide-button.png
<button type="menu">

ドロップダウンメニューの付いたボタン。ボタンを押すとメニューが開きます。

<button type="menu" label="View">
  <menupopup>
    <menuitem label="List"/>
    <menuitem label="Details"/>
  </menupopup>
</button>
Image:Controlsguide-button-menu.png
<button type="menu-button">

メニューを表示する分離した矢印ボタンを持つボタン。'menu' タイプとは違い、ボタンのメイン部分が押された時に 【訳注: メニューを表示するのではなく】 別のアクションが実行されます。

<button type="menu-button" label="New">
  <menupopup>
    <menuitem label="New Document"/>
    <menuitem label="New Image"/>
  </menupopup>
</button>
 
<checkbox>

オンにしたりオフにできるコントロール。特に有効か無効かを切り替えるオプションを作るのに使われます。

<checkbox label="ツールバーのラベルを表示" checked="true"/>
Image:Controlsguide-checkbox.png
<colorpicker>

色を選択するコントロール

<colorpicker color="#FF0000"/>

<colorpicker type="button">

ボタンを押すと色を選択するポップが表示される、カラーピッカの特別な種類。

<colorpicker type="button" color="#CC0080"/>
Image:Controlsguide-colorpicker-button.png
<datepicker>

日付の入力に使われるテキストボックス群。

<datepicker value="2007/03/26"/>
Image:Controlsguide-datepicker.png
<datepicker type="grid">

日付を選択するカレンダ枠を表示する日付ピッカ。

<datepicker type="grid" value="2007/02/20"/>
Image:Controlsguide-datepicker-grid.png
<datepicker type="popup" >

日付入力のためのテキストボックスを表示しますが、カレンダ枠を表示するためのボタンもある日付ピッカ

<datepicker type="popup" value="2008/08/24"/>
 
<description>

description 要素は説明的なテキストに使われます。

<description>
  イベントの始まる時間を選択してください
</description>
Image:Controlguide-description.png
<groupbox>

グループボックスは他のユーザインタフェースコントールを取り囲む、ラベルのついたボックスを表示します

<groupbox>
  <caption label="ネットワーク"/>
</groupbox>
Image:Controlguide-groupbox.png
<image>

URL で指定された画像。

<image src="start.png"/>
Image:Controlguide-image.png
<label>

ラベルは近いコントロールに名前となるテキストを付けるのに使われます。

<label control="volume" value="音量:"/>
Image:Controlguide-label.png
<listbox>

リストボックスはラベル付けされた項目のリストから、ある項目を選ぶのに使われます。

<listbox>
  <listitem label="チョコレート"/>
  <listitem label="ようかん"/>
</listbox>
Image:Controlguide-listbox.png
<menulist>

メニューリスト (あるいはコンボボックス) は、ある値を選択するためのドロップダウンを持つコントロールを作るのに使われます。

<menulist>
  <menupopup>
    <menuitem label="ライオン" value="l"/>
    <menuitem label="トラ" value="t"/>
    <menuitem label="クマ" value="b"/>
  </menupopup>
</menulist>
Image:Controlguide-menulist.png
<menulist editable="true">

編集できるメニューリストは、選択された値がテキストボックスに表示されること以外、標準的なメニューリストそっくりです。テキストボックスでは値を直接変更したりポップアップリストに無い値へ変更されるかもしれません。

<menulist editable="true">
  <menupopup>
    <menuitem label="ゾウ" value="Elephants"/>
    <menuitem label="カンガル" value="Kangaroos"/>
    <menuitem label="コウモリ" value="Bats"/>
  </menupopup>
</menulist>
Image:Controlguide-menulist-editable.png
<progressmeter>

プログレスメータは長くかかる作業の進捗状況を表示するのに使われます。

<progressmeter value="40"/>
Image:Controlguide-progressmeter.png
<radio>

ラジオボタンは 1 回に 1 つしか選択されないオプションを作るのに使われます。

<radiogroup>
  <radio label="軽い" value="light"/>
  <radio label="重い" value="heavy"/>
</radiogroup>
Image:Controlguide-radio.png
<richlistbox>

リッチリストボックスは項目を 1 つ以上選択できるリストを表示します。テキストだけを表示するよう設計されたリストボックスとは異なり、リッチリストボックスはどんな種類の内容でも表示します。

<richlistbox>
  <richlistitem>
    <image src="happy.png"/>
  </richlistitem>
  <richlistitem>
    <image src="sad.png"/>
  </richlistitem>
  <richlistitem>
    <image src="angry.png"/>
  </richlistitem>
</richlistbox>
Image:Controlguide-richlistbox.png
<scale>

スケールは、ある範囲内で値を選択するためにバーを滑る、つまみのついたバーを表示します。

<scale min="1" max="10"/>
Image:Controlguide-scale.png
<textbox>

テキストを 1 行入力できるテキストボックス

<textbox value="firefox"/>
Image:Controlguide-textbox.png
<textbox multiline="true">

テキストを複数行入力できるテキストボックス

<textbox multiline="true"/>
Image:Controlguide-textbox-multiline.png
<textbox type="autocomplete">

ユーザの入力を補完する候補のドロップダウンを提供するテキストボックス。ユーザはテキストボックスを埋めるために候補の 1 つを選択できます。

<textbox type="autocomplete" autocompletesearch="history"/>
 
<textbox type="number">

数値を入力するためのテキストボックス。取りうる値全体を循環する、2 つの矢印ボタンが表示されます。

<textbox type="number" min="1" max="20"/>
Image:Controlguide-textbox-number.png
<textbox type="password">

パスワードの入力に使われる、タイプされた文字を隠すテキストボックス。

<textbox type="password"/>
Image:Controlguide-textbox-password.png
<timepicker>

時間ピッカは時間を入力するためのテキストボックス群を表示します。

<timepicker value="12:05"/>
Image:Controlguide-timepicker.png
<toolbarbutton>

ツールバー上に表示されるボタン

<toolbarbutton label="再読み込み"/>
Image:Controlguide-toolbarbutton.png
<toolbarbutton type="menu">

ドロップダウンメニューのついた、ツールバー上に表示されるボタン

<toolbarbutton type="menu" label="Show">
  <menupopup>
    <menuitem label="ツールバー"/>
    <menuitem label="ステータスバー"/>
  </menupopup>
</toolbarbutton>
 
<toolbarbutton type="menu-button">

メニューを表示する分離した矢印ボタンを持つ、ツールバー上のボタン。'menu' タイプとは違い、ボタンのメイン部分が押された時に 【訳注: メニューを表示するのではなく】 別のアクションが実行されます。

<toolbarbutton type="menu-button" label="Open">
  <menupopup>
    <menuitem label="変更されたファイルを開く"/>
    <menuitem label="全て開く"/>
  </menupopup>
</toolbarbutton>
 
<tree>

複列の列に項目の階層構造を表示します。

<tree>
  <treecols>
    <treecol label="名前" flex="1"/>
    <treecol label="大きさ" flex="1"/>
  </treecols>
  <treechildren>
    <treeitem>
      <treerow>
        <treecell label="ポップコーン"/>
        <treecell label="大"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="ルートビア"/>
        <treecell label="小"/>
      </treerow>
    </treeitem>
  </treechildren>
</tree>
Image:Controlguide-tree.png

 

最終更新日:

, by MDN contributors