listbox

The listbox element describes a list or table with one or more columns.

The listbox has several children elements:

• The listhead element describes the header of a listbox
• The listheader element describes one columns definition in the header of a listbox
• The listitem element describes one item in a listbox
• The listcell element describes one cell in an item for a multicolumn listbox

There are several ways to define a listbox:

• Without a header and only one column
• With a header and only one column
• With several columns

Listbox declarations

Without a header and only one column

In this case, there is only one listbox element and one listitem element for each row.

With a header and only one column

In this case, there is:

• One listbox element
• One listhead element to declare the headers
• One listheader element under the listhead element to declare the unique header
• One listitem element for each row

With a header and several columns

In this case, there is:

• One listbox element
• One listhead element to declare the headers
• One listheader element under the listhead element for each column header
• One listitem element for each row
• One listcell element under the listitem element for each cell

onselect event

The onselect command on the listbox allows to listen to row selection events. For example:

   <window id="hello" 
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
      <script>
   function select() {
     var index = document.getElementById("theList").currentIndex;
     print("selected " + index);
   }
      </script>       
      <listbox id="theList" onselect="select()">
         <listitem label="Ruby"/>
         <listitem label="Emerald"/>
         <listitem label="Sapphire" selected="true"/>
         <listitem label="Diamond"/>
      </listbox>      
   </window>

Examples

Example without a header

   <listbox">
      <listitem label="Ruby"/>
      <listitem label="Emerald"/>
      <listitem label="Sapphire" selected="true"/>
      <listitem label="Diamond"/>
   </listbox>

The result is:

Example with a header

   <listbox id="theList">
      <listhead>
         <listheader label="Color"/>
      </listhead>      
      <listitem label="Ruby"/>
      <listitem label="Emerald"/>
      <listitem label="Sapphire" selected="true"/>
      <listitem label="Diamond"/>
   </listbox>

The result is:

Example with several columns

   <listbox id="theList">
      <listhead>
         <listheader label="Name"/>
         <listheader label="Age"/>
         <listheader label="City"/>
      </listhead>
      <listitem>
         <listcell label="Julia"/>
         <listcell label="19"/>
         <listcell label="Boston"/>
      </listitem>
      <listitem>
         <listcell label="Sandra"/>
         <listcell label="25"/>
         <listcell label="London"/>
      </listitem>
      <listitem>
         <listcell label="Sharon"/>
         <listcell label="35"/>
         <listcell label="Paris"/>
      </listitem>
   </listbox>

The result is: