List

Description

The List control is used a menu list. Each line can have a name, a number and an image. Selecting one will call <ListID>_onclick(i), with i containing the line number chosen. To get the text of the list item that was called,use the expression List_jqm1.children[i].innerText in your onclick function.

To add a control to your app, choose the control’s icon in the Toolbar, then position it on the Design Screen. Use the Property Editor to set the properties you need, then add functions to your code to respond to the events that come from the control: usually, just onclick.

Properties

Standard properties are supported, plus:

dividers	Is the item a divider? Comma separated list of Y and N. Design time.
dividerTheme	Which theme should all the dividers have? A-z. Design time
images	Image file names for each line, comma separated. Design time
imageStyle	None, 16x16 or 80x80. Design time
items	List of item names, comma separated.Items can be plain text or HTML. Design time
showNumbers	Show numbers to the left of each item. True/false. Design time
getItem(i)	Returns the text of item i.
getItemCount()	Returns the number of of items. Runtime.
deleteItem("all")	Delete all items. With no argument, just the last item is deleted. Runtime.
addItem(text, img, n, header)	Add a new item at postion n with text and img. text can be html. Runtime. If header is true, the line appears as a heading. Only text is required.
replaceItem(n, text, img)	Replace item n with new text and optional img. Runtime.
refresh()	Redraw list after updating. Runtime.

Events

Standard events are supported. However, events are not usually associated with the control.

Example (BASIC)

Function List1_onclick(i)
  If TypeName(i)="object" Then Exit Function
  MsgBox "Menu item chosen: " & i & " " & List1.getItem(i)
End Function

Example (JavaScript)

List1.onclick=function(i){
  if(typeof i == "object") return;
  alert("Menu item chosen: " + i + " " + List1.getItem(i));
}

Items can be formatted using HTML:

List1.addItem("<table><tr><td width=30>1</td><td width=200>Beschreibung</td><td>19.99</td></tr></table>")

You can change the color of the selected item:

List1.children[i].style.background="yellow"

You can change the background color of the list:

$("#List1 li").css("background-image", "none")
$("#List1 li").css("background-color", "yellow")

You can load items from a database:

Function successCallback(transaction, results)
  For i = 0 to results.rows.length
    List1.addItem(results.rows.item(i).columnName) 'where columnName is the name of your data column
  Next
End Function

You can add images too:

Function successCallback(transaction, results)
  Dim Text, ImgSrc
  For i = 0 to results.rows.length
    Text = results.rows.item(i).columnName
    ImgSrc = "img\" & (i+1) & ".png"    'images saved numbered under the older "img\" and deployed
    List1.addItem(Text,ImgSrc) 
  Next
End Function

This is a successCallback that would be executed via the Sql command. For more details on that, see: Sql

You can use count bubbles by structuring your items like so:

Choose One, Apples <span class='ui-li-count'>73</span>, Oranges <span class='ui-li-count'>82</span>

Change the height of a scrollable List at runtime:

  List1_scroller.style.height="200px"

Output

(message box showing “Menu item chosen: 2 Two”)