リストボックスとプルダウンリスト
XULでのリストボックスとプルダウンリストの作成方法について調べてみた.
リストボックスを表示するサンプルを作成してみた.
例によって,ファイルに保存してMozillaで開くと,文字列やボタンが表示される.ただしユニコードで保存しないと日本語は正しく表示されない.サンプルにあるように,リストボックスは要素listboxで表現し,各項目は要素listitemによって表現する.サンプルで使用した要素listの属性について以下に解説する.
- rows
- リストボックスの行数.listitemがいくつあってもこれで指定した行数に抑制され,溢れたlistitemはスクロールして表示,選択する.
- disabled
- trueだとリストボックス全体を使用不可にする.指定しないとfalseと見なされ,使用可となる.
- disableKeyNavigation
- リストボックスはlistitemの表示ラベルの最初の文字を打鍵するとその項目が選択される.disableKeyNavigationをtrueにするとこの機能が抑制される.指定しない場合はfalseを指定したと見なされ,この機能は有効となる.
- seltype
- 選択タイプ.singleだとlistitemを一つだけ選択でき,multipleだと複数選択できる.指定しない場合はsingleを指定したと見なされる.
- label
- 表示項目.
- selected
- 初期選択項目にtrueを指定する.
- disabled
- 選択不可項目にtrueを指定する.
プルダウンリストを表示するサンプルを作成してみた.
例によって,ファイルに保存してMozillaで開くと,文字列やボタンが表示される.ただしユニコードで保存しないと日本語は正しく表示されない.サンプルにあるように,プルダウンリストは3種類の要素を使用して表示する.
まず要素menulistによってボタン付きテキストボックスを作成し,要素menupopupによってそのボタンを押した際に表示されるポップアップウィンドウを作成し,要素menuitemによって選択項目を作成する.以下にサンプルで使用したこれらの要素の属性について解説する.
- 要素menuitemの属性label
- 選択項目の表示内容.
- 要素menuitemの属性selected
- 初期選択項目の場合にtrueを指定する.
- 要素menuitemの属性disabled
- 選択できない項目にtrueを指定する.
- 要素menulistの属性editable
- trueを指定すると,そのプルダウンメニューの各項目が編集可能となる.
- 要素menulistの属性disabled
- そのプルダウンメニューが使用不可になる.

