JQuery Mobile Part 1: Basics

JQuery Mobile is a client-side framework that creates a mobile experience on the web.  JQuery Mobile uses a combination of CSS and custom HTML 5 data attributes to create a special appearance for a view.  JQuery Mobile defines a page object, which is a portion of the current view to show to the user.  For instance, a single HTML file can contain one page, or multiple pages.  A page is represented by the following markup:

<div data-role=”page”>..</div>

To create a multi-page template, we simply create multiple pages:

<div id=”Page1″ data-role=”page”>..</div>
<div id=”Page2″ data-role=”page”>..</div>
<div id=”Page3″ data-role=”page”>..</div>

A page can have a header and footer, which can be defined as the following:

<div data-role=”page”>
<div data-role=”header”>..</div>
<div data-role=”content”>..</div>
<div data-role=”footer”>..</div>
</div>

JQuery mobile styles the header and footer to look like the header and footer of a mobile application.

When you have multiple pages, only one page appears at a time (the first one).  You can switch between views either programmably or using a hyperlink, which looks like the following:

<a href=”#Page2″ data-role=”button”>Page 2</a>

A data-role=”button” attribute styles the hyperlink as a button, and loads the next view using AJAX.  The above hyperlink links to another page; however, if you want to link to an external page, use a button that points to the external page as in the following:

<a href=”Pages-Multi.html” data-role=”button”>See Multi-Page Template</a>

Here JQuery will redirect to another page or external link; however, for external links, add a rel=”external” attribute.  This tells JQuery to handle the request specially.  JQuery also has the ability to change the page via script, using the $.mobile.changePage function.  This function takes the   URL to show (#Page or about.html) or a JQuery reference to an element.  See the API documentation for more information.

As changes between pages occur, JQuery supports using animations.  By adding to a button a data-transition attribute, the redirect to another page will use an animation.  For a demo of animations, see the following link.

For more information on pages, see the documentation at: http://jquerymobile.com/demos/1.2.0/docs/pages/index.html

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s