jQuery Mobile: Up and Running

Architecture

jQuery Mobile uses a very simple and powerful approach to define the content of the webapp. Remember that we’ve already discussed that the framework uses an unobtrusive approach, meaning that our HTML documents will work even without jQuery Mobile loading properly.

The main unit of the framework is the page. Just like normal HTML files then? No. Let me explain. A page is just a div element with a specific role. One HTML document can host one page or many pages inside the same file. And that is a new concept for most web designers.

We will be able to link to pages inside the same HTML document, or to pages on external HTML documents, using simple HTML markup, such as the a tag.

Cards Idea

The ability to embed more than one page inside the same document has been in the mobile web field for more than 10 years. The now obsolete Wireless Markup Language (WML) standard had the ability to insert many visual pages inside the same document with the goal of reducing latency and download times. jQuery Mobile follows the same idea implemented over normal HTML and JavaScript.

In the WML world, every page was called a card and a WML document was called a deck. A WML file used the card tag for defining a page inside a document, while jQuery Mobile typically uses a div tag with a specific role.

Roles

jQuery Mobile uses standard HTML markup, such as the div tag. To define what the framework should do with that div, we define a role. A role in the framework is defined using the attribute