List Widget for HTML

list

HTML

A list widget is defined in any HTML element that allows an array of child elements. The most simple way to define a list then is to use a containing DIV element with a number of children DIV elements, one for each row in the list. E.g. The simplest list would be like the following:

<div style="visibility: hidden;" class="zlist">
  <div>list element 1</div>
  <div>list element 2</div>
  <div>list element 3</div>
  <div>list element 4</div>
  <div>list element 5</div>
  <div>list element 6</div>
  <div>list element 7</div>
  <div>list element 8</div>
  <div>list element 9</div>
  <div>list element 10</div>
  <div>list element 11</div>
  <div>list element 12</div>
  <div>list element 13</div>
  <div>list element 14</div>
  <div>list element 15</div>
  <div>list element 16</div>
  <div>list element 17</div>
  <div>list element 18</div>
  <div>list element 19</div>
  <div>list element 20</div>
</div>
<!-- widget list action:myListAction; selected:5; -->
	    

Note that the containing DIV has a class specified, in this case, a user defined class called "zlist", which is defined as so:

div.zlist {
    border: 1px solid #c0c0c0;
    clip : auto;
    overflow : auto;
    height: 100px;
    width: 200px;
}
	    

Note again that this class must be specified in your CSS. Its not automatically set up by the system.

The list widget supports the "selected" qualifier, which sets the list so that it displays that item initially selected.

Following is an example of a pulldown list in a menubar:

<div>
  <div>
    <div style="visibility: hidden;">
      <div><img src="../images/ZAR.png" style="width:100px;height:35px;border:0px;" alt="ZAR"/></div>
      <div><img src="../images/USD.png" style="width:100px;height:35px;border:0px;" alt="USD"/></div>
      <div><img src="../images/EUR.png" style="width:100px;height:35px;border:0px;" alt="EUR"/></div>
      <div><img src="../images/GBP.png" style="width:100px;height:35px;border:0px;" alt="GBP"/></div>
    </div>
    <!-- widget list selected:0; action:myListAction;-->
  </div>
  <!-- widget menuitem -->
</div>
<!-- widget menubar -->
	    

Note that in both cases style="visibility: hidden;" is used. The system will control display of the list, but its much better if you initially have it hidden.

Javascript

The "action:myListAction" in the above example causes a javascript function to be called when the list is toggled. The "action" property specifies the name of the function, in this case: "myListAction"

The function is called, and passed the HTML element that was clicked. E.g. the following Javascript function is called when the example on this page is clicked:

function myListAction(target)
{
    alert("list action "+elementToString(target) + " selected=" + target.widget_get_selected());
}
	    

(The elementToString function is a convenience function supplied with the widget library for debugging purposes). The widget_get_selected method is an extension to the list container HTML element. There are a number of methods that have been added:

widget_select(selected, no_scroll)

This method takes two parameters:

• selected: this is the index of the item that should be selected. The first item in teh list is at index 0.
• no_scroll: if false or undefined, then the widget will scroll to show the list item you have selected.

Following is an example of the widget_select method, which assumes that "elem" is the list container element:

elem.widget_select(2); // select the 3rd item in the list, and scroll to it if necessary.
	    

widget_get_selected()

This method takes no parameters, and it returns a number representing the item that is selected. Item numbering starts from zero.

Following is an example of the widget_get_selected method, which assumes that "elem" is the list container element:

var selectedIndex = elem.widget_get_selected();
	    

CSS

There are a number of CSS classes that are automatically adde to HTML elements that are list widgets. All of them begin with "widget_list". In fact "widget_list" is the basic class of the list when its not in a pulldown menu. When the list is in a pulldown menu, then the basic class is "widget_list_in_menuitem". Then for the items in the list, the classes are: "widget_list_item", "widget_list_item_highlight", and "widget_list_item_selected"

You can specify your own class for the widget list items, in which case you actually need to specify 3 classes. E.g. if you use the class "my_list_item", then you need to also specify: "my_list_item_highlight" and "my_list_item_selected". E.g.

.my_list {
    clip : auto;
    overflow : auto;
    height: 100px;
    width: 200px;
    background-color: white;
}
.my_list_item {
    cursor: hand;
    cursor: pointer;
    text-align: center;
    padding: 0px;
    vertical-align: middle;
    background-color: white;
}
.my_list_item_highlight {
    cursor: hand;
    cursor: pointer;
    text-align: center;
    padding: 0px;
    vertical-align: middle;
    background-color: #e0e0f0;
}
.my_list_item_selected {
    cursor: hand;
    cursor: pointer;
    text-align: center;
    padding: 0px;
    vertical-align: middle;
    background-color: #d0d0ff;
}
	    

More...

Documentation     Other widgets

Zwartberg Reseach & Development is a registered trading name of Open Source Software Consulting CC.
Phone:+27235411462, fax:+27235411379, mobile:+27796977082,
brian@zwartberg.com, P.O. Box 2, Prince Albert, 6930, South Africa.