jQuery Mobile Basics

What is jQuery Mobile

jQuery Mobile is a Touch-Optimized Web Framework for Smartphones & Tablets. It is a unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. (from jQueryMobile.com)

With jQuery Mobile you can easily build mobile applications that will work on all smart phones, tablets and also on desktop platforms. If there is no necessity for developing separate apps for different platforms, jQuery Mobile is what you are looking for. jQuery Mobile is cross-platform, functions quite well and it is beautiful. Check this out for different UI elements: http://jquerymobile.com/designs/

Simple jQuery Mobile Page Structure

jQuery Mobile uses HTML5 data attributes to define mobile page elements. Roles, looks, behaviors etc. for the page elements in your mobile app are determined by these data attributes.

For example;

“data-role” attribute defines the role of an element on your mobile page. data-role=”page” makes your div a page from JQM's point of view. Similarly, data-role=”content” marks the content area for your mobile page (div), data-role=”navbar” defines a navigation bar using a div element, data-role=”button” creates a mobile button from your <a> element etc.

“data-transition” attribute defines how the transition will be while going from one page to another.

“data-theme” attribute defines the theming that is used on a page element. Theming defines the coloring properties of that element (for both active (hover, click) and inactive states).

“data-icon” attribute allows you to easily add icons to your controls. You can use “data-iconpos” attribute to set the positioning of an icon (right, left, top, bottom), but apparently this attribute is not working for navbar buttons (anchor “a” elements in a navbar).

Here you can find the full list of data attributes:
http://jquerymobile.com/demos/1.0rc3/docs/api/data-attributes.html

Below is a simple example of a jQuery Mobile page with multiple pages to transition to and from: (this is called multi-page template)

<body>
<div data-role="page" id="main">
<div data-role="content">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#main" data-transition="fade" data-theme="a" data-icon="arrow-l">
Main
</a>
</li>
<li>
<a href="#page1" data-transition="slidedown" data-theme="b" data-icon="gear">
Page1
</a>
</li>
<li>
<a href="#page2" data-transition="flip" data-theme="c" data-icon="check" data-iconpos="left"><!--data-iconpos not working-->
Page2
</a>
</li>
<li>
<a href="#page3" data-transition="slide" data-theme="e" data-icon="forward">
Page3
</a>
</li>
</ul>
</div>
</div>
</div>

<div data-role=”page” id=”page1″>
<div data-role=”content” style=”background-color:Gray”>
Content 1
 <a href="#" id="button1" data-role="button" data-icon="gear"data-iconpos="bottom">Click Me!</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content" style="background-color:Orange">
Content 2
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content" style="background-color:Teal">
Content 3
</div>
</div>
</body>



Pages & Linking Them

There are 2 types of pages in jQuery Mobile. One is the internal page, a div with data-role=”page”, and the other one is the external page, for example an html page like mypage.html.

Linking with Ajax:
This is the default behavior. To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via AJAX. To do this unobtrusively, the framework parses the link's href to formulate an AJAX request (Hijax) and displays the loading spinner. All this is done automatically by jQuery Mobile. (from jquerymobile.com)

If the request is successful, page content will be added to the DOM and the new page will be animated into the view. If the request fails, framework handles it gracefully.

Caution: You can not link to multipage documents with ajax navigation, in that case only the first internal page will be loaded. You must link without ajax to prevent potential hash collitions.

Linking Without Ajax:
Links that point to other domains or that have rel=”external”, data-ajax=”false” or target attributes will not be loaded with AJAX. Instead, these links will cause a full page refresh with no animated transition.
rel=”external” and data-ajax=”false” have the same effect but in fact they have different meanings. rel=”external” means you are linking to a page from another domain, data-ajax=”false” means you delibrately prefer to load your internal page without ajax (may be it has a multipage structure as I said before).

Linking within a Multipage Document
This is quite straight forward. If a link in a multi-page document points to an anchor (#page1), the framework will look for a page wrapper with that id (id=”page1″). If it finds a page in the HTML document, it will transition the new page into view considering the value of “data-transition” attribute. If “data-transition” attribute is not present then the default transition will be applied. (By default, the framework applies a fade transition.)

Here you can find detailed information about pages and linking them with/without ajax:
http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

Here is the full list of transitions and their demos:
http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html


jQuery Mobile Events

Above example is just the simplest jQuery Mobile app with a couple of pages, a navbar and a button for simple page navigation.
You can add events to this skeleton (I mean bind functions to events) and help him have some tissue and muscles, put some life in it.

Here are some of the main events you would like to use (bind) immediately in your app (in order of occurrence):

  • pagecreate
  • pagebeforeshow
  • pageshow

(Full event set: http://api.jquerymobile.com/category/events/)

pagecreate:
Triggered when the page has been created in the DOM (via ajax or other) but before all widgets have had an opportunity to enhance the contained markup.

pagebeforeshow: 
Triggered on the “toPage” (the page we are going to) before the actual transition animation is started. Could be used for the initial cleanup of a page (div) before populating it with new data.

pageshow:
Triggered on the “toPage” after the transition animation has completed. Could be used for showing some progress animation while loading dynamic page content.

Binding Events

You might want to bind these page events for dynamic content loading, binding control events before displaying (click, hover etc.) and other stuff between transitions. Binding different events for differents pages is quite simple:

$('#page1').bind('pagecreate', function(){
//may be bind button clicks to call web services here...

     $('#button1').bind('click', function(){
          //what is to be done on button click here...
     });
});

Above code will run on pagecreate event of “page1” binding your button whatever event you see fit.
Note: If you want to bind events for page elements that are not initially loaded but added to your document later (dynamically added with scripting) you need to use “live” for binding.

For example if you want to add click events for all the buttons that belong to “.myclass” class you should do it as below:

$('.myclass').live('click', function(){

     $.mobile.showPageLoadingMsg();//display mobile progress
//code that is here is dynamically bound to added elements.

     //hide mobile progress when task is complete
});

Similarly you might want to bind 'pageshow' event to display a progress and call a web service. Below code will display a progress when “page1” comes into view, and immediatelly calls a web service.

$('#page1').bind('pageshow', function(){
$.mobile.showPageLoadingMsg();
//XMLHttpRequest to your web service
});


Resources For You

Here what I have shown you is just a simple introduction, just a small piece of jQuery Mobile. There are many more things to learn about it. You might find these resources useful:

Check this out for full set of events: http://jquerymobile.com/demos/1.2.0/docs/api/events.html (although it is for 1.2.0, it should be pretty much the same for the other versions. I included this link here because the annotation here is different from the other “events” link above, and you might like this better)

Check this out for more information on jQuery Mobile API and components:
http://jquerymobile.com/demos/

This is API link for version 1.2.0:
http://jquerymobile.com/demos/1.2.0/docs/api/index.html

Useful resources gathered by jQuery Mobile team that will help you learn more about jQuery Mobile:http://jquerymobile.com/resources/

Hope this helps someone.

Good luck,
Serdar.

Leave a Reply

Your email address will not be published. Required fields are marked *