jQuery Mobile Page & Widgets API Reference

`Page`

4 methods

The jQuery Mobile page model: data-role='page' containers, programmatic page changes, and transitions.

$.mobile.changePage(to, options?)

Programmatically transitions from the current page to another page or URL.

Parameters

Name	Type	Description
to	string \| jQuery	Target page selector, element, or URL.
options	object	Optional { transition, reverse, changeHash, role, ... }.

Returns

Promise

Example

jquery-mobile

$.mobile.changePage('#settings', {
  transition: 'slide',
  reverse: false,
});

data-role="page"

Attribute that marks a container as a single page in the mobile app. Pages are shown one at a time.

Returns

markup

Example

jquery-mobile

<div data-role="page" id="home">
  <div data-role="header"><h1>Home</h1></div>
  <div data-role="content">...</div>
</div>

data-transition="slide|fade|pop|flip"

Attribute on links or buttons that sets the page transition animation.

Parameters

Name	Type	Description
transition	string	One of slide, fade, pop, flip, slidedown, etc.

Returns

markup

Example

jquery-mobile

<a href="#settings" data-transition="slide">Settings</a>

$.mobile.navigate(url, data?)

Programmatically navigates to a URL while integrating with the hashchange history state.

Parameters

Name	Type	Description
url	string	Target URL or hash.

Returns

void

Example

jquery-mobile

$.mobile.navigate('#profile', { info: 'from menu' });

`Widgets`

4 methods

Touch-optimized jQuery Mobile widgets: listview, navbar, and popup.

$(el).listview(options?)

Enhances a ul/ol into a styled mobile listview. Supports inset, split, and filter options.

Parameters

Name	Type	Description
options	object	Optional { inset, autodividers, filter, splitIcon, ... }.

Returns

jQuery

Example

jquery-mobile

$('#mylist').listview({
  inset: true,
  filter: true,
  filterPlaceholder: 'Search...',
});

$(el).navbar()

Enhances a ul of links into a jQuery Mobile navbar (up to 5 items evenly spaced).

Returns

jQuery

Example

jquery-mobile

<div data-role="navbar">
  <ul><li><a href="#">One</a></li><li><a href="#">Two</a></li></ul>
</div>
// programmatic
$('[data-role="navbar"]').navbar();

$(el).popup(options?)

Wraps content in a popup that overlays the page. Open with popup('open').

Parameters

Name	Type	Description
options	object	Optional { dismissible, overlayTheme, transition, positionTo, ... }.

Returns

jQuery

Example

jquery-mobile

$('#info').popup({
  dismissible: true,
  transition: 'pop',
  positionTo: 'window',
});
$('#info').popup('open');

instance('open' | 'close', ...args)

Programmatically opens or closes a widget (popup, dialog) by calling the method on the element.

Parameters

Name	Type	Description
method	string	'open' or 'close'.

Returns

jQuery

Example

jquery-mobile

$('#info').popup('open');
setTimeout(() => $('#info').popup('close'), 1500);

All references