Your Search Results

    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

     

    添付ファイル

    ファイル サイズ 日時 添付者:
    Controlguide-description.png
    733 バイト 2007-08-20 13:43:51 Taken
    Controlguide-groupbox.png
    1237 バイト 2007-08-20 13:45:28 Taken
    Controlguide-image.png
    1619 バイト 2007-08-20 13:48:15 Taken
    Controlguide-label.png
    540 バイト 2007-08-20 13:49:44 Taken
    Controlguide-listbox.png
    1301 バイト 2007-08-20 13:51:50 Taken
    Controlguide-menulist.png
    995 バイト 2007-08-20 13:53:45 Taken
    Controlguide-menulist-editable.png
    1032 バイト 2007-08-20 13:55:07 Taken
    Controlguide-progressmeter.png
    870 バイト 2007-08-20 13:56:43 Taken
    Controlguide-radio.png
    1348 バイト 2007-08-20 13:58:40 Taken
    Controlguide-richlistbox.png
    1366 バイト 2007-08-20 14:00:13 Taken
    Controlguide-scale.png
    789 バイト 2007-08-20 14:01:48 Taken
    Controlguide-textbox.png
    635 バイト 2007-08-20 14:03:27 Taken
    Controlguide-textbox-multiline.png
    942 バイト 2007-08-20 14:05:09 Taken
    Controlguide-textbox-number.png
    932 バイト 2007-08-20 14:06:40 Taken
    Controlguide-textbox-password.png
    574 バイト 2007-08-20 14:08:03 Taken
    Controlguide-timepicker.png
    1112 バイト 2007-08-20 14:10:27 Taken
    Controlguide-toolbarbutton.png
    2156 バイト 2007-08-20 14:11:20 Taken
    Controlguide-tree.png
    1316 バイト 2007-08-20 14:12:25 Taken
    Controlsguide-button.png
    1118 バイト 2007-08-20 13:31:12 Taken
    Controlsguide-button-menu.png
    1112 バイト 2007-08-20 13:34:34 Taken
    Controlsguide-checkbox.png
    833 バイト 2007-08-20 13:36:44 Taken
    Controlsguide-colorpicker-button.png
    548 バイト 2007-08-20 13:38:23 Taken
    Controlsguide-datepicker.png
    1103 バイト 2007-08-20 13:40:30 Taken
    Controlsguide-datepicker-grid.png
    1975 バイト 2007-08-20 13:41:38 Taken
    url_load.gif
    18628 バイト 2007-10-25 15:00:31 Kohei
    Using_the_W3C_DOM_Level_1_Core-doctree.jpg
    7215 バイト 2007-10-03 17:44:36 Yoshino
    venkbreak-future.png
    9943 バイト 2007-10-07 15:53:36 Yoshino
    venkbreak-set.png
    9811 バイト 2007-10-07 15:50:41 Yoshino
    venkbreak-source.png
    9792 バイト 2007-10-07 15:50:01 Yoshino
    venkbreak-vars.png
    4680 バイト 2007-10-07 15:51:39 Yoshino
    venkintro-breakpoint.png
    54465 バイト 2007-10-07 15:10:11 Yoshino
    venkintro-colpicker.png
    300 バイト 2007-10-07 14:46:51 Yoshino
    venkintro-console.png
    8527 バイト 2007-10-07 14:56:40 Yoshino
    venkintro-file-function.png
    187 バイト 2007-10-07 14:44:28 Yoshino
    venkintro-file-js.png
    247 バイト 2007-10-07 14:41:14 Yoshino
    venkintro-file-unknown.png
    275 バイト 2007-10-07 14:43:51 Yoshino
    venkintro-file-xul.png
    276 バイト 2007-10-07 14:43:15 Yoshino
    venkintro-scripts.png
    6126 バイト 2007-10-07 14:39:56 Yoshino
    venkintro-source.png
    5613 バイト 2007-10-07 14:55:51 Yoshino
    venkintro-start.png
    28254 バイト 2007-10-07 14:35:50 Yoshino
    venkintro-stop-checked.png
    1006 バイト 2007-10-07 14:38:13 Yoshino
    venkintro-toolbar.png
    8057 バイト 2007-10-07 14:37:28 Yoshino
    venkintro-vars.png
    6747 バイト 2007-10-07 14:47:37 Yoshino
    venkintro-view.png
    1690 バイト 2007-10-07 14:36:38 Yoshino
    venkintro-watch-bool.png
    406 バイト 2007-10-07 14:50:20 Yoshino
    venkintro-watch-double.png
    362 バイト 2007-10-07 14:52:10 Yoshino
    venkintro-watch-function.png
    358 バイト 2007-10-07 14:52:46 Yoshino
    venkintro-watch-int.png
    321 バイト 2007-10-07 14:51:33 Yoshino

    Document Tags and Contributors

    タグ:
    Contributors to this page: Taken, fscholz, Mgjbot
    最終更新者: fscholz,