Documentation

JQMNavbarItem

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

Example:

// add a new item to a navbar:
var item = navbar.appendItem();
item.label = "Item Label";
item.theme = "b";
item.onClick = someFunction;

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

Object Properties & Methods

 activeDefines whether the navbar item is "active".
 gotoPageGo to this page when the button is tapped.
 gotoPageTransitionPage transition used by the gotoPage property.
 iconAdds an icon image to the 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 navbar.
 themeThe color scheme used to display the item.
 userdataAn object for storing user data.

active

PropertyFirst available in version 1.2.0

True/false value that defines whether the navbar item is "active". Active items are displayed with a different color, regardless of the item's "theme".

Example:

// make the item active:
var item = navbar.appendItem();
item.active = true;

gotoPage

PropertyFirst available in version 1.3.0

Go to this page when the object 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 gotoPageTransition property.

Example:

// Go to "page2" when the button is tapped:
button.gotoPage = "page2";
button.gotoPageTransition = "slide";

gotoPageTransition

PropertyFirst available in version 1.3.0

Page transition used by the gotoPage property when changing pages. Can be one of the following values:

  • "fade"
  • "pop"
  • "flip"
  • "turn"
  • "flow"
  • "slidefade"
  • "slide"
  • "slideup"
  • "slidedown"
  • "none" (or empty)

In addition, reverse versions of the transition can be set by adding "reverse" to the property value. For example: "slide reverse".

Note: Transitions are only enabled when using jQuery Mobile AJAX page loading. This option can be enabled in the Project Settings menu.

Example:

// Go back to to "page" when the button is tapped:
button.gotoPage = "page1";
button.gotoPageTransition = "slide reverse";

icon

PropertyFirst available in version 1.2.0

Adds an icon image to the item.

Can be one of the following values:

blank (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 control a "gear" icon
item.icon = "gear";

id

PropertyFirst available in version 1.2.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.2.0

The label text displayed by the item.

Example:

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

onClick

EventFirst available in version 1.2.0

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

The property can be set to reference an existing function:

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

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

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

remove

MethodFirst available in version 1.2.0

Removes this item from the navbar.

Usage:

item.remove();

Example:

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

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

theme

PropertyFirst available in version 1.2.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 = navbar.appendItem();
item.theme = "a";

userdata

PropertyFirst available in version 1.2.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++;
	}
}

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