The jQuery Mobile framework has some exposed variables and methods we can configure and use in our applications. Here is a list of them and their functioning. Please note we've already had a look at many of them in the preceding chapters, and these are reported here for easier reference only.
The following options can be accessed using $.mobile.[optionName]:
The following methods can be called with $.mobile.[methodname]:
addResolutionBreakPoints(int|array values): Add width breakpoints to the min/max width classes that are added to the HTML element. Pass any number or array of numbers to add to the resolution classes.base.reset(string href): Set the generated BASE element'shrefattribute to a new page's base path.base.set (): Set the generated BASE element'shrefattribute to a new page's base path.browser.ie(): On-UA-based IE version check which allows for inclusion of IE 6+, including Windows Mobile 7.changePage(string|array|obj to[, string transition[, bool reverse=false[, bool changeHash=true]]]): Programmatically change from one page to another using a transition effect if specified or$.mobile.defaultTransition). Contrary to default behavior, you can specify a reverse transition (reverse=true) and make sure not to update hash to the page's URL when page change is complete (changeHash=false).The
toargument is required and can be a string (URL), a jQuery object($('#jqobj')), an object for sending form data, or an array specifying two page references ([from, to]) for transitioning from a known page (from) to a new one (to).nsNormalize(string prop): Takes a data attribute property (prop), prepends the namespace, then camel cases the attribute string.pageLoading([bool Done=false]): Shows the page loading message if loading is not done.silentScroll([int yPos=0]): Scrolls to a particular Y position without triggering scroll event listeners.url.getPrev(): Gets the previous page (in history) reference.
The following methods can be called using $.mobile.path.[methodName]:
clean (string url): Returns a URL path with the window's location protocol/hostname/pathname removed.getFilePath (string path): Returns the substring of afilepathbefore the sub-page key, for making a server request.hasProtocol (string url): Checks whether a URL has a different protocol (that is,ftp,mailto).isExternal (string url): Checks whether a URL is external or under the same domain.isEmbeddedPage (string url): Checks whether a URL refers to a page already in the DOM.makeAbsolute (string url): Prefixes a relative URL with the current path.setOrigin(): Sets thepath.originproperty to the currently viewed URL path.stripHash(string url): Returns the URL without an initial '#'.
The following property can be accessed using $.mobile.path.[propertyName]:
The following methods can be called using $.mobile.urlHistory.[methodName]:
The following properties can be accessed using $.mobile.urlHistory.[propertyname]:
A handful of properties and methods are available to use for testing whether the mobile browser/platform supports features jQuery Mobile makes use of. The following properties return either true or false if the corresponding feature is (respectively) supported or not:
Button elements are covered in Chapters 6, Mobile Clicking: Buttons and Chapter 7, Mobile Clicking: Buttons.
The following options can be modified to match your own liking from the mobileinit event: $.mobile.button.prototype.options.[optionName]:
|
Option |
Type |
Default value |
|---|---|---|
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
|
To disable a #button element: $('#button').button ('disable').
To enable a #button element: $('#button').button ('enable').
Checkboxes and radio buttons are covered in Chapter 7, Mobile Clicking: Buttons.
The following option can be modified to match your own liking from the mobileinit event: $.mobile.checkboxradio.prototype.options.[optionName]:
To disable a #radio element: $('#radio').checkboxradio ('disable') to enable a #radio element: $('#radio').checkboxradio ('enable').
If you make any changes to this kind of elements and/or their labels, you may want to refresh in order to update changes with $('#radio').checkboxradio ('refresh');
Collapsible blocks are covered in Chapter 4.
The following options can be modified to match your own liking from the mobileinit event: $.mobile.collapsible.prototype.options.[optionName].
Dialogs are covered in Chapter 2, Organizing Content: Pages and Dialogs.
To close a #dialog element: $('#dialog').dialog ('close').
If you don't know the ID of the dialog you want to close, you can close it with $('.ui-dialog').dialog('close').
List views are covered in Chapter 8, Organizing Information: List Views.
The following options can be modified to match your own liking from the mobileinit event: $.mobile.listview.prototype.options.[optionName]:
|
Option |
Type |
Default value |
|---|---|---|
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
|
We can access the refresh method with $('#listview').listview ('refresh').
Navigation bars are covered in Chapter 2, Organizing Content: Pages and Dialogs.
The following options can be modified to match your own liking from the mobileinit event: $.mobile.navbar.prototype.options.[optionName]:
Pages are covered in Chapter 2, Organizing Content: Pages and Dialogs.
The following options can be modified to match your own liking from the mobileinit event: $.mobile.page.prototype.options.[optionName]:
|
Option |
Type |
Default value |
|---|---|---|
|
|
| |
|
|
| |
|
| ||
|
|
|
In the degradeInput object, we can choose whether we want the following elements to be degraded or not (they are all default to false, and range to "number"): color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week.
Select menus are covered in Chapter 7, Mobile Clicking: Buttons.
The following options can be modified to match your own liking from the mobileinit event: $.mobile.select.prototype.options.[optionName]:
|
Option |
Type |
Default value |
|---|---|---|
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
|
You can programmatically open and close the menu of a #select element with $('#select').select ('open') and $('#select').select ('close').
Selects can be enabled/disabled using $('#select').select ('enable')/$('#select').select ('disable').
To update changes, use $('#select').select ('refresh').
Slider elements are covered in Chapter 7, Mobile Clicking: Buttons.
The following options can be modified to match your own liking from the mobileinit event: $.mobile.slider.prototype.options.[optionName].
|
Option |
Type |
Default value |
|---|---|---|
|
|
| |
|
|
| |
|
|
|
Sliders can be enabled ('enable'), disabled ('disable'), and updated ('refresh'): $('#slider').slider ('disable');
Text inputs are covered in Chapter 7, Mobile Clicking: Buttons.
The following options can be modified to match your own liking from the mobileinit event: $.mobile.textinput.prototype.options.[optionName]:
Input elements (#text) can be enabled and disabled using the textinput plugin: $('#text').textinput ('enable').
JqmData: Whenever we need to check, or programmatically set or remove, a data attribute, we need to make use of the mobile-friendly versions of the data methods.
$.jqmData$.jqmHasData$.jqmRemoveData
These can be called either as a standalone function: $.jqmRemoveData (element, property) or directly on an element: $('#element').jqmRemoveData (property).
Please note these functions take care of adding the (eventual) namespace (ns) to the data attribute, so if our namespace is myns- and we need to modify a mydata data, the core $.data function will be passed the value myns-mydata.
data-* attributes: The following data attributes can be specified in the markup:
|
Attribute |
Value(s) |
Notes |
Element(s) |
|---|---|---|---|
|
|
| ||
|
|
| ||
|
|
| ||
|
|
| ||
|
|
| ||
|
|
| ||
|
|
| ||
|
|
| ||
|
|
| ||
|
|
| ||
|
|
| ||
|
|
| ||
|
|
| ||
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
| ||
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
| ||
|
|
| ||
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
| ||
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
| ||
|
|
|
|
Icons: The data-icon attribute accepts the following icons (apart from the custom ones):
