Chapter 6. The Framework and JavaScript

jQuery Mobile provides a JavaScript API to communicate with the framework and to manage content using JavaScript. The first thing to know is that the framework is an HTML5 framework and the best way to create content is by using nonintrusive HTML5.

Creating pages and content using JavaScript instead of markup will lead to incompatibilities with some B-grade browsers and with older non-jQuery Mobile compatible platforms. If you are targeting modern tablets and smartphones and you are prepared to test your code on different real devices, then it’s safe to create content using JavaScript and AJAX instead of markup directly.

The JavaScript API not only allows us to create dynamic content compatible with the framework, but it also enables new events for us to handle and global configurations that we can define.

This chapter will require a basic knowledge of JavaScript and the jQuery core framework.

Document Events

It’s common on a web page to use the load event to configure some defaults and initialization code. If you are using the jQuery core framework, you may also be fond of the ready event exposed to the document element.

When we are working with a jQuery Mobile document, we have a new event that we need to handle and to understand: mobileinit. This new event will be fired when the jQuery Mobile framework is loaded and ready for our initialization code. This event should be handled on the document element using jQuery’s bind method:

$(document).bind('mobileinit', ...

Get jQuery Mobile: Up and Running now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.