Beginner’s tutorial coding web apps with j query mobile spyrestudios

6/17/13 Beginner’s Tutorial Coding Web Apps with jQueryMobile | SpyreStudios
spyrestudios.com/beginners-tutorial-coding-web-apps-with-jquery-mobile/ 1/8
SpyreStudios - Design and Development Magazine
Freebies
Archives
Contact
Advertise
type keywords and hit enter...
Beginner’s Tutorial Coding Web Apps with jQuery Mobile
TweetTweet
24
Contentcomments
advertise hereadvertise here
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.

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.

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.
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.
1 <!DOCTYPEhtml>
2 <html>
3 <head>
4 <title>StandardjQMTemplate</title>
5 <linkrel="stylesheet"href="http://code.jquery.com/mobile/1.0b1/jquery.mobile
6 <scripttype="text/javascript"src="http://code.jquery.com/jquery-1.6.4.min.js
7 <scripttype="text/javascript"src="http://code.jquery.com/mobile/1.0rc2/jquer
8 </head>
9
10 <body>
11
12 </body>
13 </html>
1 <divdata-role="page"id="home">
2 <divdata-role="header">
3 <h1>Hereistheindexpage.</h1>
4 </div>
5
6 <divdata-role="content">
7 <p><center>Belowyoumaytransitiontoourotherpages.</center></p>
8
9 <ahref="#about"data-role="button"data-inline="true">AboutMe</a>
10 </div>
11 </div>
12
13 <divdata-role="page"id="about">
14 <divdata-role="header">
15 <h1>AboutUs</h1>
16 </div>
17
18 <divdata-role="content">

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.
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.
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.
19 <ahref="#home"data-rel="back"data-role="button"data-inline="true">&laqu
20 </div>
21 </div>
1 <metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-s

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.
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.loadingMessageis 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.
1 <scripttype="text/javascript"src="http://code.jquery.com/jquery-1.6.4.min.js"
2 <scripttype="text/javascript">
3 $(document).bind("mobileinit",function(){
4 $.mobile.loadingMessage=false;
5 });
6 </script>
7 <scripttype="text/javascript"src="http://code.jquery.com/mobile/1.0rc2/jquer
8 </head>

About the author:
Jake is a social media enthusiast and an Internet entrepreneur. He frequently writes articles involving new-age design
concepts and freelance management skills. You can find him in Google or follow his tweets @jakerocheleau
Related Entries:
How to Style iOS Sliding Checkboxes with jQuery
Code a Dynamic Questions & Answers FAQ Page with jQuery
How To Build an Alphabetical Page Index using jQuery
Building a Live Textarea Character Count Limit with CSS3 and jQuery
Coding an Image Thumbnail Hover Magnify Effect with jQuery
Comments:

Advertise Here
Reason:
Content blocked
by your
organization
This
Websense
category is
Options: Click more
information to
learn more about
your access
policy.
Popular Articles and Resources (view archives)

Beginner’s tutorial coding web apps with j query mobile spyrestudios

Recommended

Recommended

More Related Content

More from Daniel Downs

More from Daniel Downs (20)

Recently uploaded

Recently uploaded (20)

Beginner’s tutorial coding web apps with j query mobile spyrestudios