Beginner’s Tutorial Coding Web Apps with jQuery Mobile




The whole jQuery library has grown tremendously in the past couple of years. With open resources such as Git and Github web developers have been creating plugins for even richer effects. Some of the team members had a great idea to port this code over to a mobile platform.

featured image - mobile safari browser on iPhone 4S

In this guide it is my goal to introduce you into the jQuery Mobile platform. There is a lot of material to cover so we likely won’t hit everything. But fortunately the team has made development super easy and streamlined with fantastic documentation. Check out the website and fairly active developer’s forum for more in-depth answers.

A Basic Template

So getting started we should look at an example HTML template used for any standard jQuery Mobile application. When I talk about a jQM app this doesn’t necessarily mean you need to include user interaction and account signups and a database.

But I do think jQuery Mobile isn’t exactly for building websites as much as smaller web apps. The browser market has been finicky in the past, but now we’ve reached a point where the majority do support jQuery Mobile and these apps can be rapidly developed.

jQuery Mobile Framework Official Website

Take for example my demo code below. This will output a completely empty page with a simple title and includes the 3 external documents we need for any jQM app. These include the latest JavaScript version of jQuery & jQuery Mobile, along with the default CSS styles for jQM.

<!DOCTYPE html>
<html>
<head>
 <title>Standard jQM Template</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>

<body>

</body>
</html>

View the demo

Of course this is just a very basic example to get us started. The same semantics still apply where you should add all your page content within the HTML body tags. But jQuery Mobile will actually let you code multiple app pages into a single HTML file. This concept is a bit confusing at first so let’s break it down.

You may want to save the template above into a new index.html file. Now within this one file we can use data-roles to create a couple page elements. When your app first loads the top page will behave as your home or index. Then you would link between these pages by targeting the ID attribute. The page anatomy section gives you an overview of the additional elements you may add such as forms, inputs, headers, lists, or even a footer toolbar area.

Linking Between Pages

Below I have included some more example code demonstrating page links. You can add this into the body section of your own app, or modify the content a bit to your liking. What’s important here is the unique ID for for each container element and how the anchor links point to a new page.

    <div data-role="page" id="home">
		<div data-role="header">
		<h1>Here is the index page.</h1>
		</div>
		
		<div data-role="content">
		<p><center>Below you may transition to our other pages.</center></p>
		
		<a href="#about" data-role="button" data-inline="true">About Me</a>
		</div>
	</div>

	<div data-role="page" id="about">
		<div data-role="header">
		<h1>About Us</h1>
		</div>
		
		<div data-role="content">
		<a href="#home" data-rel="back" data-role="button" data-inline="true">&laquo; Back Home</a>
		</div>
	</div>

View the demo

On each of the anchor links I’m taking advantage of a few more HTML data-attributes. data-role is used to change the link style from plain text into a rounded button. Similarly the inline attribute makes the button appear as a smaller limited-width box. Otherwise we have links which span the entirety of the page and just look terrible!

On the About page I added a link with data-rel=”back” which you should familiarize yourself with. jQM does support browser history and you can use this attribute to simulate a back button at will. I did set the href value same as the home ID, but we could have used href=”#pork” and still gotten back to the previous view. Only because in this scenario data-rel overrides the href attribute no matter what value we put in.

Mobile Page Structures

After you begin to see how mobile apps are put together jQM appears more like a framework than simply a JavaScript library. And within this framework we must work with different rules compared to a regular web design. One such issue pertains to default page views how different mobile browsers will render the same code.

Notification bar and apps

The meta viewport tag can be added into your header to force all mobile browsers to render page zoom at 100%. This is a bigger problem with software such as Mobile Safari, as each website is purposefully scaled down to fit within the screen resolution. But adding the following tag into your header will reset this value and always keep your pages focused at the right size.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

The best part about this method is that you are able to customize how users experience your app. For example in my code above the user can still re-size the zoom at will if they don’t like our 100% setting. By adding user-scalable=no to the list of commands your app will be locked into the scope and overrides default browser settings.

Images are also a bit difficult to manage. Ultimately as the web designer it is your choice on how to handle image sizes. I recommend keeping things below a 450px width but experiment to see what looks best. By default visitors will be able to swipe over and down to get the whole view if your image exceeds the screen size. But you can set full 100% width for iOS devices using some real basic CSS styles to fix this for most of your traffic.

Remove the Loading Message

One other annoyance is the modal box which appears each time you transition to another page. jQuery Mobile has this running by default which ironically may not be the most effective choice. This appears whether you are loading pages from within the same file or external individual files.

To remove this we need to call upon a bit of JavaScript. This relies on jQuery commands but needs to be implemented before the jQuery Mobile library is initialized. Thus you’ll want to include this code in the middle of these 2 docs in your header area. I just added everything inline and you can check out my demo below.

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript">
 $(document).bind("mobileinit", function(){
  $.mobile.loadingMessage = false;
});
</script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>

View the demo

The mobileinit method is run immediately after jQuery Mobile has finished loading. We are binding an event handler to that method and calling our own function as a response. The setting for $.mobile.loadingMessage is generally a string of text which appears in the loading message dialog between pages. But when set to false the whole feature is disabled immediately! You can read more about global configuration and other jQM settings from their online docs.

Conclusion

In this brief tutorial we have covered the very basics of a jQuery Mobile application. I’ve exposed you to a basic template and the required elements for any standard page, along with some more intermediate-to-advanced level configuration stuff. After this guide you should feel a lot more comfortable toying around with the Mobile library and exploring their online documentation.

If you have built your own mobile template or design we’d love to check it out. The current 1.0 release is stable and will continue with bug fixes as time progresses. Let us know your thoughts in the discussion area below along with any questions or complaints you have.


Jake Rocheleau

About the author:

Jake is a creative designer, illustrator, and web developer. He frequently writes articles involving new-age design concepts and freelance management skills. You can find him in Google or follow his tweets @jakerocheleau

Comments:

Scroll back to the top
Content


Receive the top stories from SpyreStudios and the Splashpress Media network every week, right in your Inbox. Relevant and timely content is yours for FREE!