The Mobile Web with jQuery Mobile

By Vincent Wright

In October of 2010, the jQuery team released a mobile version of their awesome JavaScript library. What's the difference between the standard jQuery and the mobile version? This new version of jQuery is designed to run on mobile devices, including touchscreen devices like Palm, Blackberry, iPhone, Windows Phone, etc. and it's very lightweight (9KB in size).

jQuery mobile is currently in alpha which means it has not made it to beta yet. Keep this in mind if you decide to use it on a production website.

Page Structure for jQuery Mobile

Page structure is very important. One of the biggest things you will need to start with is an HTML 5 doctype. jQuery Mobile requires HTML 5. Only a few browsers right now support HTML 5 (but the HTML 5 standard--just like jQuery Mobile--is not fully released yet).

	<!DOCTYPE html> 
	<html> 
		<head>
			<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
			<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
			<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
		</head>
		<body>
			<div data-role="page"> 
				<div data-role="header"></div> 
				<div data-role="content"></div> 
				<div data-role="footer"></div> 
			</div> 
		</body>
	</html>
		

If you are not familiar with HTML 5, the new doctype is in the above code. You will notice that it is very different from the HTML 4 standard. The other thing you need to do to begin using jQuery Mobile is to reference the Mobile CSS file, the Core jQuery file, and the jQuery Mobile file.

Page Structure - jQuery Mobile Roles

In the body of the HTML file you will noticed that page sections are referenced as roles. The first <dv> element is the "page" role. This defines the area view or page on the mobile device. Inside the "page" div element, any normal HTML markup can be used, but it is better to use the other defining roles.

The first role is the "header" role. This is the role that defines the header of the page. Next, is the "content" role. This role should contain all of the main content of the page. The last role is the "footer" role. This role defines the footer section of the page.

Themes for jQuery Mobile

jQuery Mobile supports a powerful theming engine. You can create your own theme or use the built-in themes from jQuery. You can even give users the option of switching their theme. Themes are applied to objects by adding an attribute to the <div> tag. The attribute is "data-theme":

	<div data-role="page" data-theme="e"></div>
		

There are 6 themes built-in currently. These additional themes are referenced using letters a-e. If no theme is referenced, the default theme is used. Themes are not cascading. Themes are applied at the role level and are not applied to the child elements. This allows you to mix and match themes.

Navigation

Page navigation in jQuery Mobile is a lot different than in traditional web navigation. jQuery Mobile uses AJAX to load pages. This gives smoother page transitions and also can help give quicker page loads. We won't go into a long explanation of how this works. Just keep in mind that as long as the pages are set up with the code correctly, it will load just fine. One thing that this does is add a "back" button automatically to assist in navigating back to a previous page.

Toolbars

Toolbars are defined by the "header" and "footer" roles assigned to the <div> tags. As mentioned above, a "back" button is added for navigation. You can add your own buttons for navigation.

	<div data-role="header">
		<a href="index.html" data-icon="delete">Cancel</a>
		<a href="index.html" data-icon="check">Save</a>
		<h1>Page Title</h1>
	</div>
		

As you can see from the example code above, you can even add icons to each toolbar item.

Buttons

There are two types of buttons used with jQuery Mobile. The first are buttons used for navigation. These are the standard anchor links, "<a href="">Link</a>". The others use the button element or input element (when the type is set to "button"). You can add icons to these just like the toolbar above.

Conclusion

This is just a little information about the upcoming jQuery Mobile. There is a lot of information about it. If you are interested in learning more, please visit their website. As jQuery Mobile gets closer to release, expect to see more articles about it. As it stands now, you can easily play with it, but you will need to make sure you are using a browser that supports HTML 5 to get the full effect.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date