Documentation

JQMListViewItem

A JQMListViewItem object represents a single item in a JQMListView object. Items can be added to a list view using the appendItem() and insertItem() methods of the JQMListView object.

Example:

// add a new item to a list view:
var item = listview.appendItem();
item.label = "Item Label";
item.theme = "b";
item.badge = 10;
item.thumbnailImage = "image.png";
item.onClick = someFunction;

For more detail, view the full object documentation on HandheldDesigner.com.

Object Properties & Methods

 $thumbnailImgjQuery object representing the thumbnail image.
 badgeDisplay a "count" badge in the item.
 gotoPageGo to this page when the list view item is tapped.
 htmlThe content of the list view item, as HTML.
 iconDefines the icon used by the list view item.
 idThe object's unique identifier. Also used as the variable name in code.
 labelThe label text displayed by the item.
 onClickEvent that occurs when the item is tapped/clicked.
 removeRemoves this item from the list view.
 themeThe color scheme used to display the item.
 thumbnailImageDisplay a image in the item.
 userdataAn object for storing user data.
 wordwrapControls whether text in the list view item is truncated or word-wrapped.

$thumbnailImg

PropertyFirst available in version 1.4.0

jQuery object representing the thumbnail IMG DOM element.

badge

PropertyFirst available in version 1.1.0

Displays a "count" badge in the item. (Set to an empty string ("") to remove an existing badge.)

Example:

// add a new item with a count badge:
var item = listview.appendItem();
item.badge = 42;

gotoPage

PropertyFirst available in version 1.3.0

Go to this page when the list view item is tapped. Using the value "(back)" will automatically navigate the user to the previous page.

You can also select the transition used when changing pages with the list view's gotoPageTransition property.

html

PropertyFirst available in version 1.4.0

The content of the list view item, as HTML.

This property is only available at run-time.

Example:

// add a new item to a list view:
var item = listview.appendItem();

// create two lines of text:
item.html = "Label:
This is the label";

icon

PropertyFirst available in version 1.2.0

Defines the icon used by the list view item.

Can be one of the following values:

blank (default icon: arrow-r)
false (no icon)
alert
arrow-d
arrow-l
arrow-r
arrow-u
back
check
delete
forward
gear
grid
home
info
minus
plus
refresh
search
star

Example:

// give the first list item a "gear" icon
listview.items[0].icon = "gear";

id

PropertyFirst available in version 1.1.0

The object's unique identifier. Also used as the variable name in code.

Example:

// get height of object with the id "object1".
var h = object1.height;

label

PropertyFirst available in version 1.1.0

The label text displayed by the item.

Example:

// add a new item to a list view:
var item = listview.appendItem();
item.label = "Item Label";

onClick

EventFirst available in version 1.1.0

Event that occurs when the item is tapped/clicked. This event handler supersedes any onClick handler defined in the item's parent JQMListView.

The property can be set to reference an existing function:

var item = listview.appendItem();
item.onClick = someExistingFunction;

Or, you can define an anonymous function containing the code to be executed by the event:

var item = listview.appendItem();
item.onClick = function(event) {
	console.log("The event was triggered");
};

remove

MethodFirst available in version 1.1.0

Removes this item from the list view.

Usage:

item.remove();

Example:

// remove the second item from the list view:
var secondItem = listview.items[1];
secondItem.remove();

// or, shorter:
listview.items[1].remove();

theme

PropertyFirst available in version 1.1.0

The color scheme used to display the item. The specific colors used are defined by the jQuery Mobile theme used by your application.

If you are using the default theme, values "a" through "e" are defined.

Example:

// add a new item to a list view:
var item = listview.appendItem();
item.theme = "a";

thumbnailImage

PropertyFirst available in version 1.1.0

Display a image in the item. (Set to an empty string ("") to remove an existing thumbnail image.)

Images will be scaled to 80x80 pixels.

Example:

// add a new item with a thumbnail image:
var item = listview.appendItem();
item.thumbnailImage = "image.png";

userdata

PropertyFirst available in version 1.1.0

An JavaScript object for storing user data. You can use this property to store data for later use. (For example, to share data between event handlers.)

Example:

// track the number of times a button is clicked:
function button1_onClick(event) {
	if(button1.userdata.timesClicked === undefined)
	{
		button1.userdata.timesClicked = 0;
	}
	else
	{
		button1.userdata.timesClicked++;
	}
}

wordwrap

PropertyFirst available in version 1.2.0

Controls whether text in the list view item is truncated or word-wrapped when it is too long to fit in the available width.

Copyright © 2010-2017, Handheld Designer, LLC, All Rights Reserved.
Made by hand in New England, USA.