HTMLでリストボックスを作る【MailExtensionsメモ】

Thunderbird 78対応アドオン作成のメモ。ただのHTMLのTips。

XULのrichlistboxっぽいものをHTMLで。

■リストボックス

selectにsize属性をつけると、プルダウンではなくリストで表示される。optionの数がsizeより多くなるとスクロールできるようになる。

HTML:

<select size="4">

  <option>List1</option>

  <option>List2</option>

  <option>List3</option>

  <option>List4</option>

  <option>List5</option>

</select>

表示例:

■チェックボックス付きのリスト

selectではできなかった。以下のようにdivを使って作成。

CSS:

div.listbox {

  border: solid thin gray;

  background-color: white;

  height: 10em;

  overflow: auto;

}

borderで枠線をつけて、リストボックスっぽく見せる。

heightを設定し、overflowを設定することで、表示しきれなくなった場合にスクロールバーが出る。

HTML:

<div class="listbox">

    <input type="checkbox id="checkbox1"><label for="checkbox1">重要</label><br>

    <input type="checkbox id="checkbox2"><label for="checkbox2">仕事</label><br>

    <input type="checkbox id="checkbox3"><label for="checkbox3">プライベート</label><br>

    <input type="checkbox id="checkbox4"><label for="checkbox4">ToDo</label><br>

    <input type="checkbox id="checkbox5"><label for="checkbox5">後で</label><br>

    <input type="checkbox id="checkbox6"><label for="checkbox6">Test1</label><br>

    <input type="checkbox id="checkbox7"><label for="checkbox7">Test2</label><br>

</div>

divにinputを並べていく。labelのfor属性にチェックボックスのidを指定すると、ラベルをクリックしてもチェックボックスのチェックが切り替わるようになる。

表示例:

■selectのJavascriptでの操作

selectのよく使うプロパティ、メソッドを整理。

• プロパティ
• select.length: optionsの数
• select.options: selectに含まれるoptionすべて。配列と同じようにアクセスできる。select.childNodesと似ているが、childNodesは子ノードすべてなので、option以外のノードも含まれる。
• select.selectedIndex: 選択されているoptionのインデックス。複数選択されている場合は、一番若い数字。select.optionsのインデックスなので注意。この値をchildNodesのインデックスとして使うと、違うエレメントを参照してしまう可能性あり。
• select.selectedOptions: 選択されているoptionすべて。
• select.value: 選択されているoptionのvalue値。複数選択されているときは、一番若いインデックスのvalue。
• メソッド
• select.add(option): optionをselectに追加する。第二引数で、インデックス or optionエレメントを指定すると、その直前に挿入される。
• select.remove(index): indexにあるoptionをselectから削除する。indexを指定しないと、selectが丸ごと削除される。removeはエレメントではなくて、インデックスなので注意。